variable-reference-variable.html (1335B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Parse, store, and serialize CSS variable referencing another CSS variable</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/#serializing-custom-props"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 </head> 14 <body> 15 <div id="test1" style="--prop1: var(--prop2);"></div> 16 <div id="test2" style="--prop1: var(--prop2, var(--prop3));"></div> 17 18 <script type="text/javascript"> 19 "use strict"; 20 21 var testcases = [ 22 { elementId: "test1", expectedPropertyValue: "var(--prop2)" }, 23 { elementId: "test2", expectedPropertyValue: "var(--prop2, var(--prop3))" }, 24 ]; 25 26 testcases.forEach(function (testcase) { 27 test( function () { 28 var testElement = document.getElementById(testcase.elementId); 29 var actualPropertyValue = testElement.style.getPropertyValue("--prop1").trim(); 30 assert_equals(actualPropertyValue, testcase.expectedPropertyValue); 31 }, testcase.cssText); 32 }); 33 </script> 34 35 </body> 36 </html>