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