testing/web-platform/tests/css/css-variables/variable-definition-cascading.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>variable definition cascading tests</title>
   5
   6     <meta rel="author" title="Kevin Babbitt">
   7     <meta rel="author" title="Greg Whitworth">
   8     <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
   9     <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
  10
  11     <script src="/resources/testharness.js"></script>
  12     <script src="/resources/testharnessreport.js"></script>
  13     <style>
  14         * {
  15             --var0:x;
  16         }
  17     </style>
  18 </head>
  19 <body>
  20     <!-- test global selector -->
  21     <div id="t0"></div>
  22
  23     <!-- multiple unique variables cascading together -->
  24     <div id="t1a" style="--var1:a">
  25         <div id="t1b" style="--var2:b">
  26             <div id="t1c" style="--var3:c"></div>
  27             <div id="t1d" style="--var4:d"></div>
  28         </div>
  29     </div>
  30
  31     <!-- testing overwriting -->
  32     <div id="t2a" style="--var0:a">
  33         <div id="t2b" style="--var0:b;--var1:c">
  34             <div id="t2c" style="--var0:d;--var1:e"></div>
  35             <div id="t2d" style="--var2:f"></div>
  36         </div>
  37     </div>
  38
  39     <script type="text/javascript">
  40         "use strict";
  41
  42         var tests = [
  43             {"divid": "t0",     "expectedValues":["x"]},
  44             {"divid": "t1a",    "expectedValues":["x","a"]},
  45             {"divid": "t1b",    "expectedValues":["x","a","b"]},
  46             {"divid": "t1c",    "expectedValues":["x","a","b","c"]},
  47             {"divid": "t1d",    "expectedValues":["x","a","b","","d"]},
  48             {"divid": "t2a",    "expectedValues":["a"]},
  49             {"divid": "t2b",    "expectedValues":["b","c"]},
  50             {"divid": "t2c",    "expectedValues":["d","e"]},
  51             {"divid": "t2d",    "expectedValues":["x","c","f"]}
  52         ];
  53
  54         let maxVariables = 5;
  55
  56         tests.forEach(function (testCase) {
  57             test( function () {
  58                 let div = document.getElementById(testCase.divid);
  59                 let computedStyle = window.getComputedStyle(div);
  60                 for (var i = 0; i < maxVariables; ++i) {
  61                     let testVar = "--var" + i;
  62                     let actualValue = computedStyle.getPropertyValue(testVar);
  63                     let expectedValue = testCase.expectedValues[i];
  64                     if (expectedValue === undefined){
  65                         expectedValue = "";
  66                     }
  67                     assert_equals(actualValue, expectedValue, "Actual Value for '" + testVar + "' should match expected value");
  68
  69                 }
  70             }, "testing cascaded CSS Variables on div '" + testCase.divid + "'");
  71         });
  72     </script>
  73 </body>
  74 </html>