1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_variable_serialization_computed.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,76 @@
1.4 +<!DOCTYPE html>
1.5 +<title>Test serialization of computed CSS variable values</title>
1.6 +<script src="/MochiKit/MochiKit.js"></script>
1.7 +<script src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 +<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
1.9 +
1.10 +<div>
1.11 + <span></span>
1.12 +</div>
1.13 +
1.14 +<script>
1.15 +// Each entry is an entire declaration followed by the property to check and
1.16 +// its expected computed value.
1.17 +var values = [
1.18 + ["", "--z", "an-inherited-value"],
1.19 + ["--a: ", "--a", " "],
1.20 + ["--a: initial", "--a", ""],
1.21 + ["--z: initial", "--z", ""],
1.22 + ["--a: inherit", "--a", ""],
1.23 + ["--z: inherit", "--z", "an-inherited-value"],
1.24 + ["--a: unset", "--a", ""],
1.25 + ["--z: unset", "--z", "an-inherited-value"],
1.26 + ["--a: 1px", "--a", " 1px"],
1.27 + ["--a: var(--a)", "--a", ""],
1.28 + ["--a: var(--b)", "--a", ""],
1.29 + ["--a: var(--b); --b: 1px", "--a", " 1px"],
1.30 + ["--a: var(--b, 1px)", "--a", " 1px"],
1.31 + ["--a: var(--a, 1px)", "--a", ""],
1.32 + ["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""],
1.33 + ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", " something 3px url(whereever) calc(1em + 1px)"],
1.34 + ["--a: var(--b, var(--c, var(--d, Black)))", "--a", " Black"],
1.35 + ["--a: a var(--b) c; --b:b", "--a", " a b c"],
1.36 + ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", " a b c d e"],
1.37 + ["--a: var(--b)red; --b:orange;", "--a", " orange/**/red"],
1.38 + ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", " orange/**/red"],
1.39 + ["--a: var(--b)var(--c,red); --b:orange;", "--a", " orange/**/red"],
1.40 + ["--a: var(--b,orange)var(--c); --c:red;", "--a", " orange/**/red"],
1.41 + ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],
1.42 + ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", " ('ab')[c]"],
1.43 + ["--a: '", "--a", " ''"],
1.44 + ["--a: '\\", "--a", " ''"],
1.45 + ["--a: \\", "--a", " \\\ufffd"],
1.46 + ["--a: \"", "--a", " \"\""],
1.47 + ["--a: \"\\", "--a", " \"\""],
1.48 + ["--a: /* abc ", "--a", " /* abc */"],
1.49 + ["--a: /* abc *", "--a", " /* abc */"],
1.50 + ["--a: url(http://example.org/", "--a", " url(http://example.org/)"],
1.51 + ["--a: url(http://example.org/\\", "--a", " url(http://example.org/\\\ufffd)"],
1.52 + ["--a: url('http://example.org/", "--a", " url('http://example.org/')"],
1.53 + ["--a: url('http://example.org/\\", "--a", " url('http://example.org/')"],
1.54 + ["--a: url(\"http://example.org/", "--a", " url(\"http://example.org/\")"],
1.55 + ["--a: url(\"http://example.org/\\", "--a", " url(\"http://example.org/\")"]
1.56 +];
1.57 +
1.58 +function runTest() {
1.59 + var div = document.querySelector("div");
1.60 + var span = document.querySelector("span");
1.61 +
1.62 + div.setAttribute("style", "--z:an-inherited-value");
1.63 +
1.64 + values.forEach(function(entry, i) {
1.65 + var declaration = entry[0];
1.66 + var property = entry[1];
1.67 + var expected = entry[2];
1.68 + span.setAttribute("style", declaration);
1.69 + var cs = getComputedStyle(span, "");
1.70 + is(cs.getPropertyValue(property), expected, "subtest #" + i);
1.71 + });
1.72 +
1.73 + SimpleTest.finish();
1.74 +}
1.75 +
1.76 +SimpleTest.waitForExplicitFinish();
1.77 +SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] },
1.78 + runTest);
1.79 +</script>
