test_css-properties.html (3426B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 Bug 1265798 - Replace inIDOMUtils.cssPropertyIsShorthand 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test CSS Properties Actor</title> 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 11 <script type="application/javascript" src="inspector-helpers.js"></script> 12 <script type="application/javascript"> 13 "use strict"; 14 15 window.onload = function() { 16 function toSortedString(array) { 17 return JSON.stringify(array.sort()); 18 } 19 20 const runCssPropertiesTests = async function(url) { 21 info(`Opening tab with CssPropertiesActor support.`); 22 // Open a new tab. The only property we are interested in is `target`. 23 const { target } = await attachURL(url); 24 const { cssProperties } = await target.getFront("cssProperties"); 25 26 ok(cssProperties.isKnown("border"), 27 "The `border` shorthand property is known."); 28 ok(cssProperties.isKnown("display"), 29 "The `display` property is known."); 30 ok(!cssProperties.isKnown("foobar"), 31 "A fake property is not known."); 32 ok(cssProperties.isKnown("--foobar"), 33 "A CSS variable properly evaluates."); 34 ok(cssProperties.isKnown("--foob\\{ar"), 35 "A CSS variable with escaped character properly evaluates."); 36 ok(cssProperties.isKnown("--fübar"), 37 "A CSS variable unicode properly evaluates."); 38 ok(!cssProperties.isKnown("--foo bar"), 39 "A CSS variable with spaces fails"); 40 41 const marginProps = ["auto", "inherit", "initial", "unset", "revert", "revert-layer"]; 42 if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) { 43 marginProps.push("anchor-size"); 44 } 45 is(toSortedString(cssProperties.getValues("margin")), 46 toSortedString(marginProps), 47 "Can get values for the CSS margin."); 48 is(cssProperties.getValues("foobar").length, 0, 49 "Unknown values return an empty array."); 50 51 const bgColorValues = cssProperties.getValues("background-color"); 52 ok(bgColorValues.includes("blanchedalmond"), 53 "A property with color values includes blanchedalmond."); 54 ok(bgColorValues.includes("papayawhip"), 55 "A property with color values includes papayawhip."); 56 ok(bgColorValues.includes("rgb"), 57 "A property with color values includes non-colors."); 58 59 // Check that the "special" shorthands for white-space are exposed. 60 const whiteSpaceValues = cssProperties.getValues("white-space"); 61 ok(whiteSpaceValues.includes("normal"), 62 "Values for the white-space shorthand include normal."); 63 ok(whiteSpaceValues.includes("pre"), 64 "Values for the white-space shorthand include pre."); 65 ok(whiteSpaceValues.includes("pre-line"), 66 "Values for the white-space shorthand include pre-line."); 67 ok(whiteSpaceValues.includes("pre-wrap"), 68 "Values for the white-space shorthand include pre-wrap."); 69 }; 70 71 addAsyncTest(async function setup() { 72 const url = document.getElementById("cssProperties").href; 73 await runCssPropertiesTests(url); 74 75 runNextTest(); 76 }); 77 78 SimpleTest.waitForExplicitFinish(); 79 runNextTest(); 80 }; 81 </script> 82 </head> 83 <body> 84 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1265798">Mozilla Bug 1265798</a> 85 <a id="cssProperties" target="_blank" href="inspector_css-properties.html">Test Document</a> 86 </body> 87 </html>