test_valueMatchesSyntax.html (1487B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test InspectorUtils.valueMatchesSyntax</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 7 </head> 8 <body> 9 <code>InspectorUtils.valueMatchesSyntax</code> 10 11 <script> 12 add_task(async function() { 13 const test = (value, syntax, expected) => 14 is( 15 SpecialPowers.InspectorUtils.valueMatchesSyntax(document, value, syntax), 16 expected, 17 `"${value}" ${expected ? "matches" : "does not match"} "${syntax}"` 18 ); 19 20 test("red", "<color>", true); 21 test("10px", "<color>", false); 22 test("10px", "<color> | <length>", true); 23 test("10px 1em", "<length>+", true); 24 test("10px, 1em", "<length>+", false); 25 test("10px, 1em", "<length>#", true); 26 test("10px 1em", "<length>#", false); 27 test("calc(100% - 20px)", "<length>", false); 28 test("calc(100% - 20px)", "<length-percentage>", true); 29 test("big", "big | bigger | BIGGER", true); 30 test("bigger", "big | bigger | BIGGER", true); 31 test("BIGGER", "big | bigger | BIGGER", true); 32 test("BIG", "big | bigger | BIGGER", false); 33 test("red", "<invalid-syntax>", false); 34 test("whatever 10px, 1em red", "*", true); 35 36 info("CSS-wide keyword are considered to be matching the syntax"); 37 test("initial", "<color>", true); 38 test("inherit", "<color>", true); 39 test("unset", "<color>", true); 40 test("revert", "<color>", true); 41 test("revert-layer", "<color>", true); 42 }); 43 </script> 44 </body> 45 </html>