mirror of
https://github.com/servo/servo.git
synced 2025-08-11 00:15:32 +01:00
Initial support for custom properties in CSSStyleDeclaration
This commit is contained in:
Simon Sapin
parent
d56ea10770
commit
feaf6f4c3f
9 changed files with 471 additions and 27 deletions
|
|
@ -287,6 +287,18 @@
|
|||
"url": "/_mozilla/css/test_variable_legal_values.html"
|
||||
}
|
||||
],
|
||||
"css/test_variable_serialization_computed.html": [
|
||||
{
|
||||
"path": "css/test_variable_serialization_computed.html",
|
||||
"url": "/_mozilla/css/test_variable_serialization_computed.html"
|
||||
}
|
||||
],
|
||||
"css/test_variable_serialization_specified.html": [
|
||||
{
|
||||
"path": "css/test_variable_serialization_specified.html",
|
||||
"url": "/_mozilla/css/test_variable_serialization_specified.html"
|
||||
}
|
||||
],
|
||||
"mozilla/DOMParser.html": [
|
||||
{
|
||||
"path": "mozilla/DOMParser.html",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
[test_variable_serialization_computed.html]
|
||||
type: testharness
|
||||
[subtest #20 with `--a: var(--b)var(--c); --b:orange; --c:red;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #21 with `--a: var(--b)var(--c,red); --b:orange;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #22 with `--a: var(--b,orange)var(--c); --c:red;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #23 with `counter-reset: var(--a)red; --a:orange;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #24 with `--a: var(--b)var(--c); --c:[c\]; --b:('ab`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #25 with `--a: '`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #26 with `--a: '\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #27 with `--a: \\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #28 with `--a: "`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #29 with `--a: "\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #30 with `--a: /* abc `]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #31 with `--a: /* abc *`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #32 with `--a: url(http://example.org/`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #33 with `--a: url(http://example.org/\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #34 with `--a: url('http://example.org/`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #35 with `--a: url('http://example.org/\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #36 with `--a: url("http://example.org/`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #37 with `--a: url("http://example.org/\\`]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
[test_variable_serialization_specified.html]
|
||||
type: testharness
|
||||
[`var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) ` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var( --a ) ` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, )` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a,/**/a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`1px var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) 1px` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`something 3px url(whereever) calc(var(--a) + 1px)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a)var(--b)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, var(--b, var(--c, black)))` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) <!--` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`--> var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`{ [ var(--a) \] }` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`[;\] var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a,(;))` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`VAR(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--0)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--\\30)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--\\d800)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--\\ffffff)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a` becomes `var(--a)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a , ` becomes `var(--a , )` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, ` becomes `var(--a, )` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, var(--b` becomes `var(--a, var(--b))` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a /* unclosed comment` becomes `var(--a /* unclosed comment*/)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a /* unclosed comment *` becomes `var(--a /* unclosed comment */)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`[{(((var(--a` becomes `[{(((var(--a))))}\]` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, "unclosed string` becomes `var(--a, "unclosed string")` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, 'unclosed string` becomes `var(--a, 'unclosed string')` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) "unclosed string\\` becomes `var(--a) "unclosed string"` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) 'unclosed string\\` becomes `var(--a) 'unclosed string'` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) \\` becomes `var(--a) \\<5C>` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url(unclosedurl` becomes `var(--a) url(unclosedurl)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url('unclosedurl` becomes `var(--a) url('unclosedurl')` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url("unclosedurl` becomes `var(--a) url("unclosedurl")` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url(unclosedurl\\` becomes `var(--a) url(unclosedurl\\<5C>)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url('unclosedurl\\` becomes `var(--a) url('unclosedurl')` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url("unclosedurl\\` becomes `var(--a) url("unclosedurl")` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Test serialization of computed CSS variable values</title>
|
||||
<!--
|
||||
|
||||
Adapted from https://dxr.mozilla.org/mozilla-central/source/layout/style/test/test_variable_serialization_computed.html
|
||||
|
||||
NOTE: CSS does not define the exact serialization of whitespace and comments
|
||||
(see https://drafts.csswg.org/css-syntax/#serialization)
|
||||
so an implementation could fail this test but still be conforming.
|
||||
|
||||
-->
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<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"],
|
||||
["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/\")"]
|
||||
];
|
||||
|
||||
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];
|
||||
test(function() {
|
||||
span.setAttribute("style", declaration);
|
||||
var cs = getComputedStyle(span, "");
|
||||
assert_equals(cs.getPropertyValue(property), expected);
|
||||
}, "subtest #" + i + " with `" + declaration + "`");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Test serialization of specified CSS variable values</title>
|
||||
<!--
|
||||
|
||||
Adapted from https://dxr.mozilla.org/mozilla-central/source/layout/style/test/test_variable_serialization_specified.html
|
||||
|
||||
NOTE: CSS does not define the exact serialization of whitespace and comments
|
||||
(see https://drafts.csswg.org/css-syntax/#serialization)
|
||||
so an implementation could fail this test but still be conforming.
|
||||
|
||||
-->
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id=div1></div>
|
||||
|
||||
<script>
|
||||
// Values that should be serialized back to the same string.
|
||||
var values_with_unchanged_specified_value_serialization = [
|
||||
"var(--a)",
|
||||
"var(--a)",
|
||||
"var(--a) ",
|
||||
"var( --a ) ",
|
||||
"var(--a, )",
|
||||
"var(--a,/**/a)",
|
||||
"1px var(--a)",
|
||||
"var(--a) 1px",
|
||||
"something 3px url(whereever) calc(var(--a) + 1px)",
|
||||
"var(--a)",
|
||||
"var(--a)var(--b)",
|
||||
"var(--a, var(--b, var(--c, black)))",
|
||||
"var(--a) <!--",
|
||||
"--> var(--a)",
|
||||
"{ [ var(--a) ] }",
|
||||
"[;] var(--a)",
|
||||
"var(--a,(;))",
|
||||
"VAR(--a)",
|
||||
"var(--0)",
|
||||
"var(--\\30)",
|
||||
"var(--\\d800)",
|
||||
"var(--\\ffffff)",
|
||||
];
|
||||
|
||||
// Values that serialize differently, due to additional implied closing
|
||||
// characters at EOF.
|
||||
var values_with_changed_specified_value_serialization = [
|
||||
["var(--a", "var(--a)"],
|
||||
["var(--a , ", "var(--a , )"],
|
||||
["var(--a, ", "var(--a, )"],
|
||||
["var(--a, var(--b", "var(--a, var(--b))"],
|
||||
["var(--a /* unclosed comment", "var(--a /* unclosed comment*/)"],
|
||||
["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"],
|
||||
["[{(((var(--a", "[{(((var(--a))))}]"],
|
||||
["var(--a, \"unclosed string", "var(--a, \"unclosed string\")"],
|
||||
["var(--a, 'unclosed string", "var(--a, 'unclosed string')"],
|
||||
["var(--a) \"unclosed string\\", "var(--a) \"unclosed string\""],
|
||||
["var(--a) 'unclosed string\\", "var(--a) 'unclosed string'"],
|
||||
["var(--a) \\", "var(--a) \\\ufffd"],
|
||||
["var(--a) url(unclosedurl", "var(--a) url(unclosedurl)"],
|
||||
["var(--a) url('unclosedurl", "var(--a) url('unclosedurl')"],
|
||||
["var(--a) url(\"unclosedurl", "var(--a) url(\"unclosedurl\")"],
|
||||
["var(--a) url(unclosedurl\\", "var(--a) url(unclosedurl\\\ufffd)"],
|
||||
["var(--a) url('unclosedurl\\", "var(--a) url('unclosedurl')"],
|
||||
["var(--a) url(\"unclosedurl\\", "var(--a) url(\"unclosedurl\")"],
|
||||
];
|
||||
|
||||
var div1 = document.getElementById("div1");
|
||||
|
||||
function test_specified_value_serialization(value, expected) {
|
||||
// Test setting value on a custom property with setProperty.
|
||||
div1.style.setProperty("--test", value, "");
|
||||
assert_equals(div1.style.getPropertyValue("--test"), expected,
|
||||
"value with identical serialization set on custom property with setProperty");
|
||||
|
||||
// Test setting value on a custom property via style sheet parsing.
|
||||
div1.setAttribute("style", "--test:" + value);
|
||||
assert_equals(div1.style.getPropertyValue("--test"), expected,
|
||||
"value with identical serialization set on custom property via parsing");
|
||||
|
||||
// Test setting value on a non-custom longhand property with setProperty.
|
||||
div1.style.setProperty("color", value, "");
|
||||
assert_equals(div1.style.getPropertyValue("color"), expected,
|
||||
"value with identical serialization set on non-custom longhand property with setProperty");
|
||||
|
||||
// Test setting value on a non-custom longhand property via style sheet parsing.
|
||||
div1.setAttribute("style", "color:" + value);
|
||||
assert_equals(div1.style.getPropertyValue("color"), expected,
|
||||
"value with identical serialization set on non-custom longhand property via parsing");
|
||||
|
||||
// Test setting value on a non-custom shorthand property with setProperty.
|
||||
div1.style.setProperty("margin", value, "");
|
||||
assert_equals(div1.style.getPropertyValue("margin"), expected,
|
||||
"value with identical serialization set on non-custom shorthand property with setProperty");
|
||||
|
||||
// Test setting value on a non-custom shorthand property via style sheet parsing.
|
||||
div1.setAttribute("style", "margin:" + value);
|
||||
assert_equals(div1.style.getPropertyValue("margin"), expected,
|
||||
"value with identical serialization set on non-custom shorthand property via parsing");
|
||||
|
||||
// Clean up.
|
||||
div1.style.removeProperty("--test");
|
||||
div1.style.removeProperty("color");
|
||||
div1.style.removeProperty("margin");
|
||||
}
|
||||
|
||||
/*
|
||||
function test(f) { f() }
|
||||
function assert_equals(a, b, m) { if (a == b) { console.log("`"+a+"`", "`"+b+"`", m) } }
|
||||
*/
|
||||
|
||||
values_with_unchanged_specified_value_serialization.forEach(function(value) {
|
||||
test(function() { test_specified_value_serialization(value, value) },
|
||||
"`" + value + "` is unchanged by specified value serialization");
|
||||
});
|
||||
|
||||
values_with_changed_specified_value_serialization.forEach(function(pair) {
|
||||
test(function() { test_specified_value_serialization(pair[0], pair[1]) },
|
||||
"`" + pair[0] + "` becomes `" + pair[1] + "` in specified value serialization");
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue