variable-definition.html (6643B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>variable-definition: get variable value using getPropertyValue</title> 5 6 <meta rel="author" title="Kevin Babbitt"> 7 <meta rel="author" title="Greg Whitworth"> 8 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 9 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 </head> 14 <body> 15 <div id="log"></div> 16 17 <script type="text/javascript"> 18 "use strict"; 19 20 let templates = [ 21 { varName:"--var", expectedValue:"", style:"", testName:"no variable"}, 22 { varName:"--var", expectedValue:"value", style:"--var:value", testName:"variable"}, 23 { varName:"--v", expectedValue:"value", style:"--v:value", testName:"single char variable"}, 24 { varName:"---", expectedValue:"value", style:"---:value", testName:"single char '-' variable"}, 25 { varName:"--", expectedValue:"", style:"--:value", testName:"no char variable"}, 26 { varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (single space)"}, 27 { varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (double space)"}, 28 { varName:"--var", expectedValue:"value2", style:"--var:value1; --var:value2", testName:"overwrite"}, 29 { varName:"--var", expectedValue:" ", style:"--var:value;--var:;", testName:"can overwrite with no value"}, 30 { varName:"--var", expectedValue:" ", style:"--var:value;--var: ;", testName:"can overwrite with space value"}, 31 { varName:"--var", expectedValue:"value1", style:"--var:value1; --Var:value2", testName:"case sensetivity"}, 32 { varName:"--Var", expectedValue:"value2", style:"--var:value1; --Var:value2", testName:"case sensetivity2"}, 33 { varName:"---var", expectedValue:"value", style:"---var:value;", testName:"parsing three dashes at start of variable"}, 34 { varName:"-var4" , expectedValue:"", style:"-var4:value3", testName:"parsing multiple dashes with one dash at start of variable"}, 35 { varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (single space)"}, 36 { varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2", testName:" middle white space (single space)"}, 37 { varName:"--var", expectedValue:"value", style:"--var:value ", testName:" trailing white space (single space)"}, 38 { varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (double space) 2"}, 39 { varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2",testName:" middle white space (double space) 2"}, 40 { varName:"--var", expectedValue:"value", style:"--var:value ", testName:" trailing white space (double space) 2"}, 41 { varName:"--var", expectedValue:"value1", style:"--var:value1 !important;", testName:"!important"}, 42 { varName:"--var", expectedValue:"value1", style:"--var:value1!important;--var:value2;", testName:"!important 2"}, 43 { varName:"--var", expectedValue:"value1", style:"--var:value1 !important;--var:value2;", testName:"!important (with space)"} 44 ]; 45 46 templates.forEach(function (template) { 47 test( function () { 48 let div = document.createElement("div"); 49 div.style.cssText = template.style; 50 document.body.appendChild(div); 51 let value = div.style.getPropertyValue(template.varName); 52 assert_equals(value, template.expectedValue, "Expected Value should match actual value"); 53 document.body.removeChild(div); 54 }, template.testName); 55 }); 56 57 templates.forEach(function (template) { 58 test( function () { 59 let div = document.createElement("div"); 60 div.style.cssText = template.style; 61 document.body.appendChild(div); 62 let computedStyle = window.getComputedStyle(div); 63 let value = computedStyle.getPropertyValue(template.varName); 64 assert_equals(value, template.expectedValue, "Expected Value should match actual value"); 65 document.body.removeChild(div); 66 }, template.testName +" (Computed Style)"); 67 }); 68 69 templates.forEach(function (template) { 70 test( function () { 71 let div = document.createElement("div"); 72 div.style.cssText = template.style; 73 document.body.appendChild(div); 74 let divChild = document.createElement("div"); 75 div.appendChild(divChild); 76 let computedStyle = window.getComputedStyle(divChild); 77 let value = computedStyle.getPropertyValue(template.varName); 78 assert_equals(value, template.expectedValue, "Expected Value should match actual value"); 79 document.body.removeChild(div); 80 }, template.testName +" (Cascading)"); 81 }); 82 83 let template2 = [ 84 { varToSet:"--varUnique", setValue:"green", varNameForRetrieval:"--varUnique", expectedValue:"green", testName:"basic CSSOM.setProperty"}, 85 { varToSet:"--varUnique2 ", setValue:"green", varNameForRetrieval:"--varUnique2 ", expectedValue:"", testName:"CSSOM.setProperty with space 1"}, 86 { varToSet:"--varUnique3 name", setValue:"green", varNameForRetrieval:"--varUnique3 name", expectedValue:"", testName:"CSSOM.setProperty with space 2"}, 87 { varToSet:"--varUnique4 name", setValue:"green", varNameForRetrieval:"--varUnique4", expectedValue:"", testName:"CSSOM.setProperty with space 3"}, 88 ]; 89 90 template2.forEach(function (template) { 91 test( function () { 92 let div = document.createElement("div"); 93 div.style.setProperty(template.varToSet, template.setValue); 94 document.body.appendChild(div); 95 let computedStyle = window.getComputedStyle(div); 96 let value = computedStyle.getPropertyValue(template.varNameForRetrieval); 97 assert_equals(value, template.expectedValue, "Expected Value should match actual value"); 98 document.body.removeChild(div); 99 }, template.testName); 100 }); 101 </script> 102 103 </body> 104 </html>