зеркало из https://github.com/mozilla/gecko-dev.git
82 строки
3.2 KiB
HTML
82 строки
3.2 KiB
HTML
<!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();
|
|
runTest();
|
|
</script>
|