layout/style/test/test_inherit_computation.html
author Cristian Tuns <ctuns@mozilla.com>
Fri, 24 Sep 2021 14:42:22 -0400
changeset 593147 0b4005ebc9776ff43d99d1427c1a1fd2e14d9a44
parent 469640 c9c0c6f2eed54a187e124942e53c3660b4cf17d8
permissions -rw-r--r--
Backed out changeset dd075a074e45 (bug 1730518) for causing content crashes (bug 1732479). CLOSED TREE

<!DOCTYPE HTML>
<html>
<!--
-->
<head>
  <title>Test for computation of CSS 'inherit' on all properties and 'unset' on inherited properties</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="property_database.js"></script>
  <style type="text/css" id="stylesheet"></style>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"><span id="fparent"><span id="fchild"></span></span></p>
<div id="content" style="display: none">

<div id="testnode"><span id="nparent"><span id="nchild"></span></span></div>
  
</div>
<pre id="test">
<script class="testbody" type="text/javascript">

/** Test for computation of CSS 'inherit' on all properties and 'unset' on
    inherited properties **/

var gDisplayTree = document.getElementById("display");
// elements without a frame
var gNParent = document.getElementById("nparent");
var gNChild = document.getElementById("nchild");
// elements with a frame
var gFParent = document.getElementById("fparent");
var gFChild = document.getElementById("fchild");

var gStyleSheet = document.getElementById("stylesheet").sheet;
var gChildRule1 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #fchild {}", gStyleSheet.cssRules.length)];
var gChildRule2 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #fchild {}", gStyleSheet.cssRules.length)];
var gChildRule3 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild.allother, #fchild.allother {}", gStyleSheet.cssRules.length)];
var gChildRuleTop = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #nchild.allother, #fchild, #fchild.allother {}", gStyleSheet.cssRules.length)];
var gParentRuleTop = gStyleSheet.cssRules[gStyleSheet.insertRule("#nparent, #fparent {}", gStyleSheet.cssRules.length)];

function get_computed_value_node(node, property)
{
  var cs = getComputedStyle(node, "");
  return get_computed_value(cs, property);
}

function test_property(property)
{
  var info = gCSSProperties[property];

  var keywords = ["inherit"];
  if (info.inherited)
    keywords.push("unset");

  keywords.forEach(function(keyword) {
    if ("prerequisites" in info) {
      var prereqs = info.prerequisites;
      for (var prereq in prereqs) {
        gParentRuleTop.style.setProperty(prereq, prereqs[prereq], "");
        gChildRuleTop.style.setProperty(prereq, prereqs[prereq], "");
      }
    }

    if (info.inherited) {
      gParentRuleTop.style.setProperty(property, info.initial_values[0], "");
      var initial_computed_n = get_computed_value_node(gNChild, property);
      var initial_computed_f = get_computed_value_node(gFChild, property);
      gChildRule1.style.setProperty(property, info.other_values[0], "");
      var other_computed_n = get_computed_value_node(gNChild, property);
      var other_computed_f = get_computed_value_node(gFChild, property);
      isnot(other_computed_n, initial_computed_n,
            "should be testing with values that compute to different things " +
            "for '" + property + "'");
      isnot(other_computed_f, initial_computed_f,
            "should be testing with values that compute to different things " +
            "for '" + property + "'");
      gChildRule3.style.setProperty(property, keyword, "");
      gFChild.className="allother";
      gNChild.className="allother";
      var inherit_initial_computed_n = get_computed_value_node(gNChild, property);
      var inherit_initial_computed_f = get_computed_value_node(gFChild, property);
      is(inherit_initial_computed_n, initial_computed_n,
         keyword + " should cause inheritance of initial value for '" +
         property + "'");
      is(inherit_initial_computed_f, initial_computed_f,
         keyword + " should cause inheritance of initial value for '" +
         property + "'");
      gParentRuleTop.style.setProperty(property, info.other_values[0], "");
      var inherit_other_computed_n = get_computed_value_node(gNChild, property);
      var inherit_other_computed_f = get_computed_value_node(gFChild, property);
      is(inherit_other_computed_n, other_computed_n,
         keyword + " should cause inheritance of other value for '" +
         property + "'");
      is(inherit_other_computed_f, other_computed_f,
         keyword + " should cause inheritance of other value for '" +
         property + "'");
      gParentRuleTop.style.removeProperty(property);
      gChildRule1.style.removeProperty(property);
      gChildRule3.style.setProperty(property, info.other_values[0], "");
      gFChild.className="";
      gNChild.className="";
    } else {
      gParentRuleTop.style.setProperty(property, info.other_values[0], "");
      var initial_computed_n = get_computed_value_node(gNChild, property);
      var initial_computed_f = get_computed_value_node(gFChild, property);
      var other_computed_n = get_computed_value_node(gNParent, property);
      var other_computed_f = get_computed_value_node(gFParent, property);
      isnot(other_computed_n, initial_computed_n,
            "should be testing with values that compute to different things " +
            "for '" + property + "'");
      isnot(other_computed_f, initial_computed_f,
            "should be testing with values that compute to different things " +
            "for '" + property + "'");
      gChildRule2.style.setProperty(property, keyword, "");
      var inherit_other_computed_n = get_computed_value_node(gNChild, property);
      var inherit_other_computed_f = get_computed_value_node(gFChild, property);
      is(inherit_other_computed_n, other_computed_n,
         keyword + " should cause inheritance of other value for '" +
         property + "'");
      is(inherit_other_computed_f, other_computed_f,
         keyword + " should cause inheritance of other value for '" +
         property + "'");
      gParentRuleTop.style.removeProperty(property);
      gChildRule1.style.setProperty(property, info.other_values[0], "");
      var inherit_initial_computed_n = get_computed_value_node(gNChild, property);
      var inherit_initial_computed_f = get_computed_value_node(gFChild, property);
      is(inherit_initial_computed_n, initial_computed_n,
         keyword + " should cause inheritance of initial value for '" +
         property + "'");
      // For width and inline-size, getComputedStyle returns used value
      // when the element is displayed. Their initial value "auto" makes
      // the element fill available space of the parent, so it doesn't
      // make sense to compare it with the value we get before.
      if (property != "width" && property != "inline-size") {
        is(inherit_initial_computed_f, initial_computed_f,
           keyword + " should cause inheritance of initial value for '" +
           property + "'");
      }
      gParentRuleTop.style.removeProperty(property);
      gChildRule1.style.removeProperty(property);
      gChildRule2.style.removeProperty(property);
    }

    if ("prerequisites" in info) {
      var prereqs = info.prerequisites;
      for (var prereq in prereqs) {
        gParentRuleTop.style.removeProperty(prereq);
        gChildRuleTop.style.removeProperty(prereq);
      }
    }

    // FIXME -moz-binding value makes gElementF and its parent loses
    // their frame. Force it to get recreated after each property.
    // See bug 1331903.
    gDisplayTree.style.display = "none";
    get_computed_value(getComputedStyle(gFChild, ""), "width");
    gDisplayTree.style.display = "";
    get_computed_value(getComputedStyle(gFChild, ""), "width");
  });
}

for (var prop in gCSSProperties) {
  // Skip -moz-binding because it effectively drops the frame.
  if (prop == "-moz-binding") {
    continue;
  }
  var info = gCSSProperties[prop];
  gChildRule3.style.setProperty(prop, info.other_values[0], "");
}

for (var prop in gCSSProperties)
  test_property(prop);

</script>
</pre>
</body>
</html>