layout/style/test/test_variables_loop.html

   1 <!DOCTYPE html>
   2 <title>CSS variables loop resolving</title>
   3 <script src="/MochiKit/MochiKit.js"></script>
   4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   5 <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
   6 <style id="test">
   7   #outer {
   8     --a: a;
   9     --b: b;
  10     --c: c;
  11     --d: d;
  12     --e: e;
  13   }
  14   #inner {
  15     --a: var(--d, ad);
  16     --b: var(--d, ad);
  17     --c: var(--d, ad);
  18     --d: var(--e, de);
  19     --e: var(--a, ea) var(--b, eb) var(--c, ec);
  20   }
  21 </style>
  22 <div id="outer">
  23   <div id="inner"></div>
  24 </div>
  25 <script>
  26 let inner_cs = getComputedStyle(document.getElementById("inner"));
  27 for (let v of ['a', 'b', 'c', 'd', 'e']) {
  28   is(inner_cs.getPropertyValue(`--${v}`), "",
  29      `Variable --${v} should be eliminated`);
  30 }
  31 </script>