test_inherit_computation.html

<!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 zoom because it affects other props.

  if (prop == "zoom") {

    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>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: