layout/style/test/test_variable_serialization_computed.html@8bccb770b82d
layout/style/test/test_variable_serialization_computed.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <!DOCTYPE html>
2 <title>Test serialization of computed CSS variable values</title>
3 <script src="/MochiKit/MochiKit.js"></script>
4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
5 <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
7 <div>
8 <span></span>
9 </div>
11 <script>
12 // Each entry is an entire declaration followed by the property to check and
13 // its expected computed value.
14 var values = [
15 ["", "--z", "an-inherited-value"],
16 ["--a: ", "--a", " "],
17 ["--a: initial", "--a", ""],
18 ["--z: initial", "--z", ""],
19 ["--a: inherit", "--a", ""],
20 ["--z: inherit", "--z", "an-inherited-value"],
21 ["--a: unset", "--a", ""],
22 ["--z: unset", "--z", "an-inherited-value"],
23 ["--a: 1px", "--a", " 1px"],
24 ["--a: var(--a)", "--a", ""],
25 ["--a: var(--b)", "--a", ""],
26 ["--a: var(--b); --b: 1px", "--a", " 1px"],
27 ["--a: var(--b, 1px)", "--a", " 1px"],
28 ["--a: var(--a, 1px)", "--a", ""],
29 ["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""],
30 ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", " something 3px url(whereever) calc(1em + 1px)"],
31 ["--a: var(--b, var(--c, var(--d, Black)))", "--a", " Black"],
32 ["--a: a var(--b) c; --b:b", "--a", " a b c"],
33 ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", " a b c d e"],
34 ["--a: var(--b)red; --b:orange;", "--a", " orange/**/red"],
35 ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", " orange/**/red"],
36 ["--a: var(--b)var(--c,red); --b:orange;", "--a", " orange/**/red"],
37 ["--a: var(--b,orange)var(--c); --c:red;", "--a", " orange/**/red"],
38 ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],
39 ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", " ('ab')[c]"],
40 ["--a: '", "--a", " ''"],
41 ["--a: '\\", "--a", " ''"],
42 ["--a: \\", "--a", " \\\ufffd"],
43 ["--a: \"", "--a", " \"\""],
44 ["--a: \"\\", "--a", " \"\""],
45 ["--a: /* abc ", "--a", " /* abc */"],
46 ["--a: /* abc *", "--a", " /* abc */"],
47 ["--a: url(http://example.org/", "--a", " url(http://example.org/)"],
48 ["--a: url(http://example.org/\\", "--a", " url(http://example.org/\\\ufffd)"],
49 ["--a: url('http://example.org/", "--a", " url('http://example.org/')"],
50 ["--a: url('http://example.org/\\", "--a", " url('http://example.org/')"],
51 ["--a: url(\"http://example.org/", "--a", " url(\"http://example.org/\")"],
52 ["--a: url(\"http://example.org/\\", "--a", " url(\"http://example.org/\")"]
53 ];
55 function runTest() {
56 var div = document.querySelector("div");
57 var span = document.querySelector("span");
59 div.setAttribute("style", "--z:an-inherited-value");
61 values.forEach(function(entry, i) {
62 var declaration = entry[0];
63 var property = entry[1];
64 var expected = entry[2];
65 span.setAttribute("style", declaration);
66 var cs = getComputedStyle(span, "");
67 is(cs.getPropertyValue(property), expected, "subtest #" + i);
68 });
70 SimpleTest.finish();
71 }
73 SimpleTest.waitForExplicitFinish();
74 SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] },
75 runTest);
76 </script>
