variable-substitution-basic.html (4998B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test basic variable substitution</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/#defining-variables"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <style> 14 #testArea { 15 color: orange; 16 } 17 #testArea > div { 18 width: 50px !important; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="log"></div> 24 <div id="testArea"></div> 25 <script type="text/javascript"> 26 "use strict"; 27 28 let templates = [ 29 { 30 testName:"Simple substitution test", 31 propertyName:"border-spacing", 32 expectedValue:"20px", 33 style:"--gap: 20px;border-spacing: var(--gap);" 34 }, 35 { 36 testName:"You can't build up a single token where part of it is provided by a variable", 37 propertyName:"border-spacing", 38 expectedValue:"0px", 39 style:"--gap: 20;border-spacing: var(--gap)px;" 40 }, 41 { 42 testName:"You can't build up a single token where part of it is provided by a variable (percentages)", 43 propertyName:"text-indent", 44 expectedValue:"0px", 45 style:"--v: 20;text-indent: var(--v)%;" 46 }, 47 { 48 testName:"Multiple variable references in a single property", 49 propertyName:"border-spacing", 50 expectedValue:"19px 47px", 51 style:"--gap1: 19px;--gap2: 47px;border-spacing: var(--gap1) var(--gap2);" 52 }, 53 { 54 testName:"Multiple variable references in a single property (no spaces)", 55 propertyName:"border-spacing", 56 expectedValue:"23px 59px", 57 style:"--gap1:23px;--gap2:59px;border-spacing:var(--gap1)var(--gap2);" 58 }, 59 { 60 testName:"Fallback value", 61 propertyName:"border-spacing", 62 expectedValue:"11px", 63 style:"border-spacing:var(--gap,11px);" 64 }, 65 { 66 testName:"Fallback value which is also a variable reference", 67 propertyName:"border-spacing", 68 expectedValue:"27px", 69 style:"--gap2: 27px; border-spacing:var(--gap,var(--gap2));" 70 }, 71 { 72 testName:"Multiple var references in fallback value", 73 propertyName:"border-spacing", 74 expectedValue:"66px 92px", 75 style:"--gap2: 66px; --gap3: 92px; border-spacing:var(--gap,var(--gap2)var(--gap3));" 76 }, 77 { 78 testName:"Multiple nested fallbacks", 79 propertyName:"border-spacing", 80 expectedValue:"98px 18px", 81 style:"--gap4: 98px 18px; border-spacing:var(--gap1,var(--gap2,var(--gap3,var(--gap4,var(--gap5)))));" 82 }, 83 { 84 testName:"Bad variable reference that should inherit by default", 85 propertyName:"color", 86 expectedValue:"rgb(255, 165, 0)", 87 style:"color: var(--colorVar) pink;" 88 }, 89 { 90 testName:"Test that var reference doesn’t overwrite !important", 91 propertyName:"width", 92 expectedValue:"50px", 93 style:"--varWidth: 28px; width: var(--varWidth);" 94 }, 95 { 96 testName:"Test that !important on a property that has a variable reference can overwrite !important", 97 propertyName:"width", 98 expectedValue:"28px", 99 style:"--varWidth: 28px; width: var(--varWidth) !important;" 100 }, 101 { 102 testName:"Test that !important inside of var reference can't overwrite !important on property", 103 propertyName:"width", 104 expectedValue:"50px", 105 style:"--varWidth: 28px !important; width: var(--varWidth);" 106 }, 107 ]; 108 109 let testArea = document.getElementById("testArea"); 110 111 templates.forEach(function (template) { 112 test( function () { 113 let div = document.createElement("div"); 114 div.style.cssText = template.style; 115 testArea.appendChild(div); 116 let computedStyle = window.getComputedStyle(div); 117 let value = computedStyle.getPropertyValue(template.propertyName); 118 assert_equals(value, template.expectedValue, "Expected Value should match actual value"); 119 testArea.removeChild(div); 120 }, template.testName); 121 }); 122 </script> 123 </body> 124 </html>