test_bug877690.html (14780B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=877690 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for InspectorUtils.getCSSValuesForProperty</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <script> 12 13 /** Test for InspectorUtils.getCSSValuesForProperty */ 14 15 const InspectorUtils = SpecialPowers.InspectorUtils; 16 17 // Returns true if values contains all and only the expected values. False otherwise. 18 function testValues(values, expected) { 19 values.sort(); 20 expected.sort(); 21 22 info(JSON.stringify([...values])); 23 info(JSON.stringify(expected)); 24 25 if (values.length !== expected.length) { 26 return false; 27 } 28 29 for (var i = 0; i < values.length; ++i) { 30 if (values[i] !== expected[i]) { 31 return false; 32 } 33 } 34 return true; 35 } 36 37 function do_test() { 38 var allColors = [ 39 "COLOR", 40 "currentColor", 41 "transparent", 42 "rgb", 43 "rgba", 44 "hsl", 45 "hsla", 46 "hwb", 47 "color-mix", 48 "color", 49 "contrast-color", 50 "lab", 51 "lch", 52 "light-dark", 53 "oklab", 54 "oklch" 55 ]; 56 57 var allGradients = [ 58 "linear-gradient", 59 "-webkit-linear-gradient", 60 "-moz-linear-gradient", 61 "repeating-linear-gradient", 62 "-webkit-repeating-linear-gradient", 63 "-moz-repeating-linear-gradient", 64 "radial-gradient", 65 "-webkit-radial-gradient", 66 "-moz-radial-gradient", 67 "repeating-radial-gradient", 68 "-webkit-repeating-radial-gradient", 69 "-moz-repeating-radial-gradient", 70 "-webkit-gradient", 71 "conic-gradient", 72 "repeating-conic-gradient", 73 ]; 74 75 // test a property with keywords and colors 76 var prop = "color"; 77 var values = InspectorUtils.getCSSValuesForProperty(prop); 78 var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", ...allColors ]; 79 ok(testValues(values, expected), "property color's values."); 80 81 // test a shorthand property 82 var prop = "background"; 83 var values = InspectorUtils.getCSSValuesForProperty(prop); 84 var expected = [ "auto", "initial", "inherit", "unset", "revert", "revert-layer", ...allColors, "no-repeat", "repeat", 85 "repeat-x", "repeat-y", "space", "round", "fixed", "scroll", "local", "center", "top", "bottom", "left", "right", 86 "border-box", "padding-box", "content-box", "text", "contain", 87 "cover", "none", "-moz-element", "url", ...allGradients, "image-set" ]; 88 89 if(SpecialPowers.getBoolPref("layout.css.cross-fade.enabled")) { 90 expected.push("cross-fade"); 91 } 92 93 if(SpecialPowers.getBoolPref("layout.css.light-dark.images.enabled")) { 94 expected.push("light-dark"); 95 } 96 97 ok(testValues(values, expected), "property background values."); 98 99 var prop = "border"; 100 var values = InspectorUtils.getCSSValuesForProperty(prop); 101 var expected = [ "initial", "unset", "revert", "revert-layer", "dashed", "dotted", "double", 102 "groove", "hidden", "inherit", "inset", "medium", "none", "outset", "ridge", 103 "solid", "thick", "thin", ...allColors ] 104 ok(testValues(values, expected), "property border values."); 105 106 // test keywords only 107 var prop = "border-top"; 108 var values = InspectorUtils.getCSSValuesForProperty(prop); 109 var expected = [ "initial", "inherit", "revert", "revert-layer", "unset", "thin", "medium", "thick", "none", "hidden", "dotted", 110 "dashed", "solid", "double", "groove", "ridge", "inset", "outset", ...allColors ]; 111 ok(testValues(values, expected), "property border-top's values."); 112 113 // tests no keywords or colors 114 var prop = "padding-bottom"; 115 var values = InspectorUtils.getCSSValuesForProperty(prop); 116 var expected = [ "initial", "inherit", "unset", "revert", "revert-layer" ]; 117 ok(testValues(values, expected), "property padding-bottom's values."); 118 119 // test proprety 120 var prop = "display"; 121 var values = InspectorUtils.getCSSValuesForProperty(prop); 122 var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", "none", "inline", "block", "inline-block", "list-item", 123 "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", 124 "table-column-group", "table-column", "table-cell", "table-caption", 125 "flex", "inline-flex", "-webkit-box", "-webkit-inline-box", 126 "grid", "inline-grid", "inline list-item", "inline flow-root list-item", "flow-root list-item", 127 "ruby", "ruby-base", "ruby-base-container", "ruby-text", "ruby-text-container", "block ruby", 128 "contents", "flow-root" ]; 129 ok(testValues(values, expected), "property display's values."); 130 131 // test property 132 var prop = "float"; 133 var values = InspectorUtils.getCSSValuesForProperty(prop); 134 var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", "none", "left", "right", "inline-start", "inline-end" ]; 135 ok(testValues(values, expected), "property float's values."); 136 137 // Test property with "auto" 138 var prop = "margin"; 139 var values = InspectorUtils.getCSSValuesForProperty(prop); 140 var expected = [ "initial", "unset", "auto", "inherit", "revert", "revert-layer" ]; 141 142 if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) { 143 expected.push("anchor-size"); 144 } 145 146 ok(testValues(values, expected), "property margin's values."); 147 148 var prop = "inset"; 149 var values = InspectorUtils.getCSSValuesForProperty(prop); 150 var expected = [ "initial", "unset", "auto", "inherit", "revert", "revert-layer" ]; 151 152 if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) { 153 expected.push(...["anchor", "anchor-size"]); 154 } 155 156 ok(testValues(values, expected), "property inset's values."); 157 158 var prop = "width"; 159 var values = InspectorUtils.getCSSValuesForProperty(prop); 160 var expected = [ 161 "-moz-available", 162 "auto", 163 "fit-content", 164 "inherit", 165 "initial", 166 "max-content", 167 "min-content", 168 "revert", 169 "revert-layer", 170 "unset", 171 ]; 172 173 if(SpecialPowers.getBoolPref("layout.css.stretch-size-keyword.enabled")) { 174 expected.push("stretch"); 175 } 176 if(SpecialPowers.getBoolPref("layout.css.webkit-fill-available.enabled")) { 177 expected.push("-webkit-fill-available"); 178 } 179 if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) { 180 expected.push("anchor-size"); 181 } 182 183 ok(testValues(values, expected), "property width's values."); 184 185 var prop = "max-width"; 186 var values = InspectorUtils.getCSSValuesForProperty(prop); 187 var expected = [ 188 "-moz-available", 189 "none", 190 "fit-content", 191 "inherit", 192 "initial", 193 "max-content", 194 "min-content", 195 "revert", 196 "revert-layer", 197 "unset", 198 ]; 199 200 if(SpecialPowers.getBoolPref("layout.css.stretch-size-keyword.enabled")) { 201 expected.push("stretch"); 202 } 203 if(SpecialPowers.getBoolPref("layout.css.webkit-fill-available.enabled")) { 204 expected.push("-webkit-fill-available"); 205 } 206 if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) { 207 expected.push("anchor-size"); 208 } 209 210 ok(testValues(values, expected), "property max-width's values."); 211 212 // Test property with "normal" 213 var prop = "font-style"; 214 var values = InspectorUtils.getCSSValuesForProperty(prop); 215 var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", "italic", "normal", "oblique" ]; 216 ok(testValues(values, expected), "property font-style's values."); 217 218 // Test property with "cubic-bezier" and "step". 219 var prop = "transition"; 220 var values = InspectorUtils.getCSSValuesForProperty(prop); 221 var expected = [ "initial", "all", "unset", "cubic-bezier", "ease", "ease-in", "ease-in-out", 222 "ease-out", "inherit", "revert", "revert-layer", "linear", "none", "step-end", "step-start", 223 "steps", "normal", "allow-discrete" ]; 224 ok(testValues(values, expected), "property transition's values."); 225 226 // test invalid property 227 var prop = "invalidProperty"; 228 try { 229 InspectorUtils.getCSSValuesForProperty(prop); 230 ok(false, "invalid property should throw an exception"); 231 } 232 catch(e) { 233 // test passed 234 } 235 236 // test border-image property, for bug 973345 237 var prop = "border-image"; 238 var values = InspectorUtils.getCSSValuesForProperty(prop); 239 var expected = [ "auto", "inherit", "revert", "revert-layer", "initial", "unset", "repeat", "stretch", 240 "-moz-element", "url", ...allGradients, 241 "fill", "none", "round", "space", "image-set" ]; 242 243 if(SpecialPowers.getBoolPref("layout.css.cross-fade.enabled")) { 244 expected.push("cross-fade"); 245 } 246 247 ok(testValues(values, expected), "property border-image's values."); 248 249 var prop = "background-size" 250 var values = InspectorUtils.getCSSValuesForProperty(prop); 251 var expected = [ "auto", "inherit", "revert", "revert-layer", "initial", "unset", "contain", "cover" ]; 252 ok(testValues(values, expected), "property background-size's values."); 253 254 // Regression test for bug 1255401. 255 var prop = "all" 256 var values = InspectorUtils.getCSSValuesForProperty(prop); 257 var expected = [ "inherit", "initial", "unset", "revert", "revert-layer" ]; 258 ok(testValues(values, expected), "property all's values."); 259 260 var prop = "quotes" 261 var values = InspectorUtils.getCSSValuesForProperty(prop); 262 var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "auto", "none" ]; 263 ok(testValues(values, expected), "property quotes's values."); 264 265 // Regression test for bug 1255384. 266 for (prop of ["counter-increment", "counter-reset"]) { 267 var values = InspectorUtils.getCSSValuesForProperty(prop); 268 var expected = [ "inherit", "initial", "unset", "none", "revert", "revert-layer" ]; 269 ok(testValues(values, expected), "property " + prop + "'s values."); 270 } 271 272 // Regression test for bug 1430616 273 var prop = "text-align"; 274 var values = InspectorUtils.getCSSValuesForProperty(prop); 275 ok(values.includes("match-parent"), "property text-align includes match-parent"); 276 277 // Regression test for bug 1255402. 278 var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "left", "right", 279 "top", "center", "bottom" ]; 280 for (prop of ["object-position", "perspective-origin"]) { 281 var values = InspectorUtils.getCSSValuesForProperty(prop); 282 ok(testValues(values, expected), "property " + prop + "'s values"); 283 } 284 285 // Regression test for bug 1255378. 286 var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "none", ...allColors ]; 287 var values = InspectorUtils.getCSSValuesForProperty("text-shadow"); 288 ok(testValues(values, expected), "property text-shadow's values"); 289 290 var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "inset", "none", ...allColors ]; 291 var values = InspectorUtils.getCSSValuesForProperty("box-shadow"); 292 ok(testValues(values, expected), "property box-shadow's values"); 293 294 // Regression test for bug 1255379. 295 var shapeFunction = [ "close", "evenodd", "nonzero", "cw", "ccw", "small", "large", 296 "end", "origin", "start", "center", "left", "right", "top", 297 "bottom", "x-end","x-start", "y-end","y-start" ]; 298 var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", 299 "none", "url", "polygon", "circle", "ellipse", "inset", 300 "path", "rect", "xywh", "fill-box", "stroke-box", 301 "view-box", "margin-box", "border-box", "padding-box", 302 "content-box", ...shapeFunction ]; 303 var values = InspectorUtils.getCSSValuesForProperty("clip-path"); 304 ok(testValues(values, expected), "property clip-path's values"); 305 306 var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "auto", "rect" ]; 307 var values = InspectorUtils.getCSSValuesForProperty("clip"); 308 ok(testValues(values, expected), "property clip's values"); 309 310 // Regression test for bug 1255380. 311 var expected = [ "normal", "none", "counter", "counters", 312 "attr", "open-quote", "close-quote", "no-open-quote", 313 "no-close-quote", "inherit", "initial", "unset", "revert", 314 "revert-layer", "-moz-alt-content", "-moz-label-content", "image-set", "url", "-moz-element" ] 315 .concat(allGradients); 316 var values = InspectorUtils.getCSSValuesForProperty("content"); 317 ok(testValues(values, expected), "property content's values"); 318 319 // Regression test for bug 1255369. 320 var expected = ["none", "decimal", "decimal-leading-zero", "arabic-indic", "armenian", 321 "upper-armenian", "lower-armenian", "bengali", "cambodian", "khmer", 322 "cjk-decimal", "devanagari", "georgian", "gujarati", "gurmukhi", "hebrew", 323 "kannada", "lao", "malayalam", "mongolian", "myanmar", "oriya", "persian", 324 "lower-roman", "upper-roman", "tamil", "telugu", "thai", "tibetan", 325 "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", 326 "cjk-earthly-branch", "cjk-heavenly-stem", "lower-greek", 327 "hiragana", "hiragana-iroha", "katakana", "katakana-iroha", 328 "disc", "circle", "square", "disclosure-open", "disclosure-closed", 329 "japanese-informal", "japanese-formal", 330 "korean-hangul-formal", "korean-hanja-informal", "korean-hanja-formal", 331 "simp-chinese-informal", "simp-chinese-formal", 332 "trad-chinese-informal", "trad-chinese-formal", "cjk-ideographic", 333 "ethiopic-numeric", "symbols", "inherit", "initial", "unset", "revert", "revert-layer" ]; 334 var values = InspectorUtils.getCSSValuesForProperty("list-style-type"); 335 ok(testValues(values, expected), "property list-style-type's values"); 336 337 // Regression test for bug 1696677. 338 var values = InspectorUtils.getCSSValuesForProperty("cursor"); 339 ok(values.includes("url"), "property cursor values include url"); 340 ok(values.includes("image-set"), "property cursor values include image-set"); 341 342 // Test for bug 1935181. 343 var values = InspectorUtils.getCSSValuesForProperty("align-items"); 344 var expected = [ 345 "baseline", 346 "center", 347 "end", 348 "first baseline", 349 "flex-end", 350 "flex-start", 351 "inherit", 352 "initial", 353 "last baseline", 354 "normal", 355 "revert", 356 "revert-layer", 357 "safe", 358 "self-end", 359 "self-start", 360 "start", 361 "stretch", 362 "unsafe", 363 "unset" 364 ]; 365 366 if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) { 367 expected.push("anchor-center"); 368 } 369 370 ok(testValues(values, expected), "property align-items values."); 371 372 SimpleTest.finish(); 373 } 374 375 SimpleTest.waitForExplicitFinish(); 376 addLoadEvent(do_test); 377 378 </script> 379 </head> 380 <body> 381 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=877690">Mozilla Bug 877690</a> 382 <p id="display"></p> 383 <div id="content" style="display: none"> 384 </div> 385 <pre id="test"> 386 </pre> 387 </body> 388 </html>