124 lines
4.9 KiB
HTML
124 lines
4.9 KiB
HTML
<!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",
|
||
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>
|