gecko-dev/layout/style/test/test_variables_order.html

<!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>