if-cycle.html (8499B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: CSS if() function cycles</title> 3 <meta name="assert" content="Test cycles in if() function"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-5/#if-notation"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <div id="attr"></div> 9 <div id="expected"></div> 10 11 <body> 12 <div id="if"></div> 13 </body> 14 15 <script> 16 function set_custom_properties(customPropertiesData) { 17 customPropertiesData.forEach(entry => { 18 const [customPropertyName, customPropertyValue] = entry; 19 document.getElementById("if").style.setProperty(customPropertyName, customPropertyValue); 20 }); 21 } 22 23 function test_if(ifValue, customPropertiesData, expectedValue) { 24 set_custom_properties(customPropertiesData); 25 var elem = document.getElementById("if"); 26 var property = "--prop"; 27 elem.style.setProperty(property, ifValue); 28 29 test(() => { 30 assert_equals(window.getComputedStyle(elem).getPropertyValue(property), 31 expectedValue, 32 '"' + ifValue + '" should be substituted to "' + expectedValue + '".'); 33 }); 34 35 elem.style.setProperty(property, ''); 36 } 37 38 var ifElem = document.getElementById("if"); 39 40 // var() cycle in declaration value 41 // 42 // Note: 'test_if()' places the 'if()' in a custom property '--prop'. 43 test_if(`if(style(--x: 3): var(--prop); else: value)`, 44 [['--x', '3']], 45 ''); 46 test_if(`if(style(--x: 3): value; else: var(--prop))`, 47 [['--x', '0']], 48 ''); 49 50 // attr() cycle in declaration value 51 ifElem.setAttribute('data-foo', 'var(--prop)'); 52 test_if(`if(style(--x: 3): attr(data-foo type(*)); else: value)`, 53 [['--x', '3']], 54 ''); 55 56 ifElem.setAttribute('data-foo', 'var(--prop)'); 57 test_if(`if(style(--x: 3): value; else: attr(data-foo type(*)))`, 58 [['--x', '0']], 59 ''); 60 61 // Cycle in the condition 62 // 63 // Note: 'test_if()' places the 'if()' in a custom property '--prop'. 64 test_if(`if(style(--prop): var(--prop); else: value)`, 65 [], 66 ''); 67 test_if(`if(style(--x): var(--prop); else: value)`, 68 [['--x', 'var(--prop)']], 69 ''); 70 test_if(`if(style(--prop: 3): true_value; 71 else: false_value)`, 72 [['--prop', '3']], 73 ''); 74 test_if(`if(style(--x: 3): true_value; 75 else: false_value)`, 76 [['--x', 'var(--prop)']], 77 ''); 78 test_if(`if(style(not (--prop)): true_value; 79 else: false_value)`, 80 [], 81 ''); 82 test_if(`if(style(not (--x: var(--y))): true_value; 83 else: false_value)`, 84 [['--x', '11'], ['--y', 'var(--prop)']], 85 ''); 86 test_if(`if(style((--prop) or (--y)): true_value; 87 else: false_value)`, 88 [['--y', '3']], 89 ''); 90 test_if(`if(style((--prop) and (--y)): true_value; 91 else: false_value)`, 92 [['--y', '3']], 93 ''); 94 test_if(`if(style(--x: var(--prop)): true_value; 95 else: false_value)`, 96 [['--x', '3']], 97 ''); 98 test_if(`if(style(--x: var(--y)): true_value; 99 else: false_value)`, 100 [['--x', '3'], ['--y', 'var(--prop)']], 101 ''); 102 103 ifElem.setAttribute('data-foo', 'var(--prop)'); 104 test_if(`if(style(--x: 3): true_value; 105 else: false_value)`, 106 [['--x', 'attr(data-foo type(*))']], 107 ''); 108 109 ifElem.setAttribute('data-foo', 'var(--prop)'); 110 test_if(`if(style(--x: 3): true_value; 111 else: false_value)`, 112 [['--x', 'var(--y)'], ['--y', 'attr(data-foo type(*))']], 113 ''); 114 115 ifElem.setAttribute('data-foo', 'var(--prop)'); 116 test_if(`if(style(--x: attr(data-foo type(*))): true_value; 117 else: false_value)`, 118 [['--x', '30px']], 119 ''); 120 121 // var() cycle in condition's custom property 122 test_if(`if(style(--y): true_value; 123 else: false_value)`, 124 [['--y', 'var(--x)'], ['--x', 'var(--y)']], 125 'false_value'); 126 test_if(`if(style(not (--x: var(--y))): true_value; 127 else: false_value)`, 128 [['--x', '11'], ['--y', 'var(--y)']], 129 'true_value'); 130 test_if(`if(style(not (--x: var(--y))): true_value; 131 else: false_value)`, 132 [['--x', '11'], ['--y', 'var(--y)']], 133 'true_value'); 134 test_if(`if(style((--x) or (--y)): true_value; 135 else: false_value)`, 136 [['--x', 'var(--x)'], ['--y', '3']], 137 'true_value'); 138 test_if(`if(style((--x) and (--y)): true_value; 139 else: false_value)`, 140 [['--x', 'var(--x)'], ['--y', '3']], 141 'false_value'); 142 test_if(`if(style((not (--z)) or (--y)): true_value; 143 else: false_value)`, 144 [['--z', 'var(--x)'], ['--x', 'var(--z)'], ['--y', '3']], 145 'true_value'); 146 test_if(`if(style((not (--z)) and (--y)): true_value; 147 else: false_value)`, 148 [['--z', 'var(--x)'], ['--x', 'var(--z)'], ['--y', '3']], 149 'true_value'); 150 151 // cycle with var() and attr() in condition's custom property 152 ifElem.setAttribute('data-foo', 'var(--x)'); 153 test_if(`if(style(--x: 3): true_value; 154 else: false_value)`, 155 [['--x', 'attr(data-foo type(*))']], 156 'false_value'); 157 158 ifElem.setAttribute('data-foo', 'var(--y)'); 159 test_if(`if(style(--x: 3): true_value; 160 else: false_value)`, 161 [['--x', 'var(--y)'], ['--y', 'attr(data-foo type(*))']], 162 'false_value'); 163 164 // var() cycle in condition specified value 165 test_if(`if(style(--x: var(--y)): true_value; 166 else: false_value)`, 167 [['--x', '3'], ['--y', 'var(--z)'], ['--z', 'var(--y)']], 168 'false_value'); 169 test_if(`if(style(--x: var(--y)): true_value; 170 else: false_value)`, 171 [['--x', '3'], ['--y', 'var(--y)']], 172 'false_value'); 173 174 // attr() cycle in condition specified value 175 ifElem.setAttribute('data-foo', 'attr(data-foo type(*))'); 176 test_if(`if(style(--x: attr(data-foo type(*))): true_value; 177 else: false_value)`, 178 [['--x', '30px']], 179 'false_value'); 180 181 ifElem.setAttribute('data-foo', '30px'); 182 test_if(`if(style(--x: attr(data-foo, var(--y))): true_value; 183 else: false_value)`, 184 [['--x', '"30px"'], ['--y', 'var(--y)']], 185 'true_value'); 186 187 // self cycle in unused condition 188 test_if(`if(style(--x: 0): value1; style(--prop): value2)`, 189 [['--x', '0']], 190 'value1'); 191 test_if(`if(style(--x: 3): value1; 192 style(--y: 3): value2; 193 else: value3)`, 194 [['--x', '3'], ['--y', 'var(--prop)']], 195 'value1'); 196 197 // cycle in unused condition 198 test_if(`if(style(--x: 0): value1; style(--y): value2)`, 199 [['--x', '0'], ['--y', 'var(--y)']], 200 'value1'); 201 test_if(`if(style(--x: 3): value1; 202 style(--y: 3): value2; 203 else: value3)`, 204 [['--x', '3'], ['--y', 'var(--y)']], 205 'value1'); 206 207 // var() cycle in unused declaration value 208 test_if(`if(style(--x: 0): var(--prop); else: value)`, 209 [['--x', '3']], 210 'value'); 211 test_if(`if(style(--x: 0): value; else: var(--prop))`, 212 [['--x', '0']], 213 'value'); 214 test_if(`if(style(--x: 3): value1; 215 style(--y: 3): var(--prop); 216 else: value3)`, 217 [['--x', '3'], ['--y', '0']], 218 'value1'); 219 test_if(`if(style(--x: 3): var(--prop); 220 style(--y: 3): var(--prop); 221 else: value3)`, 222 [['--x', '0'], ['--y', '0']], 223 'value3'); 224 225 // no cycle 226 test_if(`if(style(--x: 3): var(--x); 227 else: value)`, 228 [['--x', '3']], 229 '3'); 230 test_if(`if(style(--x: var(--y)): var(--y); 231 else: value)`, 232 [['--x', '3'], ['--y', '3']], 233 '3'); 234 test_if(`if(style(--x: var(--x)): true_value; 235 else: false_value)`, 236 [['--x', '3']], 237 'true_value'); 238 test_if(`if(style(--non-existent: var(--non-existent)): true_value; 239 else: false_value)`, 240 [], 241 'false_value'); 242 test_if(`if(style(--x: 3): true_value; 243 else: var(--x))`, 244 [['--x', '1']], 245 '1'); 246 test_if(`if(style(--x: var(--x)): value1; 247 style(--x: 3): value2; 248 else: value3;)`, 249 [['--x', '3']], 250 'value1'); 251 test_if(`if(style(--x: var(--y)): value1; 252 style(--z: 3): value2; 253 else: value3;)`, 254 [['--x', 'var(--y)'], ['--y', 'var(--y)'], ['--z', '3']], 255 'value2'); 256 test_if(`if(style(--z: var(--y)): value1; 257 style(--z: 3): value2; 258 else: value3;)`, 259 [['--x', 'var(--y)'], ['--y', 'var(--y)'], ['--z', '3']], 260 'value2'); 261 </script>