cssom-getPropertyValue-common-checks.html (7018B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Common serialization checks for all properties</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue"> 6 7 <div id="element"></div> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script> 12 const element = document.getElementById("element"); 13 const { style } = element; 14 const computedStyle = getComputedStyle(element); 15 const cssProperties = new Set(); 16 const cssShorthands = new Map(); 17 const cssShorthandsForLonghand = new Map(); 18 const cssLonghands = new Set(); 19 const cssAliases = new Map(); 20 const initialValues = new Map(); 21 22 setup(function() { 23 for (let obj = style; obj; obj = Reflect.getPrototypeOf(obj)) { 24 for (let name of Object.getOwnPropertyNames(obj)) { 25 const property = name.replace(/[A-Z]/g, c => "-" + c.toLowerCase()); 26 if (CSS.supports(property, "initial")) { 27 cssProperties.add(property); 28 } 29 } 30 } 31 for (let property of cssProperties) { 32 style.cssText = ""; 33 style.setProperty(property, "initial"); 34 if (style.length > 1) { 35 cssShorthands.set(property, [...style]); 36 for (let longhand of style) { 37 if (cssShorthandsForLonghand.has(longhand)) { 38 cssShorthandsForLonghand.get(longhand).add(property); 39 } else { 40 cssShorthandsForLonghand.set(longhand, new Set([property])); 41 } 42 } 43 } else if (style.length === 1) { 44 if (property === style[0]) { 45 cssLonghands.add(property); 46 } else { 47 cssAliases.set(property, style[0]); 48 } 49 } 50 } 51 }); 52 53 test(function() { 54 const bad = []; 55 for (let property of cssProperties) { 56 style.cssText = ""; 57 style.setProperty(property, "initial"); 58 const result = style.getPropertyValue(property); 59 if (result !== "initial") { 60 bad.push([property, result]); 61 } 62 } 63 assert_array_equals(bad, []); 64 }, "All properties can serialize 'initial'"); 65 66 test(function() { 67 for (let longhand of cssLonghands) { 68 element.style.setProperty(longhand, "initial"); 69 } 70 const bad = []; 71 for (let property of cssProperties) { 72 const result = computedStyle.getPropertyValue(property); 73 if (CSS.supports(property, result)) { 74 initialValues.set(property, result); 75 } else if (property !== "all") { 76 bad.push([property, result]); 77 } 78 } 79 assert_array_equals(bad, []); 80 }, "All properties (except 'all') can serialize their initial value (computed)"); 81 82 test(function() { 83 const bad = []; 84 for (let [property, value] of initialValues) { 85 style.cssText = ""; 86 style.setProperty(property, value); 87 const result = style.getPropertyValue(property); 88 if (!CSS.supports(property, result) && property !== "all") { 89 bad.push([property, value, result]); 90 } 91 } 92 assert_array_equals(bad, []); 93 }, "All properties (except 'all') can serialize their initial value (specified)"); 94 95 test(function() { 96 const bad = []; 97 for (let [shorthand, longhands] of cssShorthands) { 98 style.cssText = ""; 99 for (let longhand of longhands) { 100 style.setProperty(longhand, "initial"); 101 } 102 const result = style.getPropertyValue(shorthand); 103 if (result !== "initial") { 104 bad.push([shorthand, result]); 105 } 106 } 107 assert_array_equals(bad, []); 108 }, "All shorthands can serialize their longhands set to 'initial'"); 109 110 test(function() { 111 const bad = []; 112 outerloop: 113 for (let [shorthand, longhands] of cssShorthands) { 114 style.cssText = ""; 115 for (let longhand of longhands) { 116 if (!initialValues.has(longhand)) { 117 continue outerloop; 118 } 119 style.setProperty(longhand, initialValues.get(longhand)); 120 } 121 const result = style.getPropertyValue(shorthand); 122 if (!CSS.supports(shorthand, result) && shorthand !== "all") { 123 bad.push([shorthand, result]); 124 } 125 } 126 assert_array_equals(bad, []); 127 }, "All shorthands (except 'all') can serialize their longhands set to their initial value"); 128 129 test(function() { 130 const bad = []; 131 for (let [alias, target] of cssAliases) { 132 style.cssText = ""; 133 style.setProperty(target, "initial"); 134 const result = style.getPropertyValue(alias); 135 if (result !== "initial") { 136 bad.push([alias, result]); 137 } 138 } 139 assert_array_equals(bad, []); 140 }, "All aliases can serialize target property set to 'initial'"); 141 142 test(function() { 143 const bad = []; 144 for (let [alias, target] of cssAliases) { 145 if (!initialValues.has(target)) { 146 continue; 147 } 148 style.cssText = ""; 149 style.setProperty(target, initialValues.get(target)); 150 const result = style.getPropertyValue(alias); 151 if (!CSS.supports(alias, result)) { 152 bad.push([alias, result]); 153 } 154 } 155 assert_array_equals(bad, []); 156 }, "All aliases can serialize target property set to its initial value"); 157 158 test(function() { 159 const bad = []; 160 for (let [shorthand, longhands] of cssShorthands) { 161 for (let longhand of longhands) { 162 style.cssText = ""; 163 style.setProperty(shorthand, "initial"); 164 style.setProperty(longhand, "inherit"); 165 const result = style.getPropertyValue(shorthand); 166 if (result !== "") { 167 bad.push([shorthand, longhand, result]); 168 } 169 } 170 } 171 assert_array_equals(bad, []); 172 }, "Can't serialize shorthand when longhands are set to different css-wide keywords"); 173 174 test(function() { 175 const bad = []; 176 for (let [shorthand, longhands] of cssShorthands) { 177 for (let longhand of longhands) { 178 style.cssText = ""; 179 style.setProperty(shorthand, "initial"); 180 style.setProperty(longhand, "initial", "important"); 181 const result = style.getPropertyValue(shorthand); 182 if (result !== "") { 183 bad.push([shorthand, longhand, result]); 184 } 185 } 186 } 187 assert_array_equals(bad, []); 188 }, "Can't serialize shorthand when longhands have different priority"); 189 190 test(function() { 191 const bad = []; 192 for (let [shorthand, longhands] of cssShorthands) { 193 for (let longhand of longhands) { 194 style.cssText = ""; 195 style.setProperty(shorthand, "initial"); 196 style.removeProperty(longhand); 197 const result = style.getPropertyValue(shorthand); 198 if (result !== "") { 199 bad.push([shorthand, longhand, result]); 200 } 201 } 202 } 203 assert_array_equals(bad, []); 204 }, "Can't serialize shorthand set to 'initial' when some longhand is missing"); 205 206 test(function() { 207 const bad = []; 208 for (let [shorthand, longhands] of cssShorthands) { 209 if (initialValues.has(shorthand)) { 210 for (let longhand of longhands) { 211 style.cssText = ""; 212 style.setProperty(shorthand, initialValues.get(shorthand)); 213 style.removeProperty(longhand); 214 const result = style.getPropertyValue(shorthand); 215 if (result !== "") { 216 bad.push([shorthand, longhand, result]); 217 } 218 } 219 } 220 } 221 assert_array_equals(bad, []); 222 }, "Can't serialize shorthand set to initial value when some longhand is missing"); 223 </script>