if-conditionals.html (35261B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: CSS inline if() function</title> 3 <meta name="assert" content="Test inline 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 <html> 9 <style> 10 @property --string { 11 syntax: "<string>"; 12 inherits: true; 13 initial-value: ""; 14 } 15 @property --color { 16 syntax: "<color>"; 17 inherits: true; 18 initial-value: blue; 19 } 20 @property --length { 21 syntax: "<length>"; 22 inherits: false; 23 initial-value: 3px; 24 } 25 @property --length-inherited { 26 syntax: "<length>"; 27 inherits: true; 28 initial-value: 3px; 29 } 30 @property --percentage { 31 syntax: "<percentage>"; 32 inherits: true; 33 initial-value: 30%; 34 } 35 @property --number { 36 syntax: "<number>"; 37 inherits: true; 38 initial-value: 3; 39 } 40 @property --angle { 41 syntax: "<angle>"; 42 inherits: true; 43 initial-value: 3deg; 44 } 45 @property --time { 46 syntax: "<time>"; 47 inherits: true; 48 initial-value: 3s; 49 } 50 @property --resolution { 51 syntax: "<resolution>"; 52 inherits: true; 53 initial-value: 3dpi; 54 } 55 div { 56 font-size: 30px; 57 } 58 .outer { 59 --inherited: outer_value; 60 --number: 30; 61 --x: 11; 62 --length: 30px; 63 --length-inherited: 30px; 64 } 65 .inner { 66 --inherited: inner_value; 67 } 68 </style> 69 <body> 70 <div class="outer"> 71 <div id="if" class="inner" data-foo="30px" data-attr="attr"></div> 72 </div> 73 </body> 74 </html> 75 76 <script> 77 function set_custom_properties(customPropertiesData) { 78 customPropertiesData.forEach(entry => { 79 const [customPropertyName, customPropertyValue] = entry; 80 document.getElementById("if").style.setProperty(customPropertyName, customPropertyValue); 81 }); 82 } 83 84 function clear_custom_properties(customPropertiesData) { 85 customPropertiesData.forEach(entry => { 86 const [customPropertyName, customPropertyValue] = entry; 87 document.getElementById("if").style.removeProperty(customPropertyName); 88 }); 89 } 90 91 function test_if_with_custom_properties(ifValue, customPropertiesData, expectedValue) { 92 set_custom_properties(customPropertiesData); 93 var elem = document.getElementById("if"); 94 var property = "--property"; 95 elem.style.setProperty(property, ifValue); 96 97 test(() => { 98 assert_equals(window.getComputedStyle(elem).getPropertyValue(property), 99 expectedValue, 100 '"' + ifValue + '" should be substituted to "' + expectedValue + '".'); 101 }); 102 103 clear_custom_properties(customPropertiesData); 104 elem.style.removeProperty(property); 105 } 106 107 function test_if(ifValue, expectedValue) { 108 test_if_with_custom_properties(ifValue, [], expectedValue); 109 } 110 111 // Valid if() with unregistered custom properties in conditions. 112 test_if_with_custom_properties('if(style(--x: 3): true_value)', [['--x', '3']], 'true_value'); 113 test_if_with_custom_properties('if( style( --x : 3 ) : true_value )', [['--x', '3']], 'true_value '); 114 test_if_with_custom_properties('if(style(--x): true_value;)', [['--x', '3']], 'true_value'); 115 test_if_with_custom_properties('if( style(--x) : true_value; )', [['--x', '3']], 'true_value'); 116 test_if_with_custom_properties('if(style(--x: 3): true_value;)', [['--x', '3']], 'true_value'); 117 test_if_with_custom_properties('if(style(--x: 0): true_value;)', [['--x', '0']], 'true_value'); 118 test_if_with_custom_properties('if(style(--x: 0): ;)', [['--x', '0']], ''); 119 test_if_with_custom_properties('if(style(--x: 0): )', [['--x', '0']], ''); 120 test_if_with_custom_properties('if(style(--x: blue): true_value;)', [['--x', 'blue']], 'true_value'); 121 test_if_with_custom_properties('if(style(--x: 3): true_value; else: false_value)', [['--x', '3']], 'true_value'); 122 test_if_with_custom_properties('if(style(--non-existent: var(--non-existent)): true_value; else: false_value)', [], 'false_value'); 123 test_if_with_custom_properties('if(style(--x: initial): true_value; else: false_value)', [['--x', '']], 'false_value'); 124 test_if_with_custom_properties('if(style(--x: initial): true_value; else: false_value)', [['--x', 'initial']], 'true_value'); 125 test_if_with_custom_properties('if(style(--non-existent: initial): true_value; else: false_value)', [], 'true_value'); 126 test_if_with_custom_properties('if(style(--x: initial): true_value; else: false_value)', [['--x', '3']], 'false_value'); 127 test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; 128 else: false_value)`, 129 [['--inherited', 'outer_value']], 130 'true_value'); 131 test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; 132 else: false_value)`, 133 [['--inherited', 'inherit']], 134 'true_value'); 135 test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; 136 else: false_value)`, 137 [['--inherited', 'unset']], 138 'true_value'); 139 test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; 140 else: false_value)`, 141 [['--inherited', 'inner_value']], 142 'false_value'); 143 test_if_with_custom_properties(`if(style(--inherited: unset): true_value; 144 else: false_value)`, 145 [['--inherited', 'outer_value']], 146 'true_value'); 147 test_if_with_custom_properties(`if(style(--inherited: unset): true_value; 148 else: false_value)`, 149 [['--inherited', 'unset']], 150 'true_value'); 151 test_if_with_custom_properties(`if(style(--inherited: unset): true_value; 152 else: false_value)`, 153 [['--inherited', 'inner_value']], 154 'false_value'); 155 test_if_with_custom_properties(`if(style(--inherited: unset): true_value; 156 else: false_value)`, 157 [['--inherited', 'inherit']], 158 'true_value'); 159 test_if_with_custom_properties('if(style(--x: 3): true_value; else:false_value)', [['--x', '3']], 'true_value'); 160 test_if_with_custom_properties('if(style(--x: 3): true_value; else: false_value;)', [['--x', '3']], 'true_value'); 161 test_if_with_custom_properties('if(style(--x: 0): true_value; else: false_value)', [['--x', '3']], 'false_value'); 162 test_if_with_custom_properties('if( style( --x: 0 ) : true_value ; else : false_value)', [['--x', '3']], 'false_value'); 163 test_if_with_custom_properties('if(style(not (--unknown)): true_value;)', [['--x', '3']], 'true_value'); 164 test_if_with_custom_properties(`if(style(--x: 0): true_value; 165 else: )`, 166 [['--x', '3']], 167 ''); 168 test_if_with_custom_properties(`if(style(--x: 3): ; 169 else: false_value)`, 170 [['--x', '3']], 171 ''); 172 test_if_with_custom_properties(`if(style(--non-existent: 0): true_value; 173 else: false_value)`, 174 [['--x', '3']], 175 'false_value'); 176 test_if_with_custom_properties(`if(style(--x: 3): true_value; 177 else: false_value)`, 178 [['--x', 'calc(1 + 2)']], 179 'false_value'); 180 test_if_with_custom_properties(`if(style(--x: calc(1 + 2)): true_value; 181 else: false_value)`, 182 [['--x', '3']], 183 'false_value'); 184 test_if_with_custom_properties(`if(style(--non-existent): true_value; 185 else: false_value;)`, 186 [['--x', '3']], 187 'false_value'); 188 test_if_with_custom_properties(`if(style(style(--x)): true_value; 189 else: false_value;)`, 190 [['--x', '3']], 191 'false_value'); 192 test_if_with_custom_properties(`if(style(var(--x)): true_value; 193 else: false_value;)`, 194 [['--x', '3']], 195 'false_value'); 196 test_if_with_custom_properties(`if(style(--x: revert): true_value; 197 else: false_value)`, 198 [['--x', '11']], 199 'false_value'); 200 test_if_with_custom_properties(`if(style(--x: revert-layer): true_value; 201 else: false_value)`, 202 [['--x', '']], 203 'false_value'); 204 test_if_with_custom_properties(`if(style(--x):a)if(style(--x):b)`, 205 [['--x', '3']], 206 'a/**/b'); 207 test_if_with_custom_properties(`if(style(--x!): true_value; 208 else: false_value)`, 209 [['--x', '3']], 210 'false_value'); 211 test_if_with_custom_properties(`if(style(color: green): true_value; 212 else: false_value)`, 213 [], 214 'false_value'); 215 test_if_with_custom_properties(`if(not style(--non-existent): true_value; 216 else: false_value)`, 217 [], 218 'true_value'); 219 test_if_with_custom_properties(`if(not style(--x: 0): true_value; 220 else: false_value)`, 221 [['--x', '3']], 222 'true_value'); 223 test_if_with_custom_properties(`if(style(--x: 0) and style(--y: 3): true_value; 224 else: false_value)`, 225 [['--x', '3'], ['--y', '3']], 226 'false_value'); 227 test_if_with_custom_properties(`if(style(--x: 3) and style(--y: 3): true_value; 228 else: false_value)`, 229 [['--x', '3'], ['--y', '3']], 230 'true_value'); 231 test_if_with_custom_properties(`if(style(--x: 0) or style(--y: 3): true_value; 232 else: false_value)`, 233 [['--x', '3'], ['--y', '3']], 234 'true_value'); 235 test_if_with_custom_properties(`if(style(--x: 0) or (style(--y: 3) and style(--z: 3)): true_value; 236 else: false_value)`, 237 [['--x', '3'], ['--y', '3'], ['--z', '3']], 238 'true_value'); 239 240 // Valid if() with multiple conditions with unregistered custom properties 241 test_if_with_custom_properties(`if(style(--non-existent): value1; 242 style(--x): value2; 243 else: value3;)`, 244 [['--x', '3']], 245 'value2'); 246 test_if_with_custom_properties(`if(style(--x: 1): value1; 247 style(--x: 2): value2; 248 style(--x: 3): value3;)`, 249 [['--x', '3']], 250 'value3'); 251 test_if_with_custom_properties(`if(style(--x: 1): value1; 252 style(--y: green): value2; 253 style(--z: 3px): value3; 254 else: value4;)`, 255 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 256 'value4'); 257 test_if_with_custom_properties(`if(style(--x: 1): value1; 258 else: value2; 259 style(--y: green): value3; 260 style(--z: 3px): value4;)`, 261 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 262 'value2'); 263 test_if_with_custom_properties(`if(style(--x: 1): value1; 264 else: value2; 265 style(--y: green): value3; 266 style(--z: 3px): value4; 267 else: value5;)`, 268 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 269 'value2'); 270 test_if_with_custom_properties(`if(style(--x: 3): value1; 271 style(--y: green): value2; 272 style(--z: 3px): value3; 273 else: value4;)`, 274 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 275 'value1'); 276 test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red) or (--z: 10px))): true_value; 277 else: false_value;)`, 278 [['--x', '3'], ['--y', 'green'], ['--z', '11px']], 279 'false_value'); 280 test_if_with_custom_properties(`if(style(--x: 3): value1; 281 style((--x: 3) and (not (--y: red) or (--z: 10px))): value2; 282 else: value3;)`, 283 [['--x', '3'], ['--y', 'green'], ['--z', '11px']], 284 'value1'); 285 286 // Valid if() with complicated style queries 287 test_if_with_custom_properties(`if(style((--x: 1) and (--y: green) and (--z: 3px)): true_value; 288 else: false_value;)`, 289 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 290 'false_value'); 291 test_if_with_custom_properties(`if(style((--x: 3) and (--y: red) and (--z: 10px)): true_value; 292 else: false_value;)`, 293 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 294 'true_value'); 295 test_if_with_custom_properties(`if(style((--x: 3) and ((not (--y: red)) or (--z: 10px))): true_value; 296 else: false_value;)`, 297 [['--x', '3'], ['--y', 'red'], ['--z', '11px']], 298 'false_value'); 299 test_if_with_custom_properties(`if(style((--x: 3) and ((not (--y: red)) or (--z: 10px))): true_value; 300 else: false_value;)`, 301 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 302 'true_value'); 303 test_if_with_custom_properties(`if(style((--x: 3) and ((not (--y: red)) or (--z: 10px))): true_value; 304 else: false_value;)`, 305 [['--x', '3'], ['--y', 'green'], ['--z', '11px']], 306 'true_value'); 307 test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red))): value1; 308 style(--z: 15px): value2; 309 else: value3;)`, 310 [['--x', '3'], ['--y', 'green'], ['--z', '11px']], 311 'value1'); 312 test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red))): value1; 313 style(--z: 15px): value2; 314 else: value3;)`, 315 [['--x', '3'], ['--y', 'red'], ['--z', '15px']], 316 'value2'); 317 test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red))): value1; 318 style(--z: 15px): value2; 319 else: value3;)`, 320 [['--x', '3'], ['--y', 'red'], ['--z', '11px']], 321 'value3'); 322 323 // Valid if() with registered custom properties in conditions. 324 test_if_with_custom_properties(`if(style(--string: "success"): true_value; 325 else: false_value)`, 326 [['--string', '"success"']], 327 'true_value'); 328 test_if_with_custom_properties(`if(style(--string: "success"): true_value; 329 else: false_value)`, 330 [['--string', '"fail"']], 331 'false_value'); 332 333 test_if_with_custom_properties(`if(style(--number: 1): true_value; 334 else: false_value)`, 335 [['--number', '1']], 336 'true_value'); 337 test_if_with_custom_properties(`if(style(--number: 3): true_value; 338 else: false_value)`, 339 [['--number', '1']], 340 'false_value'); 341 test_if_with_custom_properties(`if(style(--number: calc(1 + 2)): true_value; 342 else: false_value)`, 343 [['--number', '3']], 344 'true_value'); 345 test_if_with_custom_properties(`if(style(--number: 3): true_value; 346 else: false_value)`, 347 [['--number', 'calc(1 + 2)']], 348 'true_value'); 349 test_if_with_custom_properties(`if(style(--number: revert): true_value; 350 else: false_value)`, 351 [['--number', '3']], 352 'false_value'); 353 test_if_with_custom_properties(`if(style(--number: revert-layer): true_value; 354 else: false_value)`, 355 [['--number', '3']], 356 'false_value'); 357 358 test_if_with_custom_properties(`if(style(--length: 1px): true_value; 359 else: false_value)`, 360 [['--length', '1px']], 361 'true_value'); 362 test_if_with_custom_properties(`if(style(--length: 3): true_value; 363 else: false_value)`, 364 [['--length', '3px']], 365 'false_value'); 366 test_if_with_custom_properties(`if(style(--length: calc(1px + 2px)): true_value; 367 else: false_value)`, 368 [['--length', '3px']], 369 'true_value'); 370 test_if_with_custom_properties(`if(style(--length: 3px): true_value; 371 else: false_value)`, 372 [['--length', 'calc(1px + 2px)']], 373 'true_value'); 374 test_if_with_custom_properties(`if(style(--length: 1em): true_value; 375 else: false_value)`, 376 [['--length', '30px']], 377 'true_value'); 378 test_if_with_custom_properties(`if(style(--length: 30px): true_value; 379 else: false_value)`, 380 [['--length', '1em']], 381 'true_value'); 382 test_if_with_custom_properties(`if(style(--length: 3): true_value; 383 else: false_value)`, 384 [], 385 'false_value'); 386 test_if_with_custom_properties(`if(style(--length: initial): true_value; 387 else: false_value)`, 388 [['--length', '3px']], 389 'true_value'); 390 test_if_with_custom_properties(`if(style(--length: initial): true_value; 391 else: false_value)`, 392 [], 393 'true_value'); 394 test_if_with_custom_properties(`if(style(--length: inherit): true_value; 395 else: false_value)`, 396 [], 397 'false_value'); 398 test_if_with_custom_properties(`if(style(--length: inherit): true_value; 399 else: false_value)`, 400 [['--length', '30px']], 401 'true_value'); 402 test_if_with_custom_properties(`if(style(--length: unset): true_value; 403 else: false_value)`, 404 [['--length', '3px']], 405 'true_value'); 406 test_if_with_custom_properties(`if(style(--length-inherited: inherit): true_value; 407 else: false_value)`, 408 [], 409 'true_value'); 410 test_if_with_custom_properties(`if(style(--length-inherited: inherit): true_value; 411 else: false_value)`, 412 [['--length-inherited', '30px']], 413 'true_value'); 414 test_if_with_custom_properties(`if(style(--length-inherited: inherit): true_value; 415 else: false_value)`, 416 [['--length-inherited', 'unset']], 417 'true_value'); 418 test_if_with_custom_properties(`if(style(--length-inherited: unset): true_value; 419 else: false_value)`, 420 [['--length-inherited', '30px']], 421 'true_value'); 422 test_if_with_custom_properties(`if(style(--length-inherited: unset): true_value; 423 else: false_value)`, 424 [['--length-inherited', 'inherit']], 425 'true_value'); 426 427 test_if_with_custom_properties(`if(style(--percentage: 30%): true_value; 428 else: false_value)`, 429 [['--percentage', '30%']], 430 'true_value'); 431 test_if_with_custom_properties(`if(style(--percentage: 90px): true_value; 432 else: false_value)`, 433 [['--percentage', '30%']], 434 'false_value'); 435 test_if_with_custom_properties(`if(style(--percentage: 30px): true_value; 436 else: false_value)`, 437 [['--percentage', '30%']], 438 'false_value'); 439 test_if_with_custom_properties(`if(style(--percentage: 90%): true_value; 440 else: false_value)`, 441 [['--percentage', '3px']], 442 'false_value'); 443 444 test_if_with_custom_properties(`if(style(--color: green): true_value; 445 else: false_value)`, 446 [['--color', 'green']], 447 'true_value'); 448 test_if_with_custom_properties(`if(style(--color: rgb(0, 128, 0)): true_value; 449 else: false_value)`, 450 [['--color', 'green']], 451 'true_value'); 452 test_if_with_custom_properties(`if(style(--color: green): true_value; 453 else: false_value)`, 454 [['--color', 'rgb(0, 128, 0)']], 455 'true_value'); 456 test_if_with_custom_properties(`if(style(--color: #008000): true_value; 457 else: false_value)`, 458 [['--color', 'green']], 459 'true_value'); 460 test_if_with_custom_properties(`if(style(--color: green): true_value; 461 else: false_value)`, 462 [['--color', '#008000']], 463 'true_value'); 464 test_if_with_custom_properties(`if(style(--color: green): true_value; 465 else: false_value)`, 466 [['--color', 'blue']], 467 'false_value'); 468 469 // Valid if() with substitution function in conditions. 470 test_if_with_custom_properties(`if(style(--x: var(--x)): true_value; 471 else: false_value)`, 472 [['--x', '3']], 473 'true_value'); 474 test_if_with_custom_properties(`if(style(--non-existent: var(--non-existent)): true_value; 475 else: false_value)`, 476 [], 477 'false_value'); 478 test_if_with_custom_properties(`if(style(--x: var(--y)): true_value; 479 else: false_value)`, 480 [['--x', '3'], ['--y', '3']], 481 'true_value'); 482 test_if_with_custom_properties(`if(style(--x: var(--y)): true_value; 483 else: false_value)`, 484 [['--x', '1'], ['--y', '3']], 485 'false_value'); 486 test_if_with_custom_properties(`if(style(--x: attr(data-foo type(<length>))): true_value; 487 else: false_value)`, 488 [['--x', '30px']], 489 'true_value'); 490 test_if_with_custom_properties(`if(style(--x: attr(data-foo)): true_value; 491 else: false_value)`, 492 [['--x', '"30px"']], 493 'true_value'); 494 test_if_with_custom_properties(`if(style(--length: attr(data-foo type(<length>))): true_value; 495 else: false_value)`, 496 [['--length', '30px']], 497 'true_value'); 498 test_if_with_custom_properties(`if(style(--length: attr(data-foo type(<length>))): true_value; 499 else: false_value)`, 500 [['--length', '30']], 501 'false_value'); 502 503 // Valid if() with substitution function in custom properties. 504 test_if_with_custom_properties(`if(style(--x: 3): true_value; 505 else: false_value)`, 506 [['--x', 'var(--y)'], ['--y', '3']], 507 'true_value'); 508 test_if_with_custom_properties(`if(style(--x: 3): true_value; 509 else: false_value)`, 510 [['--x', 'var(--y)'], ['--y', '1']], 511 'false_value'); 512 test_if_with_custom_properties(`if(style(--x: "30px"): true_value; 513 else: false_value)`, 514 [['--x', 'attr(data-foo)']], 515 'true_value'); 516 test_if_with_custom_properties(`if(style(--x: 3): true_value; 517 else: false_value)`, 518 [['--x', 'attr(data-foo)']], 519 'false_value'); 520 test_if_with_custom_properties(`if(style(--length: 30px): true_value; 521 else: false_value)`, 522 [['--length', 'attr(data-foo type(<length>))']], 523 'true_value'); 524 test_if_with_custom_properties(`if(style(--length: 30): true_value; 525 else: false_value)`, 526 [['--length', 'attr(data-foo type(<length>))']], 527 'false_value'); 528 529 // style() queries with range syntax in the condition, literals on both sides of equation 530 test_if_with_custom_properties('if(style(5 > 3): true_value; else: false_value)', [], 'true_value'); 531 test_if_with_custom_properties('if(style(0 = 0): true_value; else: false_value)', [], 'true_value'); 532 test_if_with_custom_properties('if(style(0 = 0px): true_value; else: false_value)', [], 'true_value'); 533 test_if_with_custom_properties('if(style(0 = 0%): true_value; else: false_value)', [], 'false_value'); 534 test_if_with_custom_properties('if(style(0 < 3px): true_value; else: false_value)', [], 'true_value'); 535 test_if_with_custom_properties('if(style(5 > 3 !invalid): true_value; else: false_value)', [], 'false_value'); 536 test_if_with_custom_properties('if(style(5 !invalid > 3): true_value; else: false_value)', [], 'false_value'); 537 test_if_with_custom_properties('if(style(5 > 3 !): true_value; else: false_value)', [], 'false_value'); 538 test_if_with_custom_properties('if(style(5.5 > 3): true_value; else: false_value)', [], 'true_value'); 539 test_if_with_custom_properties('if(style(5.5 > 3.3): true_value; else: false_value)', [], 'true_value'); 540 test_if_with_custom_properties('if(style(10em > 3px): true_value; else: false_value)', [], 'true_value'); 541 test_if_with_custom_properties('if(style(1em > 1px): true_value; else: false_value)', [], 'true_value'); 542 test_if_with_custom_properties('if(style(7px > 3px): true_value; else: false_value)', [], 'true_value'); 543 test_if_with_custom_properties('if(style(3px > 3px): true_value; else: false_value)', [], 'false_value'); 544 test_if_with_custom_properties('if(style(3turn > 3deg): true_value; else: false_value)', [], 'true_value'); 545 test_if_with_custom_properties('if(style(3turn <= 3deg): true_value; else: false_value)', [], 'false_value'); 546 test_if_with_custom_properties('if(style(3% >= 3%): true_value; else: false_value)', [], 'true_value'); 547 test_if_with_custom_properties('if(style(3s > 3ms): true_value; else: false_value)', [], 'true_value'); 548 test_if_with_custom_properties('if(style(3dppx > 96dpi): true_value; else: false_value)', [], 'true_value'); 549 test_if_with_custom_properties(`if(style(--length > initial): true_value; 550 else: false_value)`, 551 [['--length', '5px']], 552 'false_value'); 553 test_if_with_custom_properties('if(style(--x = initial): true_value; else: false_value)', [['--x', 'initial']], 'false_value'); 554 555 // style() queries with range syntax in the condition, simple custom properties in the condition 556 test_if_with_custom_properties('if(style(--x <= 3): true_value; else: false_value)', 557 [['--x', '3']], 558 'true_value'); 559 test_if_with_custom_properties('if(style(--x >= --y): true_value; else: false_value)', 560 [['--x', '3'], ['--y', '3']], 561 'true_value'); 562 test_if_with_custom_properties('if(style(--length > 3px): true_value; else: false_value)', 563 [['--length', '11px']], 564 'true_value'); 565 test_if_with_custom_properties('if(style(--x > 3px): true_value; else: false_value)', 566 [['--x', '11px']], 567 'true_value'); 568 test_if_with_custom_properties('if(style(--number >= 3): true_value; else: false_value)', 569 [['--number', '3']], 570 'true_value'); 571 test_if_with_custom_properties('if(style(--x >= 3): true_value; else: false_value)', 572 [['--x', '3']], 573 'true_value'); 574 test_if_with_custom_properties('if(style(--percentage > 3%): true_value; else: false_value)', 575 [['--percentage', '5%']], 576 'true_value'); 577 test_if_with_custom_properties('if(style(--x > 3%): true_value; else: false_value)', 578 [['--x', '5%']], 579 'true_value'); 580 test_if_with_custom_properties('if(style(--angle < 1turn): true_value; else: false_value)', 581 [['--angle', '1deg']], 582 'true_value'); 583 test_if_with_custom_properties('if(style(--x < 1turn): true_value; else: false_value)', 584 [['--x', '1deg']], 585 'true_value'); 586 test_if_with_custom_properties('if(style(--time <= 1000ms): true_value; else: false_value)', 587 [['--time', '1s']], 588 'true_value'); 589 test_if_with_custom_properties('if(style(var(--time) <= 1000ms): true_value; else: false_value)', 590 [['--time', '1s']], 591 'true_value'); 592 test_if_with_custom_properties('if(style(--x <= 1000ms): true_value; else: false_value)', 593 [['--x', '1s']], 594 'true_value'); 595 test_if_with_custom_properties('if(style(3dppx > --resolution): true_value; else: false_value)', 596 [['--resolution', '96dpi']], 597 'true_value'); 598 test_if_with_custom_properties('if(style(3dppx > --x): true_value; else: false_value)', 599 [['--x', '96dpi']], 600 'true_value'); 601 602 // style() queries with range syntax in the condition, invalid custom properties in the condition 603 test_if_with_custom_properties('if(style(--x + 1 >= --y): true_value; else: false_value)', 604 [['--x', '5'], ['--y', '3']], 605 'false_value'); 606 test_if_with_custom_properties('if(style(--x >= --y + 1): true_value; else: false_value)', 607 [['--x', '5'], ['--y', '3']], 608 'false_value'); 609 test_if_with_custom_properties('if(style(calc(--x + 1) >= --y): true_value; else: false_value)', 610 [['--x', '5'], ['--y', '3']], 611 'false_value'); 612 test_if_with_custom_properties('if(style(--x >= calc(--y + 1)): true_value; else: false_value)', 613 [['--x', '5'], ['--y', '3']], 614 'false_value'); 615 616 // style() queries with range syntax in the condition, custom properties with functions in the condition 617 test_if_with_custom_properties('if(style(--x >= calc(3px + 3px)): true_value; else: false_value)', 618 [['--x', '7px']], 619 'true_value'); 620 test_if_with_custom_properties('if(style(calc(var(--x) + 1) >= var(--y)): true_value; else: false_value)', 621 [['--x', '5'], ['--y', '3']], 622 'true_value'); 623 test_if_with_custom_properties('if(style(var(--x) >= --x): true_value; else: false_value)', 624 [['--x', '3']], 625 'true_value'); 626 627 // style() queries with range syntax in the condition, incompatible types in the range. 628 test_if_with_custom_properties('if(style(3px > 3): true_value; else: false_value)', 629 [], 630 'false_value'); 631 test_if_with_custom_properties('if(style(3em > 3deg): true_value; else: false_value)', 632 [], 633 'false_value'); 634 test_if_with_custom_properties('if(style(1px >= 1%) or style(1px <= 1%): true_value; else: false_value)', 635 [], 636 'false_value'); 637 test_if_with_custom_properties('if(style(--length > 3): true_value; else: false_value)', 638 [['--length', '11em']], 639 'false_value'); 640 test_if_with_custom_properties('if(style(--number > 3px): true_value; else: false_value)', 641 [['--number', '11']], 642 'false_value'); 643 test_if_with_custom_properties('if(style(--x >= 3): true_value; else: false_value)', 644 [['--x', '3px']], 645 'false_value'); 646 test_if_with_custom_properties(`if(style(--length >= 30px): true_value; 647 else: false_value)`, 648 [['--length', 'attr(data-foo type(<length>))']], 649 'true_value'); 650 651 // style() queries with range syntax in the condition, double range 652 test_if_with_custom_properties('if(style(10px <= 10px < 11px): true_value; else: false_value)', [], 'true_value'); 653 test_if_with_custom_properties('if(style(3 < --x <= 5): true_value; else: false_value)', 654 [['--x', '5']], 655 'true_value'); 656 test_if_with_custom_properties('if(style(--x >= --y > --z): true_value; else: false_value)', 657 [['--x', '3'], ['--y', '3'], ['--z', '3']], 658 'false_value'); 659 test_if_with_custom_properties('if(style(--x >= --y > --z): true_value; else: false_value)', 660 [['--x', '3'], ['--y', '3'], ['--z', '1']], 661 'true_value'); 662 663 // media() queries in the condition 664 test_if(`if(media(max-width: 1px): true_value; 665 else: false_value)`, 666 'false_value'); 667 test_if(`if(media((max-width: 1px)): true_value; 668 else: false_value)`, 669 'false_value'); 670 test_if(`if(media(height <= 999999px): true_value; 671 else: false_value)`, 672 'true_value'); 673 test_if(`if(media(min-color: 1): true_value; 674 else: false_value)`, 675 'true_value'); 676 test_if(`if(media((min-color: 1) and (height <= 999999px)): true_value; 677 else: false_value)`, 678 'true_value'); 679 680 // supports() queries in the condition 681 test_if(`if(supports((display: table-cell)): true_value; 682 else: false_value)`, 683 'true_value'); 684 test_if(`if(supports(display: table-cell): true_value; 685 else: false_value)`, 686 'true_value'); 687 test_if(`if(supports(display): true_value; 688 else: false_value)`, 689 'false_value'); 690 test_if(`if(supports(display: invalid): true_value; 691 else: false_value)`, 692 'false_value'); 693 test_if(`if(supports(not (transform-origin: 10em 10em 10em)): true_value; 694 else: false_value)`, 695 'false_value') 696 test_if(`if(supports(selector(h2 > p)): true_value; 697 else: false_value)`, 698 'true_value'); 699 test_if(`if(supports((selector(h2 > p))): true_value; 700 else: false_value)`, 701 'true_value'); 702 test_if(`if(supports((display: table-cell) and (display: list-item) and (display: contents)): true_value; 703 else: false_value)`, 704 'true_value'); 705 test_if(`if(supports((display: invalid) and (display: list-item) and (display: contents)): true_value; 706 else: false_value)`, 707 'false_value'); 708 test_if(`if(supports((display: table-cell) and (invalid: list-item) and (display: contents)): true_value; 709 else: false_value)`, 710 'false_value'); 711 712 // media(), style() and supports() queries in the condition 713 test_if(`if((media(min-width: 1px)) or (style(--x)): true_value; 714 else: false_value)`, 715 'true_value'); 716 test_if(`if((media(height <= 999999px)) and style(--non-existent): true_value; 717 else: false_value)`, 718 'false_value'); 719 test_if(`if((media((min-color: 1) and (height <= 999999px))) and (style(--x)): true_value; 720 else: false_value)`, 721 'true_value'); 722 test_if(`if((media((min-color: 8) and (height <= 600px)) and style(--x: 3px)) or supports(display: table-cell): true_value; 723 else: false_value)`, 724 'true_value'); 725 726 // Invalid if() syntax 727 test_if_with_custom_properties('if()', [['--x', '3']], ''); 728 test_if_with_custom_properties('if(style())', [['--x', '3']], ''); 729 test_if_with_custom_properties('if(style(--x: 3) !)', [['--x', '3']], ''); 730 test_if_with_custom_properties(`if(style(--x: 3) true_value; 731 else: false_value)`, 732 [['--x', '3']], 733 ''); 734 test_if_with_custom_properties(`if(style(--x: 3): true_value; 735 else: false_value!)`, 736 [['--x', '3']], 737 ''); 738 test_if_with_custom_properties(`if(!style(--x: 3): true_value; 739 else: false_value)`, 740 [['--x', '3']], 741 ''); 742 test_if_with_custom_properties(`if(style(--x) and invalid: true_value; 743 else: false_value)`, 744 [['--x', '3']], 745 ''); 746 test_if_with_custom_properties(`if(invalid or style(--x): true_value; 747 else: false_value)`, 748 [['--x', '3']], 749 ''); 750 test_if_with_custom_properties(`if(style(not (--x: 5) or (--z: 10px)): true_value; 751 else: false_value;)`, 752 [['--x', '3'], ['--y', 'green'], ['--z', '11px']], 753 ''); 754 755 // IACVT 756 test_if_with_custom_properties('if(style(--x: 0): true_value;)', [['--x', '3']], ''); 757 test_if_with_custom_properties('if(style(--non-existent): true_value;)', [['--x', '3']], ''); 758 test_if_with_custom_properties('if(style(--non-existent: 3): true_value;)', [['--x', '3']], ''); 759 test_if_with_custom_properties('if(style(--invalid): value)', [], ''); 760 test_if_with_custom_properties('if(style(--invalid): var(--x))', [['--x', 'true_value']], ''); 761 test_if_with_custom_properties(`if(style(--x: 1): value1; 762 style(--y: green): value2; 763 style(--z: 3px): value3;)`, 764 [['--x', '3'], ['--y', 'red'], ['--z', '10px']], 765 ''); 766 767 // Equality of attr-tainted if() 768 test_if_with_custom_properties('if(style(--x: attr(data-attr type(*))): true_value; else: false_value)', [['--x', 'attr']], 'true_value'); 769 test_if_with_custom_properties('if(style(--x: attr): true_value; else: false_value)', [['--x', 'attr(data-attr type(*))']], 'true_value'); 770 </script>