The Tor Browser / file comparison
comparison: layout/style/test/test_variable_serialization_computed.html
layout/style/test/test_variable_serialization_computed.html
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a0f967afcc9b |
|---|---|
| 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"> | |
| 6 | |
| 7 <div> | |
| 8 <span></span> | |
| 9 </div> | |
| 10 | |
| 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 ]; | |
| 54 | |
| 55 function runTest() { | |
| 56 var div = document.querySelector("div"); | |
| 57 var span = document.querySelector("span"); | |
| 58 | |
| 59 div.setAttribute("style", "--z:an-inherited-value"); | |
| 60 | |
| 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 }); | |
| 69 | |
| 70 SimpleTest.finish(); | |
| 71 } | |
| 72 | |
| 73 SimpleTest.waitForExplicitFinish(); | |
| 74 SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] }, | |
| 75 runTest); | |
| 76 </script> |
