summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_variable_serialization_specified.html
blob: 62321eaaffb437cf91a91a68aabb4ef133be0bf7 (plain)
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
<!DOCTYPE html>
<title>Test serialization of specified CSS variable values</title>
<script src="/MochiKit/MochiKit.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">

<style id=style1>#test { }</style>
<style id=style2></style>

<script>
// Values that should be serialized back to the same string.
var values_with_unchanged_specified_value_serialization = [
  "var(--a)",
  "var(--a)",
  "var(--a) ",
  "var( --a ) ",
  "var(--a, )",
  "var(--a,/**/a)",
  "1px var(--a)",
  "var(--a) 1px",
  "something 3px url(whereever) calc(var(--a) + 1px)",
  "var(--a)",
  "var(--a)var(--b)",
  "var(--a, var(--b, var(--c, black)))",
  "var(--a) <!--",
  "--> var(--a)",
  "{ [ var(--a) ] }",
  "[;] var(--a)",
  "var(--a,(;))",
  "VAR(--a)",
  "var(--0)",
  "var(--\\30)",
  "var(--\\d800)",
  "var(--\\ffffff)",
];

// Values that serialize differently, due to additional implied closing
// characters at EOF.
var values_with_changed_specified_value_serialization = [
  ["var(--a",                       "var(--a)"],
  ["var(--a , ",                    "var(--a , )"],
  ["var(--a, ",                     "var(--a, )"],
  ["var(--a, var(--b",              "var(--a, var(--b))"],
  ["var(--a /* unclosed comment",   "var(--a /* unclosed comment*/)"],
  ["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"],
  ["[{(((var(--a",                  "[{(((var(--a))))}]"],
  ["var(--a, \"unclosed string",    "var(--a, \"unclosed string\")"],
  ["var(--a, 'unclosed string",     "var(--a, 'unclosed string')"],
  ["var(--a) \"unclosed string\\",  "var(--a) \"unclosed string\""],
  ["var(--a) 'unclosed string\\",   "var(--a) 'unclosed string'"],
  ["var(--a) \\",                   "var(--a) \\\ufffd"],
  ["var(--a) url(unclosedurl",      "var(--a) url(unclosedurl)"],
  ["var(--a) url('unclosedurl",     "var(--a) url('unclosedurl')"],
  ["var(--a) url(\"unclosedurl",    "var(--a) url(\"unclosedurl\")"],
  ["var(--a) url(unclosedurl\\",    "var(--a) url(unclosedurl\\\ufffd)"],
  ["var(--a) url('unclosedurl\\",   "var(--a) url('unclosedurl')"],
  ["var(--a) url(\"unclosedurl\\",  "var(--a) url(\"unclosedurl\")"],
];

var style1 = document.getElementById("style1");
var style2 = document.getElementById("style2");

var decl = style1.sheet.cssRules[0].style;

function test_specified_value_serialization(value, expected) {
  // Test setting value on a custom property with setProperty.
  decl.setProperty("--test", value, "");
  is(decl.getPropertyValue("--test"), expected,
     "value with identical serialization set on custom property with setProperty");

  // Test setting value on a custom property via style sheet parsing.
  style2.textContent = "#test { --test:" + value;
  is(style2.sheet.cssRules[0].style.getPropertyValue("--test"), expected,
     "value with identical serialization set on custom property via parsing");

  // Test setting value on a non-custom longhand property with setProperty.
  decl.setProperty("color", value, "");
  is(decl.getPropertyValue("color"), expected,
     "value with identical serialization set on non-custom longhand property with setProperty");

  // Test setting value on a non-custom longhand property via style sheet parsing.
  style2.textContent = "#test { color:" + value;
  is(style2.sheet.cssRules[0].style.getPropertyValue("color"), expected,
     "value with identical serialization set on non-custom longhand property via parsing");

  // Test setting value on a non-custom shorthand property with setProperty.
  decl.setProperty("margin", value, "");
  is(decl.getPropertyValue("margin"), expected,
     "value with identical serialization set on non-custom shorthand property with setProperty");

  // Test setting value on a non-custom shorthand property via style sheet parsing.
  style2.textContent = "#test { margin:" + value;
  is(style2.sheet.cssRules[0].style.getPropertyValue("margin"), expected,
     "value with identical serialization set on non-custom shorthand property via parsing");

  // Clean up.
  decl.removeProperty("--test");
  decl.removeProperty("color");
  decl.removeProperty("margin");
}

function runTest() {
  values_with_unchanged_specified_value_serialization.forEach(function(value) {
    test_specified_value_serialization(value, value);
  });

  values_with_changed_specified_value_serialization.forEach(function(pair) {
    test_specified_value_serialization(pair[0], pair[1]);
  });

  SimpleTest.finish();
}

SimpleTest.waitForExplicitFinish();
SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] },
                          runTest);
</script>