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