Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-variables/variable-substitution-basic.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>test basic variable substitution</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<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",
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",
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",
style:"border-spacing:var(--gap,11px);"
},
{
testName:"Fallback value which is also a variable reference",
propertyName:"border-spacing",
expectedValue:"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>