<!DOCTYPE html><html><head><title>variable-definition: get variable value using getPropertyValue</title><metarel="author"title="Kevin Babbitt"><metarel="author"title="Greg Whitworth"><linkrel="author"title="Microsoft Corporation"href="http://microsoft.com"/><linkrel="help"href="http://www.w3.org/TR/css-variables-1/#using-variables"><scriptsrc="/resources/testharness.js"></script><scriptsrc="/resources/testharnessreport.js"></script></head><body><divid="log"></div><scripttype="text/javascript">"use strict";lettemplates=[{varName:"--var",expectedValue:"",style:"",testName:"no variable"},{varName:"--var",expectedValue:"value",style:"--var:value",testName:"variable"},{varName:"--v",expectedValue:"value",style:"--v:value",testName:"single char variable"},{varName:"---",expectedValue:"value",style:"---:value",testName:"single char '-' variable"},{varName:"--",expectedValue:"",style:"--:value",testName:"no char variable"},{varName:"--var",expectedValue:" ",style:"--var: ",testName:"white space value (single space)"},{varName:"--var",expectedValue:" ",style:"--var: ",testName:"white space value (double space)"},{varName:"--var",expectedValue:"value2",style:"--var:value1; --var:value2",testName:"overwrite"},{varName:"--var",expectedValue:" ",style:"--var:value;--var:;",testName:"can overwrite with no value"},{varName:"--var",expectedValue:" ",style:"--var:value;--var: ;",testName:"can overwrite with space value"},{varName:"--var",expectedValue:"value1",style:"--var:value1; --Var:value2",testName:"case sensetivity"},{varName:"--Var",expectedValue:"value2",style:"--var:value1; --Var:value2",testName:"case sensetivity2"},{varName:"---var",expectedValue:"value",style:"---var:value;",testName:"parsing three dashes at start of variable"},{varName:"-var4",expectedValue:"",style:"-var4:value3",testName:"parsing multiple dashes with one dash at start of variable"},{varName:"--var",expectedValue:"value",style:"--var: value",testName:" leading white space (single space)"},{varName:"--var",expectedValue:"value1 value2",style:"--var:value1 value2",testName:" middle white space (single space)"},{varName:"--var",expectedValue:"value",style:"--var:value ",testName:" trailing white space (single space)"},{varName:"--var",expectedValue:"value",style:"--var: value",testName:" leading white space (double space) 2"},{varName:"--var",expectedValue:"value1 value2",style:"--var:value1 value2",testName:" middle white space (double space) 2"},{varName:"--var",expectedValue:"value",style:"--var:value ",testName:" trailing white space (double space) 2"},{varName:"--var",expectedValue:"value1",style:"--var:value1 !important;",testName:"!important"},{varName:"--var",expectedValue:"value1",style:"--var:value1!important;--var:value2;",testName:"!important 2"},{varName:"--var",expectedValue:"value1",style:"--var:value1 !important;--var:value2;",testName:"!important (with space)"}];templates.forEach(function(template){test(function(){letdiv=document.createElement("div");div.style.cssText=template.style;document.body.appendChild(div);letvalue=div.style.getPropertyValue(template.varName);assert_equals(value,template.expectedValue,"Expected Value should match actual value");document.body.removeChild(div);},template.testName);});templates.forEach(function(template){test(function(){letdiv=document.createElement("div");div.style.cssText=template.style;document.body.appendChild(div);letcomputedStyle=window.getComputedStyle(div);letvalue=computedStyle.getPropertyValue(template.varName);assert_equals(value,template.expectedValue,"Expected Value should match actual value");document.body.removeChild(div);},template.testName+" (Computed Style)");});templates.forEach(function(template){test(function(){letdiv=document.createElement("div");div.style.cssText=template.style;document.body.appendChild(div);letdivChild=document.createElement("div");div.appendChild(divChild);letcomputedStyle=window.getComputedStyle(divChild);letvalue=computedStyle.getPropertyValue(template.varName);assert_equals(value,template.expectedValue,"Expected Value should match actual value");document.body.removeChild(div);},template.testName+" (Cascading)");});lettemplate2=[{varToSet:"--varUnique",setValue:"green",varNameForRetrieval:"--varUnique",expectedValue:"green",testName:"basic CSSOM.setProperty"},{varToSet:"--varUnique2 ",setValue:"green",varNameForRetrieval:"--varUnique2 ",expectedValue:"",testName:"CSSOM.setProperty with space 1"},{varToSet:"--varUnique3 name",setValue:"green",varNameForRetrieval:"--varUnique3 name",expectedValue:"",testName:"CSSOM.setProperty with space 2"},{varToSet:"--varUnique4 name",setValue:"green",varNameForRetrieval:"--varUnique4",expectedValue:"",testName:"CSSOM.setProperty with space 3"},];template2.forEach(function(template){test(function(){letdiv=document.createElement("div");div.style.setProperty(template.varToSet,template.setValue);document.body.appendChild(div);letcomputedStyle=window.getComputedStyle(div);letvalue=computedStyle.getPropertyValue(template.varNameForRetrieval);assert_equals(value,template.expectedValue,"Expected Value should match actual value");document.body.removeChild(div);},template.testName);});</script></body></html>