mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-10 11:55:49 +00:00
Bug 1379577 - stylo: test custom properties computed values consistent order. r=heycam
MozReview-Commit-ID: HTg9ynXJNRK --HG-- extra : rebase_source : ac0a94bd5d19d417deb5fe7f50bb5fcb69e21611
This commit is contained in:
parent
d58fe888c8
commit
3e43af640c
@ -320,6 +320,8 @@ skip-if = toolkit == 'android'
|
||||
[test_variable_serialization_specified.html]
|
||||
[test_variables.html]
|
||||
support-files = support/external-variable-url.css
|
||||
[test_variables_order.html]
|
||||
support-files = support/external-variable-url.css
|
||||
[test_video_object_fit.html]
|
||||
[test_viewport_scrollbar_causing_reflow.html]
|
||||
[test_viewport_units.html]
|
||||
|
53
layout/style/test/test_variables_order.html
Normal file
53
layout/style/test/test_variables_order.html
Normal file
@ -0,0 +1,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>
|
Loading…
Reference in New Issue
Block a user