<!DOCTYPE html><html><head><title>Tests css variable invalidation</title><metarel="author"title="Kevin Babbitt"><metarel="author"title="Greg Whitworth"><linkrel="author"title="Microsoft Corporation"href="http://microsoft.com"/><!-- This is not directly specified in the spec but should work --><linkrel="help"href="http://www.w3.org/TR/css-variables-1/#defining-variables"><scriptsrc="/resources/testharness.js"></script><scriptsrc="/resources/testharnessreport.js"></script><style>#test1{--var1:red;}#test2{--var2:red!important;}</style></head><body><divid="test1"><div><div><divclass="testElem"></div></div></div></div><divid="test2"><div><div><divclass="testElem"></div></div></div></div><divid="test3"style="--var3:red"><div><div><divclass="testElem"></div></div></div></div><divid="test4"style="--var4:red!important"><div><div><divclass="testElem"></div></div></div></div><scripttype="text/javascript">"use strict";// This is a helper function to avoid repititionfunctiontestExpectations(testProperty,cssStyle,testElement,testDescription,expectedValue,expectedCssText,expectedPriority,expectedLength,expectedItem0){assert_equals(cssStyle.cssText,expectedCssText,"cssText "+testDescription+".");assert_equals(cssStyle.getPropertyValue(testProperty),expectedValue,"Value "+testDescription+".");assert_equals(cssStyle.getPropertyPriority(testProperty),expectedPriority,"Priority "+testDescription+".");assert_equals(cssStyle.length,expectedLength,"style length "+testDescription+".");assert_equals(cssStyle.item(0),expectedItem0,"item(0) "+testDescription+".");varcomputedStyle=window.getComputedStyle(testElement);assert_equals(computedStyle.getPropertyValue(testProperty),expectedValue,"Computed Style value "+testDescription+".");}// This is a boilerplate to build a testcase and then test the expected outcomefunctiontestCase(cssStyle,testProperty,testElement,testImportant){varinitialCssText=testProperty+(testImportant?": red !important;":": red;");testExpectations(testProperty,cssStyle,testElement,"initial","red",initialCssText,testImportant?"important":"",1,testProperty);cssStyle.setProperty(testProperty,"blue");if(!testImportant){testExpectations(testProperty,cssStyle,testElement,"after setProperty","blue",testProperty+": blue;","",1,testProperty);}if(testProperty){cssStyle.setProperty(testProperty,"pink",'important');testExpectations(testProperty,cssStyle,testElement,"after setProperty important","pink",testProperty+": pink !important;","important",1,testProperty);}cssStyle.removeProperty(testProperty);testExpectations(testProperty,cssStyle,testElement,"after removeProperty","","","",0,"");varcssText=testProperty+(testImportant?":green!important;":":green;");varexpectedCssText=testProperty+(testImportant?": green !important;":": green;");cssStyle.cssText=cssText;testExpectations(testProperty,cssStyle,testElement,"after setting cssText","green",expectedCssText,testImportant?"important":"",1,testProperty);}// The actual tests that utilize the boilerplate & helper methods abovetest(function(){varcssStyle=document.styleSheets[0].cssRules[0].style;vartestProperty="--var1";vartestElement=document.querySelectorAll("#test1 .testElem")[0];testCase(cssStyle,testProperty,testElement,false);},"css rule test");test(function(){varcssStyle=document.styleSheets[0].cssRules[1].style;vartestProperty="--var2";vartestElement=document.querySelectorAll("#test2 .testElem")[0];testCase(cssStyle,testProperty,testElement,true);},"css rule test important");test(function(){varelement=document.getElementById("test3");varcssStyle=element.style;vartestProperty="--var3";vartestElement=document.querySelectorAll("#test3 .testElem")[0];testCase(cssStyle,testProperty,testElement,false);},"inline style test");test(function(){varelement=document.getElementById("test4");varcssStyle=element.style;vartestProperty="--var4";vartestElement=document.querySelectorAll("#test4 .testElem")[0];testCase(cssStyle,testProperty,testElement,true);},"inline style test important");</script></body></html>