variable-substitution-variable-declaration.html (6334B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Testing substituting variable references inside of variable declerations</title> 6 7 <meta rel="author" title="Kevin Babbitt"> 8 <meta rel="author" title="Greg Whitworth"> 9 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 10 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> 11 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <style> 15 #target1 { 16 margin: var(--var2); 17 --var2: var(--var1) 10px; 18 --var1: var(--var0) 13px 17px; 19 --var0: 23px; 20 } 21 22 #target2parent { 23 --var2: var(--var1, fallback); 24 --var1: var(--var2, fallback); 25 } 26 #target2 { 27 --var1: good; 28 } 29 30 #target3 { 31 --var2: var(--var1, 3px); 32 --var1: var(--var0, 5px); 33 } 34 35 #target4 { 36 --varA: var(--varB); 37 --varB: var(--varA); 38 --varC: var(--varB,13px); 39 } 40 41 #target5 { 42 --varA: var(--varB); 43 --varB: var(--varA) var(--varC); 44 --varC: var(--varB,13px); 45 } 46 47 #target6 { 48 --varA: var(--varB); 49 --varB: var(--varA) var(--varDoesNotExist,var(--varC)); 50 --varC: var(--varB,13px); 51 } 52 53 #target7 { 54 --varDoesExist: 5px; 55 --varA: var(--varB); 56 --varB: var(--varA) var(--varDoesExist,var(--varC)); 57 --varC: var(--varB,13px); 58 } 59 60 #target8 { 61 --varA: var(--varA, 9px); 62 --varB: var(--varA, 7px); 63 } 64 65 #target9 { 66 --varA: good; 67 --varB: very var(--varA, var(--varC)); 68 --varC: var(--varB); 69 } 70 71 #target10parent { 72 --varA: good; 73 --varB: Also good; 74 --varC: another good one; 75 } 76 77 #target10 { 78 --varA: var(--varB); 79 --varB: var(--varA); 80 --varC: var(--varB); 81 } 82 </style> 83 </head> 84 <body> 85 <div id="target1"></div> 86 <div id="target2parent"> 87 <div id="target2"></div> 88 </div> 89 <div id="target3"></div> 90 <div id="target4"></div> 91 <div id="target5"></div> 92 <div id="target6"></div> 93 <div id="target7"></div> 94 <div id="target8"></div> 95 <div id="target9"></div> 96 <div id="target10parent"> 97 <div id="target10"></div> 98 </div> 99 100 <script type="text/javascript"> 101 "use strict"; 102 103 var testcases = [ 104 { element: "target1", propertyName: "--var2", expectedPropertyValue: "23px 13px 17px 10px" }, 105 { element: "target1", propertyName: "margin-top", expectedPropertyValue: "23px" }, 106 { element: "target1", propertyName: "margin-right", expectedPropertyValue: "13px" }, 107 { element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "17px" }, 108 { element: "target1", propertyName: "margin-left", expectedPropertyValue: "10px" }, 109 110 { element: "target2parent", propertyName: "--var1", expectedPropertyValue: "" }, 111 { element: "target2parent", propertyName: "--var2", expectedPropertyValue: "" }, 112 { element: "target2", propertyName: "--var1", expectedPropertyValue: "good" }, 113 { element: "target2", propertyName: "--var2", expectedPropertyValue: "" }, 114 115 { element: "target3", propertyName: "--var1", expectedPropertyValue: "5px" }, 116 { element: "target3", propertyName: "--var2", expectedPropertyValue: "5px" }, 117 118 { element: "target4", propertyName: "--varA", expectedPropertyValue: "" }, 119 { element: "target4", propertyName: "--varB", expectedPropertyValue: "" }, 120 { element: "target4", propertyName: "--varC", expectedPropertyValue: "13px" }, 121 122 { element: "target5", propertyName: "--varA", expectedPropertyValue: "" }, 123 { element: "target5", propertyName: "--varB", expectedPropertyValue: "" }, 124 { element: "target5", propertyName: "--varC", expectedPropertyValue: "" }, 125 126 { element: "target6", propertyName: "--varA", expectedPropertyValue: "" }, 127 { element: "target6", propertyName: "--varB", expectedPropertyValue: "" }, 128 { element: "target6", propertyName: "--varC", expectedPropertyValue: "13px" }, 129 130 { element: "target7", propertyName: "--varA", expectedPropertyValue: "" }, 131 { element: "target7", propertyName: "--varB", expectedPropertyValue: "" }, 132 { element: "target7", propertyName: "--varC", expectedPropertyValue: "13px" }, 133 134 { element: "target8", propertyName: "--varA", expectedPropertyValue: "" }, 135 { element: "target8", propertyName: "--varB", expectedPropertyValue: "7px" }, 136 137 { element: "target9", propertyName: "--varA", expectedPropertyValue: "good" }, 138 { element: "target9", propertyName: "--varB", expectedPropertyValue: "very good" }, 139 { element: "target9", propertyName: "--varC", expectedPropertyValue: "very good" }, 140 141 { element: "target10", propertyName: "--varA", expectedPropertyValue: "" }, 142 { element: "target10", propertyName: "--varB", expectedPropertyValue: "" }, 143 { element: "target10", propertyName: "--varC", expectedPropertyValue: "" }, 144 ]; 145 146 testcases.forEach(function (testcase) { 147 test( function () { 148 var div = document.getElementById(testcase.element); 149 var actualPropertyValue = window.getComputedStyle(div).getPropertyValue(testcase.propertyName); 150 assert_equals(actualPropertyValue, testcase.expectedPropertyValue); 151 }, testcase.element + " " + testcase.propertyName); 152 }); 153 </script> 154 </body> 155 </html>