layout/style/test/test_variable_serialization_specified.html@7e26c7da4463 (annotated)
layout/style/test/test_variable_serialization_specified.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
| michael@0 | 1 | <!DOCTYPE html> |
| michael@0 | 2 | <title>Test serialization of specified 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 | <style id=style1>#test { }</style> |
| michael@0 | 8 | <style id=style2></style> |
| michael@0 | 9 | |
| michael@0 | 10 | <script> |
| michael@0 | 11 | // Values that should be serialized back to the same string. |
| michael@0 | 12 | var values_with_unchanged_specified_value_serialization = [ |
| michael@0 | 13 | "var(--a)", |
| michael@0 | 14 | "var(--a)", |
| michael@0 | 15 | "var(--a) ", |
| michael@0 | 16 | "var( --a ) ", |
| michael@0 | 17 | "var(--a, )", |
| michael@0 | 18 | "var(--a,/**/a)", |
| michael@0 | 19 | "1px var(--a)", |
| michael@0 | 20 | "var(--a) 1px", |
| michael@0 | 21 | "something 3px url(whereever) calc(var(--a) + 1px)", |
| michael@0 | 22 | "var(--a)", |
| michael@0 | 23 | "var(--a)var(--b)", |
| michael@0 | 24 | "var(--a, var(--b, var(--c, black)))", |
| michael@0 | 25 | "var(--a) <!--", |
| michael@0 | 26 | "--> var(--a)", |
| michael@0 | 27 | "{ [ var(--a) ] }", |
| michael@0 | 28 | "[;] var(--a)", |
| michael@0 | 29 | "var(--a,(;))", |
| michael@0 | 30 | "VAR(--a)", |
| michael@0 | 31 | "var(--0)", |
| michael@0 | 32 | "var(--\\30)", |
| michael@0 | 33 | "var(--\\d800)", |
| michael@0 | 34 | "var(--\\ffffff)", |
| michael@0 | 35 | ]; |
| michael@0 | 36 | |
| michael@0 | 37 | // Values that serialize differently, due to additional implied closing |
| michael@0 | 38 | // characters at EOF. |
| michael@0 | 39 | var values_with_changed_specified_value_serialization = [ |
| michael@0 | 40 | ["var(--a", "var(--a)"], |
| michael@0 | 41 | ["var(--a , ", "var(--a , )"], |
| michael@0 | 42 | ["var(--a, ", "var(--a, )"], |
| michael@0 | 43 | ["var(--a, var(--b", "var(--a, var(--b))"], |
| michael@0 | 44 | ["var(--a /* unclosed comment", "var(--a /* unclosed comment*/)"], |
| michael@0 | 45 | ["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"], |
| michael@0 | 46 | ["[{(((var(--a", "[{(((var(--a))))}]"], |
| michael@0 | 47 | ["var(--a, \"unclosed string", "var(--a, \"unclosed string\")"], |
| michael@0 | 48 | ["var(--a, 'unclosed string", "var(--a, 'unclosed string')"], |
| michael@0 | 49 | ["var(--a) \"unclosed string\\", "var(--a) \"unclosed string\""], |
| michael@0 | 50 | ["var(--a) 'unclosed string\\", "var(--a) 'unclosed string'"], |
| michael@0 | 51 | ["var(--a) \\", "var(--a) \\\ufffd"], |
| michael@0 | 52 | ["var(--a) url(unclosedurl", "var(--a) url(unclosedurl)"], |
| michael@0 | 53 | ["var(--a) url('unclosedurl", "var(--a) url('unclosedurl')"], |
| michael@0 | 54 | ["var(--a) url(\"unclosedurl", "var(--a) url(\"unclosedurl\")"], |
| michael@0 | 55 | ["var(--a) url(unclosedurl\\", "var(--a) url(unclosedurl\\\ufffd)"], |
| michael@0 | 56 | ["var(--a) url('unclosedurl\\", "var(--a) url('unclosedurl')"], |
| michael@0 | 57 | ["var(--a) url(\"unclosedurl\\", "var(--a) url(\"unclosedurl\")"], |
| michael@0 | 58 | ]; |
| michael@0 | 59 | |
| michael@0 | 60 | var style1 = document.getElementById("style1"); |
| michael@0 | 61 | var style2 = document.getElementById("style2"); |
| michael@0 | 62 | |
| michael@0 | 63 | var decl = style1.sheet.cssRules[0].style; |
| michael@0 | 64 | |
| michael@0 | 65 | function test_specified_value_serialization(value, expected) { |
| michael@0 | 66 | // Test setting value on a custom property with setProperty. |
| michael@0 | 67 | decl.setProperty("--test", value, ""); |
| michael@0 | 68 | is(decl.getPropertyValue("--test"), expected, |
| michael@0 | 69 | "value with identical serialization set on custom property with setProperty"); |
| michael@0 | 70 | |
| michael@0 | 71 | // Test setting value on a custom property via style sheet parsing. |
| michael@0 | 72 | style2.textContent = "#test { --test:" + value; |
| michael@0 | 73 | is(style2.sheet.cssRules[0].style.getPropertyValue("--test"), expected, |
| michael@0 | 74 | "value with identical serialization set on custom property via parsing"); |
| michael@0 | 75 | |
| michael@0 | 76 | // Test setting value on a non-custom longhand property with setProperty. |
| michael@0 | 77 | decl.setProperty("color", value, ""); |
| michael@0 | 78 | is(decl.getPropertyValue("color"), expected, |
| michael@0 | 79 | "value with identical serialization set on non-custom longhand property with setProperty"); |
| michael@0 | 80 | |
| michael@0 | 81 | // Test setting value on a non-custom longhand property via style sheet parsing. |
| michael@0 | 82 | style2.textContent = "#test { color:" + value; |
| michael@0 | 83 | is(style2.sheet.cssRules[0].style.getPropertyValue("color"), expected, |
| michael@0 | 84 | "value with identical serialization set on non-custom longhand property via parsing"); |
| michael@0 | 85 | |
| michael@0 | 86 | // Test setting value on a non-custom shorthand property with setProperty. |
| michael@0 | 87 | decl.setProperty("margin", value, ""); |
| michael@0 | 88 | is(decl.getPropertyValue("margin"), expected, |
| michael@0 | 89 | "value with identical serialization set on non-custom shorthand property with setProperty"); |
| michael@0 | 90 | |
| michael@0 | 91 | // Test setting value on a non-custom shorthand property via style sheet parsing. |
| michael@0 | 92 | style2.textContent = "#test { margin:" + value; |
| michael@0 | 93 | is(style2.sheet.cssRules[0].style.getPropertyValue("margin"), expected, |
| michael@0 | 94 | "value with identical serialization set on non-custom shorthand property via parsing"); |
| michael@0 | 95 | |
| michael@0 | 96 | // Clean up. |
| michael@0 | 97 | decl.removeProperty("--test"); |
| michael@0 | 98 | decl.removeProperty("color"); |
| michael@0 | 99 | decl.removeProperty("margin"); |
| michael@0 | 100 | } |
| michael@0 | 101 | |
| michael@0 | 102 | function runTest() { |
| michael@0 | 103 | values_with_unchanged_specified_value_serialization.forEach(function(value) { |
| michael@0 | 104 | test_specified_value_serialization(value, value); |
| michael@0 | 105 | }); |
| michael@0 | 106 | |
| michael@0 | 107 | values_with_changed_specified_value_serialization.forEach(function(pair) { |
| michael@0 | 108 | test_specified_value_serialization(pair[0], pair[1]); |
| michael@0 | 109 | }); |
| michael@0 | 110 | |
| michael@0 | 111 | SimpleTest.finish(); |
| michael@0 | 112 | } |
| michael@0 | 113 | |
| michael@0 | 114 | SimpleTest.waitForExplicitFinish(); |
| michael@0 | 115 | SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] }, |
| michael@0 | 116 | runTest); |
| michael@0 | 117 | </script> |
