test_all_shorthand.html (6483B)
1 <!DOCTYPE html> 2 <title>Test the 'all' shorthand property</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <script src="property_database.js"></script> 5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 6 <body onload="runTest()"> 7 8 <style id="stylesheet"> 9 #parent { } 10 #child { } 11 #child { } 12 </style> 13 14 <div style="display: none"> 15 <div id="parent"> 16 <div id="child"></div> 17 </div> 18 </div> 19 20 <script> 21 function runTest() { 22 var sheet = document.getElementById("stylesheet").sheet; 23 var parentRule = sheet.cssRules[0]; 24 var childRule1 = sheet.cssRules[1]; 25 var childRule2 = sheet.cssRules[2]; 26 var parent = document.getElementById("parent"); 27 var child = document.getElementById("child"); 28 29 // Longhand properties that are NOT considered to be subproperties of the 'all' 30 // shorthand. 31 var excludedSubproperties = ["direction", "unicode-bidi"]; 32 var excludedSubpropertiesSet = new Set(excludedSubproperties); 33 34 // Longhand properties that are considered to be subproperties of the 'all' 35 // shorthand. 36 var includedSubproperties = Object.keys(gCSSProperties).filter(function(prop) { 37 var info = gCSSProperties[prop]; 38 return info.type == CSS_TYPE_LONGHAND && 39 !excludedSubpropertiesSet.has(prop); 40 }); 41 42 // All longhand properties to be tested. 43 var allSubproperties = includedSubproperties.concat(excludedSubproperties); 44 45 46 // First, get the computed value for the initial value and one other value of 47 // each property. 48 var initialComputedValues = new Map(); 49 var otherComputedValues = new Map(); 50 51 allSubproperties.forEach(function(prop) { 52 parentRule.style.setProperty(prop, "initial", ""); 53 initialComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop)); 54 parentRule.style.cssText = ""; 55 }); 56 57 allSubproperties.forEach(function(prop) { 58 var info = gCSSProperties[prop]; 59 parentRule.style.setProperty(prop, info.other_values[0], ""); 60 otherComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop)); 61 parentRule.style.cssText = ""; 62 }); 63 64 65 // Test setting all:inherit through setProperty. 66 includedSubproperties.forEach(function(prop) { 67 var info = gCSSProperties[prop]; 68 parentRule.style.setProperty(prop, info.other_values[0], ""); 69 childRule1.style.setProperty(prop, "initial"); 70 childRule2.style.setProperty("all", "inherit"); 71 is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop), 72 "computed value for " + prop + " when 'all:inherit' set with setProperty"); 73 parentRule.style.cssText = ""; 74 childRule1.style.cssText = ""; 75 childRule2.style.cssText = ""; 76 }); 77 excludedSubproperties.forEach(function(prop) { 78 var info = gCSSProperties[prop]; 79 parentRule.style.setProperty(prop, info.other_values[0], ""); 80 childRule1.style.setProperty(prop, "initial"); 81 childRule2.style.setProperty("all", "inherit"); 82 is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop), 83 "computed value for excluded subproperty " + prop + " when 'all:inherit' set with setProperty"); 84 parentRule.style.cssText = ""; 85 childRule1.style.cssText = ""; 86 childRule2.style.cssText = ""; 87 }); 88 89 // Test setting all:initial through setProperty. 90 includedSubproperties.forEach(function(prop) { 91 var info = gCSSProperties[prop]; 92 parentRule.style.setProperty(prop, info.other_values[0], ""); 93 childRule1.style.setProperty(prop, "inherit"); 94 childRule2.style.setProperty("all", "initial"); 95 is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop), 96 "computed value for " + prop + " when 'all:initial' set with setProperty"); 97 parentRule.style.cssText = ""; 98 childRule1.style.cssText = ""; 99 childRule2.style.cssText = ""; 100 }); 101 excludedSubproperties.forEach(function(prop) { 102 var info = gCSSProperties[prop]; 103 parentRule.style.setProperty(prop, info.other_values[0], ""); 104 childRule1.style.setProperty(prop, info.other_values[0], ""); 105 childRule2.style.setProperty("all", "initial"); 106 is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop), 107 "computed value for excluded subproperty " + prop + " when 'all:initial' set with setProperty"); 108 parentRule.style.cssText = ""; 109 childRule1.style.cssText = ""; 110 childRule2.style.cssText = ""; 111 }); 112 113 // Test setting all:unset through setProperty. 114 includedSubproperties.forEach(function(prop) { 115 var info = gCSSProperties[prop]; 116 if (info.inherited) { 117 parentRule.style.setProperty(prop, info.other_values[0], ""); 118 childRule1.style.setProperty(prop, "initial", ""); 119 childRule2.style.setProperty("all", "unset"); 120 is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop), 121 "computed value for " + prop + " when 'all:unset' set with setProperty"); 122 } else { 123 parentRule.style.setProperty(prop, info.other_values[0], ""); 124 childRule1.style.setProperty(prop, info.other_values[0], ""); 125 childRule2.style.setProperty("all", "unset"); 126 is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop), 127 "computed value for " + prop + " when 'all:unset' set with setProperty"); 128 } 129 parentRule.style.cssText = ""; 130 childRule1.style.cssText = ""; 131 childRule2.style.cssText = ""; 132 }); 133 excludedSubproperties.forEach(function(prop) { 134 var info = gCSSProperties[prop]; 135 if (info.inherited) { 136 parentRule.style.setProperty(prop, info.other_values[0], ""); 137 childRule1.style.setProperty(prop, "initial", ""); 138 childRule2.style.setProperty("all", "unset"); 139 is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop), 140 "computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty"); 141 } else { 142 parentRule.style.setProperty(prop, info.other_values[0], ""); 143 childRule1.style.setProperty(prop, info.other_values[0], ""); 144 childRule2.style.setProperty("all", "unset"); 145 is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop), 146 "computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty"); 147 } 148 parentRule.style.cssText = ""; 149 childRule1.style.cssText = ""; 150 childRule2.style.cssText = ""; 151 }); 152 153 SimpleTest.finish(); 154 } 155 156 SimpleTest.waitForExplicitFinish(); 157 </script>