<!DOCTYPE html> <title>Test serialization of computed CSS variable values</title> <script src="/MochiKit/MochiKit.js"></script> <script src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css"> <div> <span></span> </div> <script> // Each entry is an entire declaration followed by the property to check and // its expected computed value. var values = [ ["", "--z", "an-inherited-value"], ["--a: ", "--a", " "], ["--a: initial", "--a", ""], ["--z: initial", "--z", ""], ["--a: inherit", "--a", ""], ["--z: inherit", "--z", "an-inherited-value"], ["--a: unset", "--a", ""], ["--z: unset", "--z", "an-inherited-value"], ["--a: 1px", "--a", " 1px"], ["--a: var(--a)", "--a", ""], ["--a: var(--b)", "--a", ""], ["--a: var(--b); --b: 1px", "--a", " 1px"], ["--a: var(--b, 1px)", "--a", " 1px"], ["--a: var(--a, 1px)", "--a", ""], ["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""], ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", " something 3px url(whereever) calc(1em + 1px)"], ["--a: var(--b, var(--c, var(--d, Black)))", "--a", " Black"], ["--a: a var(--b) c; --b:b", "--a", " a b c"], ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", " a b c d e"], ["--a: var(--b)red; --b:orange;", "--a", " orange/**/red"], ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", " orange/**/red"], ["--a: var(--b)var(--c,red); --b:orange;", "--a", " orange/**/red"], ["--a: var(--b,orange)var(--c); --c:red;", "--a", " orange/**/red"], ["--a: var(--b)-; --b:-;", "--a", " -/**/-"], ["--a: var(--b)--; --b:-;", "--a", " -/**/--"], ["--a: var(--b)--x; --b:-;", "--a", " -/**/--x"], ["--a: var(--b)var(--c); --b:-; --c:-;", "--a", " -/**/-"], ["--a: var(--b)var(--c); --b:--; --c:-;", "--a", " --/**/-"], ["--a: var(--b)var(--c); --b:--x; --c:-;", "--a", " --x/**/-"], ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"], ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", " ('ab')[c]"], ["--a: '", "--a", " ''"], ["--a: '\\", "--a", " ''"], ["--a: \\", "--a", " \\\ufffd"], ["--a: \"", "--a", " \"\""], ["--a: \"\\", "--a", " \"\""], ["--a: /* abc ", "--a", " /* abc */"], ["--a: /* abc *", "--a", " /* abc */"], ["--a: url(http://example.org/", "--a", " url(http://example.org/)"], ["--a: url(http://example.org/\\", "--a", " url(http://example.org/\\\ufffd)"], ["--a: url('http://example.org/", "--a", " url('http://example.org/')"], ["--a: url('http://example.org/\\", "--a", " url('http://example.org/')"], ["--a: url(\"http://example.org/", "--a", " url(\"http://example.org/\")"], ["--a: url(\"http://example.org/\\", "--a", " url(\"http://example.org/\")"] ]; function runTest() { var div = document.querySelector("div"); var span = document.querySelector("span"); div.setAttribute("style", "--z:an-inherited-value"); values.forEach(function(entry, i) { var declaration = entry[0]; var property = entry[1]; var expected = entry[2]; span.setAttribute("style", declaration); var cs = getComputedStyle(span, ""); is(cs.getPropertyValue(property), expected, "subtest #" + i); }); SimpleTest.finish(); } SimpleTest.waitForExplicitFinish(); SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] }, runTest); </script>