layout/style/test/test_variable_serialization_specified.html

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