1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE type>
<title>CSS variables order tests</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">
<style id="test">
</style>
<div id="t4"></div>
<script>
/*
* Although the spec does not enforce any specific order, Gecko and Servo
* implement a consistent ordering for CSSDeclaration objects in the DOM.
* CSSDeclarations expose property names as indexed properties, which need
* to be stable. This order is the order that properties are cascaded in.
*
* We have this test just to prevent regressions, rather than testing specific
* mandated behavior.
*/
function prepareTest() {
var e = document.createElement("link");
e.addEventListener("load", runTest);
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", "support/external-variable-url.css");
document.head.appendChild(e);
}
function runTest() {
var test = document.getElementById("test");
test.textContent = "div { --SomeVariableName: a; }";
var declaration = test.sheet.cssRules[0].style;
is(declaration.item(0), "--SomeVariableName", "custom property name returned by item() on style declaration");
is(declaration[0], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
var element = document.getElementById("t4");
var cs = window.getComputedStyle(element);
["--SomeVariableName", "--a"].forEach((varName, index) => {
is(cs.item(cs.length - (index + 1)), varName, "custom property name returned by item() on computed style");
is(cs[cs.length - (index + 1)], varName, "custom property name returned by indexed getter on style declaration");
});
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
prepareTest();
</script>
|
