| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Parse, store, and serialize CSS variable referencing another CSS variable</title> |
| |
| <meta rel="author" title="Kevin Babbitt"> |
| <meta rel="author" title="Greg Whitworth"> |
| <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> |
| <link rel="help" href="http://www.w3.org/TR/css-variables-1/#serializing-custom-props"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div id="test1" style="--prop1: var(--prop2);"></div> |
| <div id="test2" style="--prop1: var(--prop2, var(--prop3));"></div> |
| |
| <script type="text/javascript"> |
| "use strict"; |
| |
| var testcases = [ |
| { elementId: "test1", expectedPropertyValue: "var(--prop2)" }, |
| { elementId: "test2", expectedPropertyValue: "var(--prop2, var(--prop3))" }, |
| ]; |
| |
| testcases.forEach(function (testcase) { |
| test( function () { |
| var testElement = document.getElementById(testcase.elementId); |
| var actualPropertyValue = testElement.style.getPropertyValue("--prop1").trim(); |
| assert_equals(actualPropertyValue, testcase.expectedPropertyValue); |
| }, testcase.cssText); |
| }); |
| </script> |
| |
| </body> |
| </html> |
