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
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
<title>Test env() syntax</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div { background-color: rgb(0, 128, 0); }
</style>
</head>
<body>
<script>
// This value is expected if the syntax is valid.
const envWorkingValue = "rgba(0, 0, 0, 0)";
// This value is expected if the syntax is invalid.
const pageDefaultValue = "rgb(0, 128, 0)";
// This value is used to test fallback values.
const blueValue = "rgb(0, 0, 255)";
const testCases = [
{ style: "", expectedPropertyValue: pageDefaultValue },
{ style: "background-color: env(test)", expectedPropertyValue: envWorkingValue },
{ style: "background-color: ENV(test)", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(test) !important", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(test, 10px)", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(test, blue)", expectedPropertyValue: blueValue },
{ style: "background-color: env(test, env(another))", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(test, env(another, blue))", expectedPropertyValue: blueValue },
{ style: "background-color: env(-test)", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(--test)", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(10px)", expectedPropertyValue: pageDefaultValue },
{ style: "background-color: env(env(test))", expectedPropertyValue: pageDefaultValue },
{ style: "background-color: env( test)", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(test )", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env( test )", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(test /**/, blue)", expectedPropertyValue: blueValue },
{ style: "background-color: env(test, {})", expectedPropertyValue: envWorkingValue },
{ style: "background-color: env(test, {)", expectedPropertyValue: pageDefaultValue },
];
testCases.forEach((testcase) => {
test(() => {
const elem = document.createElement("div");
const style = window.getComputedStyle(elem);
document.body.appendChild(elem);
elem.style.cssText = testcase.style;
assert_equals(style.getPropertyValue("background-color"), testcase.expectedPropertyValue);
}, testcase.style + " " + testcase.expectedPropertyValue);
});
</script>
</body>
</html>
|
