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