<!DOCTYPE html> <html> <head> <title>test basic variable substitution</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/#defining-variables"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #testArea { color: orange; } #testArea > div { width: 50px !important; } </style> </head> <body> <div id="log"></div> <div id="testArea"></div> <script type="text/javascript"> "use strict"; let templates = [ { testName:"Simple substitution test", propertyName:"border-spacing", expectedValue:"20px 20px", style:"--gap: 20px;border-spacing: var(--gap);" }, { testName:"You can't build up a single token where part of it is provided by a variable", propertyName:"border-spacing", expectedValue:"0px 0px", style:"--gap: 20;border-spacing: var(--gap)px;" }, { testName:"You can't build up a single token where part of it is provided by a variable (percentages)", propertyName:"text-indent", expectedValue:"0px", style:"--v: 20;text-indent: var(--v)%;" }, { testName:"Multiple variable references in a single property", propertyName:"border-spacing", expectedValue:"19px 47px", style:"--gap1: 19px;--gap2: 47px;border-spacing: var(--gap1) var(--gap2);" }, { testName:"Multiple variable references in a single property (no spaces)", propertyName:"border-spacing", expectedValue:"23px 59px", style:"--gap1:23px;--gap2:59px;border-spacing:var(--gap1)var(--gap2);" }, { testName:"Fallback value", propertyName:"border-spacing", expectedValue:"11px 11px", style:"border-spacing:var(--gap,11px);" }, { testName:"Fallback value which is also a variable reference", propertyName:"border-spacing", expectedValue:"27px 27px", style:"--gap2: 27px; border-spacing:var(--gap,var(--gap2));" }, { testName:"Multiple var references in fallback value", propertyName:"border-spacing", expectedValue:"66px 92px", style:"--gap2: 66px; --gap3: 92px; border-spacing:var(--gap,var(--gap2)var(--gap3));" }, { testName:"Multiple nested fallbacks", propertyName:"border-spacing", expectedValue:"98px 18px", style:"--gap4: 98px 18px; border-spacing:var(--gap1,var(--gap2,var(--gap3,var(--gap4,var(--gap5)))));" }, { testName:"Bad variable reference that should inherit by default", propertyName:"color", expectedValue:"rgb(255, 165, 0)", style:"color: var(--colorVar) pink;" }, { testName:"Test that var reference doesn’t overwrite !important", propertyName:"width", expectedValue:"50px", style:"--varWidth: 28px; width: var(--varWidth);" }, { testName:"Test that !important on a property that has a variable reference can overwrite !important", propertyName:"width", expectedValue:"28px", style:"--varWidth: 28px; width: var(--varWidth) !important;" }, { testName:"Test that !important inside of var reference can't overwrite !important on property", propertyName:"width", expectedValue:"50px", style:"--varWidth: 28px !important; width: var(--varWidth);" }, ]; let testArea = document.getElementById("testArea"); templates.forEach(function (template) { test( function () { let div = document.createElement("div"); div.style.cssText = template.style; testArea.appendChild(div); let computedStyle = window.getComputedStyle(div); let value = computedStyle.getPropertyValue(template.propertyName); assert_equals(value, template.expectedValue, "Expected Value should match actual value"); testArea.removeChild(div); }, template.testName); }); </script> </body> </html>