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