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