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