layout/style/test/test_variable_serialization_computed.html

   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   ["--a: var(--b)-; --b:-;", "--a", "-/**/-"],
  39   ["--a: var(--b)--; --b:-;", "--a", "-/**/--"],
  40   ["--a: var(--b)--x; --b:-;", "--a", "-/**/--x"],
  41   ["--a: var(--b)var(--c); --b:-; --c:-;", "--a", "-/**/-"],
  42   ["--a: var(--b)var(--c); --b:--; --c:-;", "--a", "--/**/-"],
  43   ["--a: var(--b)var(--c); --b:--x; --c:-;", "--a", "--x/**/-"],
  44   ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],
  45   ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", "('ab')[c]"],
  46   ["--a: '", "--a", "''"],
  47   ["--a: '\\", "--a", "''"],
  48   ["--a: \\", "--a", "\\\ufffd"],
  49   ["--a: \"", "--a", "\"\""],
  50   ["--a: \"\\", "--a", "\"\""],
  51   ["--a: url(http://example.org/", "--a", "url(http://example.org/)"],
  52   ["--a: url(http://example.org/\\", "--a", "url(http://example.org/\\\ufffd)"],
  53   ["--a: url('http://example.org/", "--a", "url('http://example.org/')"],
  54   ["--a: url('http://example.org/\\", "--a", "url('http://example.org/')"],
  55   ["--a: url(\"http://example.org/", "--a", "url(\"http://example.org/\")"],
  56   ["--a: url(\"http://example.org/\\", "--a", "url(\"http://example.org/\")"]
  57 ];
  58
  59 function runTest() {
  60   var div = document.querySelector("div");
  61   var span = document.querySelector("span");
  62
  63   div.setAttribute("style", "--z:an-inherited-value");
  64
  65   values.forEach(function(entry, i) {
  66     var declaration = entry[0];
  67     var property = entry[1];
  68     var expected = entry[2];
  69     span.setAttribute("style", declaration);
  70     var cs = getComputedStyle(span, "");
  71     is(cs.getPropertyValue(property), expected, "subtest #" + i);
  72   });
  73
  74   SimpleTest.finish();
  75 }
  76
  77 SimpleTest.waitForExplicitFinish();
  78 runTest();
  79 </script>