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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Variables Allowed Syntax</title>
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
<link href="http://mozilla.com/" rel="author" title="Mozilla Corporation" />
<link href="http://www.w3.org/TR/css-variables-1/#defining-variables" rel="help" />
<meta content='The <value> type used in the syntax above is defined as anything matching the "value" production in CSS 2.1 Chapter 4.1 [CSS21].' name="assert" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id="style"></style>
<script id="metadata_cache">/*
{
"percentage": { "assert": "Value allowed within variable: percentage" },
"number": { "assert": "Value allowed within variable: number" },
"length": { "assert": "Value allowed within variable: length" },
"time": { "assert": "Value allowed within variable: time" },
"function": { "assert": "Value allowed within variable: function" },
"nested_function": { "assert": "Value allowed within variable: nested function" },
"parentheses": { "assert": "Value allowed within variable: parentheses" },
"braces": { "assert": "Value allowed within variable: braces" },
"brackets": { "assert": "Value allowed within variable: brackets" },
"at_keyword_unknown": { "assert": "Value allowed within variable: at-keyword (unknown)" },
"at_keyword_known": { "assert": "Value allowed within variable: at-keyword (known)" },
"at_keyword_unknown_and_block": { "assert": "Value allowed within variable: at-keyword (unknown) and block" },
"at_keyword_known_and_block": { "assert": "Value allowed within variable: at-keyword (known) and block" },
"unbalanced_close_bracket_at_toplevel": { "assert": "Value not allowed within variable: unbalanced close bracket at toplevel" },
"unbalanced_close_paren_at_toplevel": { "assert": "Value not allowed within variable: unbalanced close paren at toplevel" },
"unbalanced_close_bracket_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close bracket in something balanced" },
"unbalanced_close_paren_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close paren in something balanced" },
"unbalanced_close_brace_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close brace in something balanced" },
"CDO_at_top_level": { "assert": "Value allowed within variable: CDO at top level" },
"CDC_at_top_level": { "assert": "Value allowed within variable: CDC at top level" },
"semicolon_not_at_top_level_value_unused": { "assert": "Value allowed within variable: semicolon not at top level (value -> unused)" },
"CDO_not_at_top_level_value_unused": { "assert": "Value allowed within variable: CDO not at top level (value -> unused)" },
"CDC_not_at_top_level_value_unused": { "assert": "Value allowed within variable: CDC not at top level (value -> unused)" }
}
*/</script>
</head>
<body onload="run()">
<div id="log"></div>
<div id="test"></div>
<script>
setup({ "explicit_done": true });
function run() {
// Setup the iframe
var style = document.getElementById("style");
var styleText = document.createTextNode("");
style.appendChild(styleText);
var test_cs = window.getComputedStyle(document.getElementById("test"), "");
var initial_cs = test_cs.backgroundColor;
styleText.data = "#test { background-color: green }";
var green_cs = test_cs.backgroundColor;
styleText.data = "#test { background-color: red }";
var red_cs = test_cs.backgroundColor;
function description_to_name(description) {
return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, "");
}
function assert_allowed_variable_value(value, description) {
test(function() {
styleText.data = "#test { \n" +
" --test: red;\n" +
" --test: " + value + ";\n" +
" background-color: red;\n" +
" background-color: var(--test);\n" +
"}";
assert_not_equals(initial_cs, red_cs);
assert_equals(initial_cs, test_cs.backgroundColor);
},
description_to_name(description),
{ assert: "Value allowed within variable: " + description });
}
function assert_disallowed_balanced_variable_value(value, description) {
test(function() {
styleText.data = "#test { \n" +
" --test: green;\n" +
" --test: " + value + ";\n" +
" background-color: red;\n" +
" background-color: var(--test);\n" +
"}";
assert_not_equals(green_cs, red_cs);
assert_equals(green_cs, test_cs.backgroundColor);
},
description_to_name(description),
{ assert: "Value not allowed within variable: " + description });
}
assert_allowed_variable_value("25%", "percentage");
assert_allowed_variable_value("37", "number");
assert_allowed_variable_value("12em", "length");
assert_allowed_variable_value("75ms", "time");
assert_allowed_variable_value("foo()", "function");
assert_allowed_variable_value("foo(bar())", "nested function");
assert_allowed_variable_value("( )", "parentheses");
assert_allowed_variable_value("{ }", "braces");
assert_allowed_variable_value("[ ]", "brackets");
assert_allowed_variable_value("@foobar", "at-keyword (unknown)");
assert_allowed_variable_value("@media", "at-keyword (known)");
assert_allowed_variable_value("@foobar {}", "at-keyword (unknown) and block");
assert_allowed_variable_value("@media {}", "at-keyword (known) and block");
assert_disallowed_balanced_variable_value("]", "unbalanced close bracket at toplevel");
assert_disallowed_balanced_variable_value(")", "unbalanced close paren at toplevel");
assert_disallowed_balanced_variable_value("(])", "unbalanced close bracket in something balanced");
assert_disallowed_balanced_variable_value("[)]", "unbalanced close paren in something balanced");
assert_disallowed_balanced_variable_value("(})", "unbalanced close brace in something balanced");
assert_allowed_variable_value("<!--", "CDO at top level");
assert_allowed_variable_value("-->", "CDC at top level");
assert_allowed_variable_value("(;)", "semicolon not at top level (value -> unused)");
assert_allowed_variable_value("(<!--)", "CDO not at top level (value -> unused)");
assert_allowed_variable_value("(-->)", "CDC not at top level (value -> unused)");
done();
}
</script>
</body></html>
|
