layout/style/test/test_inherit_computation.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 -->
   5 <head>
   6   <title>Test for computation of CSS 'inherit' on all properties and 'unset' on inherited properties</title>
   7   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   8   <script type="text/javascript" src="property_database.js"></script>
   9   <style type="text/css" id="stylesheet"></style>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11 </head>
  12 <body>
  13 <p id="display"><span id="fparent"><span id="fchild"></span></span></p>
  14 <div id="content" style="display: none">
  15
  16 <div id="testnode"><span id="nparent"><span id="nchild"></span></span></div>
  17
  18 </div>
  19 <pre id="test">
  20 <script class="testbody" type="text/javascript">
  21
  22 /** Test for computation of CSS 'inherit' on all properties and 'unset' on
  23     inherited properties **/
  24
  25 var gDisplayTree = document.getElementById("display");
  26 // elements without a frame
  27 var gNParent = document.getElementById("nparent");
  28 var gNChild = document.getElementById("nchild");
  29 // elements with a frame
  30 var gFParent = document.getElementById("fparent");
  31 var gFChild = document.getElementById("fchild");
  32
  33 var gStyleSheet = document.getElementById("stylesheet").sheet;
  34 var gChildRule1 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #fchild {}", gStyleSheet.cssRules.length)];
  35 var gChildRule2 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #fchild {}", gStyleSheet.cssRules.length)];
  36 var gChildRule3 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild.allother, #fchild.allother {}", gStyleSheet.cssRules.length)];
  37 var gChildRuleTop = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #nchild.allother, #fchild, #fchild.allother {}", gStyleSheet.cssRules.length)];
  38 var gParentRuleTop = gStyleSheet.cssRules[gStyleSheet.insertRule("#nparent, #fparent {}", gStyleSheet.cssRules.length)];
  39
  40 function get_computed_value_node(node, property)
  41 {
  42   var cs = getComputedStyle(node, "");
  43   return get_computed_value(cs, property);
  44 }
  45
  46 function test_property(property)
  47 {
  48   var info = gCSSProperties[property];
  49
  50   var keywords = ["inherit"];
  51   if (info.inherited)
  52     keywords.push("unset");
  53
  54   keywords.forEach(function(keyword) {
  55     if ("prerequisites" in info) {
  56       var prereqs = info.prerequisites;
  57       for (var prereq in prereqs) {
  58         gParentRuleTop.style.setProperty(prereq, prereqs[prereq], "");
  59         gChildRuleTop.style.setProperty(prereq, prereqs[prereq], "");
  60       }
  61     }
  62
  63     if (info.inherited) {
  64       gParentRuleTop.style.setProperty(property, info.initial_values[0], "");
  65       var initial_computed_n = get_computed_value_node(gNChild, property);
  66       var initial_computed_f = get_computed_value_node(gFChild, property);
  67       gChildRule1.style.setProperty(property, info.other_values[0], "");
  68       var other_computed_n = get_computed_value_node(gNChild, property);
  69       var other_computed_f = get_computed_value_node(gFChild, property);
  70       isnot(other_computed_n, initial_computed_n,
  71             "should be testing with values that compute to different things " +
  72             "for '" + property + "'");
  73       isnot(other_computed_f, initial_computed_f,
  74             "should be testing with values that compute to different things " +
  75             "for '" + property + "'");
  76       gChildRule3.style.setProperty(property, keyword, "");
  77       gFChild.className="allother";
  78       gNChild.className="allother";
  79       var inherit_initial_computed_n = get_computed_value_node(gNChild, property);
  80       var inherit_initial_computed_f = get_computed_value_node(gFChild, property);
  81       is(inherit_initial_computed_n, initial_computed_n,
  82          keyword + " should cause inheritance of initial value for '" +
  83          property + "'");
  84       is(inherit_initial_computed_f, initial_computed_f,
  85          keyword + " should cause inheritance of initial value for '" +
  86          property + "'");
  87       gParentRuleTop.style.setProperty(property, info.other_values[0], "");
  88       var inherit_other_computed_n = get_computed_value_node(gNChild, property);
  89       var inherit_other_computed_f = get_computed_value_node(gFChild, property);
  90       is(inherit_other_computed_n, other_computed_n,
  91          keyword + " should cause inheritance of other value for '" +
  92          property + "'");
  93       is(inherit_other_computed_f, other_computed_f,
  94          keyword + " should cause inheritance of other value for '" +
  95          property + "'");
  96       gParentRuleTop.style.removeProperty(property);
  97       gChildRule1.style.removeProperty(property);
  98       gChildRule3.style.setProperty(property, info.other_values[0], "");
  99       gFChild.className="";
 100       gNChild.className="";
 101     } else {
 102       gParentRuleTop.style.setProperty(property, info.other_values[0], "");
 103       var initial_computed_n = get_computed_value_node(gNChild, property);
 104       var initial_computed_f = get_computed_value_node(gFChild, property);
 105       var other_computed_n = get_computed_value_node(gNParent, property);
 106       var other_computed_f = get_computed_value_node(gFParent, property);
 107       isnot(other_computed_n, initial_computed_n,
 108             "should be testing with values that compute to different things " +
 109             "for '" + property + "'");
 110       isnot(other_computed_f, initial_computed_f,
 111             "should be testing with values that compute to different things " +
 112             "for '" + property + "'");
 113       gChildRule2.style.setProperty(property, keyword, "");
 114       var inherit_other_computed_n = get_computed_value_node(gNChild, property);
 115       var inherit_other_computed_f = get_computed_value_node(gFChild, property);
 116       is(inherit_other_computed_n, other_computed_n,
 117          keyword + " should cause inheritance of other value for '" +
 118          property + "'");
 119       is(inherit_other_computed_f, other_computed_f,
 120          keyword + " should cause inheritance of other value for '" +
 121          property + "'");
 122       gParentRuleTop.style.removeProperty(property);
 123       gChildRule1.style.setProperty(property, info.other_values[0], "");
 124       var inherit_initial_computed_n = get_computed_value_node(gNChild, property);
 125       var inherit_initial_computed_f = get_computed_value_node(gFChild, property);
 126       is(inherit_initial_computed_n, initial_computed_n,
 127          keyword + " should cause inheritance of initial value for '" +
 128          property + "'");
 129       // For width and inline-size, getComputedStyle returns used value
 130       // when the element is displayed. Their initial value "auto" makes
 131       // the element fill available space of the parent, so it doesn't
 132       // make sense to compare it with the value we get before.
 133       if (property != "width" && property != "inline-size") {
 134         is(inherit_initial_computed_f, initial_computed_f,
 135            keyword + " should cause inheritance of initial value for '" +
 136            property + "'");
 137       }
 138       gParentRuleTop.style.removeProperty(property);
 139       gChildRule1.style.removeProperty(property);
 140       gChildRule2.style.removeProperty(property);
 141     }
 142
 143     if ("prerequisites" in info) {
 144       var prereqs = info.prerequisites;
 145       for (var prereq in prereqs) {
 146         gParentRuleTop.style.removeProperty(prereq);
 147         gChildRuleTop.style.removeProperty(prereq);
 148       }
 149     }
 150
 151     // FIXME -moz-binding value makes gElementF and its parent loses
 152     // their frame. Force it to get recreated after each property.
 153     // See bug 1331903.
 154     gDisplayTree.style.display = "none";
 155     get_computed_value(getComputedStyle(gFChild, ""), "width");
 156     gDisplayTree.style.display = "";
 157     get_computed_value(getComputedStyle(gFChild, ""), "width");
 158   });
 159 }
 160
 161 for (var prop in gCSSProperties) {
 162   // Skip -moz-binding because it effectively drops the frame.
 163   if (prop == "-moz-binding") {
 164     continue;
 165   }
 166   var info = gCSSProperties[prop];
 167   gChildRule3.style.setProperty(prop, info.other_values[0], "");
 168 }
 169
 170 for (var prop in gCSSProperties)
 171   test_property(prop);
 172
 173 </script>
 174 </pre>
 175 </body>
 176 </html>