| <!DOCTYPE html> | |
| <title>CSS Values and Units Test: CSS inline if() function</title> | |
| <meta name="assert" content="Test inline if() function"> | |
| <link rel="help" href="https://drafts.csswg.org/css-values-5/#if-notation"> | |
| <script src="/resources/testharness.js"></script> | |
| <script src="/resources/testharnessreport.js"></script> | |
| <html> | |
| <style> | |
| @property --string { | |
| syntax: "<string>"; | |
| inherits: true; | |
| initial-value: ""; | |
| } | |
| @property --color { | |
| syntax: "<color>"; | |
| inherits: true; | |
| initial-value: blue; | |
| } | |
| @property --length { | |
| syntax: "<length>"; | |
| inherits: false; | |
| initial-value: 3px; | |
| } | |
| @property --length-inherited { | |
| syntax: "<length>"; | |
| inherits: true; | |
| initial-value: 3px; | |
| } | |
| @property --percentage { | |
| syntax: "<percentage>"; | |
| inherits: true; | |
| initial-value: 30%; | |
| } | |
| @property --number { | |
| syntax: "<number>"; | |
| inherits: true; | |
| initial-value: 3; | |
| } | |
| @property --angle { | |
| syntax: "<angle>"; | |
| inherits: true; | |
| initial-value: 3deg; | |
| } | |
| @property --time { | |
| syntax: "<time>"; | |
| inherits: true; | |
| initial-value: 3s; | |
| } | |
| @property --resolution { | |
| syntax: "<resolution>"; | |
| inherits: true; | |
| initial-value: 3dpi; | |
| } | |
| div { | |
| font-size: 30px; | |
| } | |
| .outer { | |
| --inherited: outer_value; | |
| --number: 30; | |
| --x: 11; | |
| --length: 30px; | |
| --length-inherited: 30px; | |
| } | |
| .inner { | |
| --inherited: inner_value; | |
| } | |
| </style> | |
| <body> | |
| <div class="outer"> | |
| <div id="if" class="inner" data-foo="30px" data-attr="attr"></div> | |
| </div> | |
| </body> | |
| </html> | |
| <script> | |
| function set_custom_properties(customPropertiesData) { | |
| customPropertiesData.forEach(entry => { | |
| const [customPropertyName, customPropertyValue] = entry; | |
| document.getElementById("if").style.setProperty(customPropertyName, customPropertyValue); | |
| }); | |
| } | |
| function clear_custom_properties(customPropertiesData) { | |
| customPropertiesData.forEach(entry => { | |
| const [customPropertyName, customPropertyValue] = entry; | |
| document.getElementById("if").style.removeProperty(customPropertyName); | |
| }); | |
| } | |
| function test_if_with_custom_properties(ifValue, customPropertiesData, expectedValue) { | |
| set_custom_properties(customPropertiesData); | |
| var elem = document.getElementById("if"); | |
| var property = "--property"; | |
| elem.style.setProperty(property, ifValue); | |
| test(() => { | |
| assert_equals(window.getComputedStyle(elem).getPropertyValue(property), | |
| expectedValue, | |
| '"' + ifValue + '" should be substituted to "' + expectedValue + '".'); | |
| }); | |
| clear_custom_properties(customPropertiesData); | |
| elem.style.removeProperty(property); | |
| } | |
| function test_if(ifValue, expectedValue) { | |
| test_if_with_custom_properties(ifValue, [], expectedValue); | |
| } | |
| // Valid if() with unregistered custom properties in conditions. | |
| test_if_with_custom_properties('if(style(--x: 3): true_value)', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties('if( style( --x : 3 ) : true_value )', [['--x', '3']], 'true_value '); | |
| test_if_with_custom_properties('if(style(--x): true_value;)', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties('if( style(--x) : true_value; )', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: 3): true_value;)', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: 0): true_value;)', [['--x', '0']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: 0): ;)', [['--x', '0']], ''); | |
| test_if_with_custom_properties('if(style(--x: 0): )', [['--x', '0']], ''); | |
| test_if_with_custom_properties('if(style(--x: blue): true_value;)', [['--x', 'blue']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: 3): true_value; else: false_value)', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--non-existent: var(--non-existent)): true_value; else: false_value)', [], 'false_value'); | |
| test_if_with_custom_properties('if(style(--x: initial): true_value; else: false_value)', [['--x', '']], 'false_value'); | |
| test_if_with_custom_properties('if(style(--x: initial): true_value; else: false_value)', [['--x', 'initial']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--non-existent: initial): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: initial): true_value; else: false_value)', [['--x', '3']], 'false_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'outer_value']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'inherit']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'unset']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: inherit): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'inner_value']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: unset): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'outer_value']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: unset): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'unset']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: unset): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'inner_value']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--inherited: unset): true_value; | |
| else: false_value)`, | |
| [['--inherited', 'inherit']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: 3): true_value; else:false_value)', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: 3): true_value; else: false_value;)', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: 0): true_value; else: false_value)', [['--x', '3']], 'false_value'); | |
| test_if_with_custom_properties('if( style( --x: 0 ) : true_value ; else : false_value)', [['--x', '3']], 'false_value'); | |
| test_if_with_custom_properties('if(style(not (--unknown)): true_value;)', [['--x', '3']], 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: 0): true_value; | |
| else: )`, | |
| [['--x', '3']], | |
| ''); | |
| test_if_with_custom_properties(`if(style(--x: 3): ; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| ''); | |
| test_if_with_custom_properties(`if(style(--non-existent: 0): true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: 3): true_value; | |
| else: false_value)`, | |
| [['--x', 'calc(1 + 2)']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: calc(1 + 2)): true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--non-existent): true_value; | |
| else: false_value;)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(style(--x)): true_value; | |
| else: false_value;)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(var(--x)): true_value; | |
| else: false_value;)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: revert): true_value; | |
| else: false_value)`, | |
| [['--x', '11']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: revert-layer): true_value; | |
| else: false_value)`, | |
| [['--x', '']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x):a)if(style(--x):b)`, | |
| [['--x', '3']], | |
| 'a/**/b'); | |
| test_if_with_custom_properties(`if(style(--x!): true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(color: green): true_value; | |
| else: false_value)`, | |
| [], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(not style(--non-existent): true_value; | |
| else: false_value)`, | |
| [], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(not style(--x: 0): true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: 0) and style(--y: 3): true_value; | |
| else: false_value)`, | |
| [['--x', '3'], ['--y', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: 3) and style(--y: 3): true_value; | |
| else: false_value)`, | |
| [['--x', '3'], ['--y', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: 0) or style(--y: 3): true_value; | |
| else: false_value)`, | |
| [['--x', '3'], ['--y', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: 0) or (style(--y: 3) and style(--z: 3)): true_value; | |
| else: false_value)`, | |
| [['--x', '3'], ['--y', '3'], ['--z', '3']], | |
| 'true_value'); | |
| // Valid if() with multiple conditions with unregistered custom properties | |
| test_if_with_custom_properties(`if(style(--non-existent): value1; | |
| style(--x): value2; | |
| else: value3;)`, | |
| [['--x', '3']], | |
| 'value2'); | |
| test_if_with_custom_properties(`if(style(--x: 1): value1; | |
| style(--x: 2): value2; | |
| style(--x: 3): value3;)`, | |
| [['--x', '3']], | |
| 'value3'); | |
| test_if_with_custom_properties(`if(style(--x: 1): value1; | |
| style(--y: green): value2; | |
| style(--z: 3px): value3; | |
| else: value4;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| 'value4'); | |
| test_if_with_custom_properties(`if(style(--x: 1): value1; | |
| else: value2; | |
| style(--y: green): value3; | |
| style(--z: 3px): value4;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| 'value2'); | |
| test_if_with_custom_properties(`if(style(--x: 1): value1; | |
| else: value2; | |
| style(--y: green): value3; | |
| style(--z: 3px): value4; | |
| else: value5;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| 'value2'); | |
| test_if_with_custom_properties(`if(style(--x: 3): value1; | |
| style(--y: green): value2; | |
| style(--z: 3px): value3; | |
| else: value4;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| 'value1'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red) or (--z: 10px))): true_value; | |
| else: false_value;)`, | |
| [['--x', '3'], ['--y', 'green'], ['--z', '11px']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: 3): value1; | |
| style((--x: 3) and (not (--y: red) or (--z: 10px))): value2; | |
| else: value3;)`, | |
| [['--x', '3'], ['--y', 'green'], ['--z', '11px']], | |
| 'value1'); | |
| // Valid if() with complicated style queries | |
| test_if_with_custom_properties(`if(style((--x: 1) and (--y: green) and (--z: 3px)): true_value; | |
| else: false_value;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and (--y: red) and (--z: 10px)): true_value; | |
| else: false_value;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and ((not (--y: red)) or (--z: 10px))): true_value; | |
| else: false_value;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '11px']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and ((not (--y: red)) or (--z: 10px))): true_value; | |
| else: false_value;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and ((not (--y: red)) or (--z: 10px))): true_value; | |
| else: false_value;)`, | |
| [['--x', '3'], ['--y', 'green'], ['--z', '11px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red))): value1; | |
| style(--z: 15px): value2; | |
| else: value3;)`, | |
| [['--x', '3'], ['--y', 'green'], ['--z', '11px']], | |
| 'value1'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red))): value1; | |
| style(--z: 15px): value2; | |
| else: value3;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '15px']], | |
| 'value2'); | |
| test_if_with_custom_properties(`if(style((--x: 3) and (not (--y: red))): value1; | |
| style(--z: 15px): value2; | |
| else: value3;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '11px']], | |
| 'value3'); | |
| // Valid if() with registered custom properties in conditions. | |
| test_if_with_custom_properties(`if(style(--string: "success"): true_value; | |
| else: false_value)`, | |
| [['--string', '"success"']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--string: "success"): true_value; | |
| else: false_value)`, | |
| [['--string', '"fail"']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--number: 1): true_value; | |
| else: false_value)`, | |
| [['--number', '1']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--number: 3): true_value; | |
| else: false_value)`, | |
| [['--number', '1']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--number: calc(1 + 2)): true_value; | |
| else: false_value)`, | |
| [['--number', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--number: 3): true_value; | |
| else: false_value)`, | |
| [['--number', 'calc(1 + 2)']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--number: revert): true_value; | |
| else: false_value)`, | |
| [['--number', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--number: revert-layer): true_value; | |
| else: false_value)`, | |
| [['--number', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--length: 1px): true_value; | |
| else: false_value)`, | |
| [['--length', '1px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: 3): true_value; | |
| else: false_value)`, | |
| [['--length', '3px']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--length: calc(1px + 2px)): true_value; | |
| else: false_value)`, | |
| [['--length', '3px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: 3px): true_value; | |
| else: false_value)`, | |
| [['--length', 'calc(1px + 2px)']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: 1em): true_value; | |
| else: false_value)`, | |
| [['--length', '30px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: 30px): true_value; | |
| else: false_value)`, | |
| [['--length', '1em']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: 3): true_value; | |
| else: false_value)`, | |
| [], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--length: initial): true_value; | |
| else: false_value)`, | |
| [['--length', '3px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: initial): true_value; | |
| else: false_value)`, | |
| [], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: inherit): true_value; | |
| else: false_value)`, | |
| [], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--length: inherit): true_value; | |
| else: false_value)`, | |
| [['--length', '30px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: unset): true_value; | |
| else: false_value)`, | |
| [['--length', '3px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length-inherited: inherit): true_value; | |
| else: false_value)`, | |
| [], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length-inherited: inherit): true_value; | |
| else: false_value)`, | |
| [['--length-inherited', '30px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length-inherited: inherit): true_value; | |
| else: false_value)`, | |
| [['--length-inherited', 'unset']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length-inherited: unset): true_value; | |
| else: false_value)`, | |
| [['--length-inherited', '30px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length-inherited: unset): true_value; | |
| else: false_value)`, | |
| [['--length-inherited', 'inherit']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--percentage: 30%): true_value; | |
| else: false_value)`, | |
| [['--percentage', '30%']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--percentage: 90px): true_value; | |
| else: false_value)`, | |
| [['--percentage', '30%']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--percentage: 30px): true_value; | |
| else: false_value)`, | |
| [['--percentage', '30%']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--percentage: 90%): true_value; | |
| else: false_value)`, | |
| [['--percentage', '3px']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--color: green): true_value; | |
| else: false_value)`, | |
| [['--color', 'green']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--color: rgb(0, 128, 0)): true_value; | |
| else: false_value)`, | |
| [['--color', 'green']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--color: green): true_value; | |
| else: false_value)`, | |
| [['--color', 'rgb(0, 128, 0)']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--color: #008000): true_value; | |
| else: false_value)`, | |
| [['--color', 'green']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--color: green): true_value; | |
| else: false_value)`, | |
| [['--color', '#008000']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--color: green): true_value; | |
| else: false_value)`, | |
| [['--color', 'blue']], | |
| 'false_value'); | |
| // Valid if() with substitution function in conditions. | |
| test_if_with_custom_properties(`if(style(--x: var(--x)): true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--non-existent: var(--non-existent)): true_value; | |
| else: false_value)`, | |
| [], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: var(--y)): true_value; | |
| else: false_value)`, | |
| [['--x', '3'], ['--y', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: var(--y)): true_value; | |
| else: false_value)`, | |
| [['--x', '1'], ['--y', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: attr(data-foo type(<length>))): true_value; | |
| else: false_value)`, | |
| [['--x', '30px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: attr(data-foo)): true_value; | |
| else: false_value)`, | |
| [['--x', '"30px"']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: attr(data-foo type(<length>))): true_value; | |
| else: false_value)`, | |
| [['--length', '30px']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: attr(data-foo type(<length>))): true_value; | |
| else: false_value)`, | |
| [['--length', '30']], | |
| 'false_value'); | |
| // Valid if() with substitution function in custom properties. | |
| test_if_with_custom_properties(`if(style(--x: 3): true_value; | |
| else: false_value)`, | |
| [['--x', 'var(--y)'], ['--y', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: 3): true_value; | |
| else: false_value)`, | |
| [['--x', 'var(--y)'], ['--y', '1']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--x: "30px"): true_value; | |
| else: false_value)`, | |
| [['--x', 'attr(data-foo)']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--x: 3): true_value; | |
| else: false_value)`, | |
| [['--x', 'attr(data-foo)']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--length: 30px): true_value; | |
| else: false_value)`, | |
| [['--length', 'attr(data-foo type(<length>))']], | |
| 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length: 30): true_value; | |
| else: false_value)`, | |
| [['--length', 'attr(data-foo type(<length>))']], | |
| 'false_value'); | |
| // style() queries with range syntax in the condition, literals on both sides of equation | |
| test_if_with_custom_properties('if(style(5 > 3): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(0 = 0): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(0 = 0px): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(0 = 0%): true_value; else: false_value)', [], 'false_value'); | |
| test_if_with_custom_properties('if(style(0 < 3px): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(5 > 3 !invalid): true_value; else: false_value)', [], 'false_value'); | |
| test_if_with_custom_properties('if(style(5 !invalid > 3): true_value; else: false_value)', [], 'false_value'); | |
| test_if_with_custom_properties('if(style(5 > 3 !): true_value; else: false_value)', [], 'false_value'); | |
| test_if_with_custom_properties('if(style(5.5 > 3): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(5.5 > 3.3): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(10em > 3px): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(1em > 1px): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(7px > 3px): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(3px > 3px): true_value; else: false_value)', [], 'false_value'); | |
| test_if_with_custom_properties('if(style(3turn > 3deg): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(3turn <= 3deg): true_value; else: false_value)', [], 'false_value'); | |
| test_if_with_custom_properties('if(style(3% >= 3%): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(3s > 3ms): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(3dppx > 96dpi): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties(`if(style(--length > initial): true_value; | |
| else: false_value)`, | |
| [['--length', '5px']], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(--x = initial): true_value; else: false_value)', [['--x', 'initial']], 'false_value'); | |
| // style() queries with range syntax in the condition, simple custom properties in the condition | |
| test_if_with_custom_properties('if(style(--x <= 3): true_value; else: false_value)', | |
| [['--x', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x >= --y): true_value; else: false_value)', | |
| [['--x', '3'], ['--y', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--length > 3px): true_value; else: false_value)', | |
| [['--length', '11px']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x > 3px): true_value; else: false_value)', | |
| [['--x', '11px']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--number >= 3): true_value; else: false_value)', | |
| [['--number', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x >= 3): true_value; else: false_value)', | |
| [['--x', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--percentage > 3%): true_value; else: false_value)', | |
| [['--percentage', '5%']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x > 3%): true_value; else: false_value)', | |
| [['--x', '5%']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--angle < 1turn): true_value; else: false_value)', | |
| [['--angle', '1deg']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x < 1turn): true_value; else: false_value)', | |
| [['--x', '1deg']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--time <= 1000ms): true_value; else: false_value)', | |
| [['--time', '1s']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(var(--time) <= 1000ms): true_value; else: false_value)', | |
| [['--time', '1s']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x <= 1000ms): true_value; else: false_value)', | |
| [['--x', '1s']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(3dppx > --resolution): true_value; else: false_value)', | |
| [['--resolution', '96dpi']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(3dppx > --x): true_value; else: false_value)', | |
| [['--x', '96dpi']], | |
| 'true_value'); | |
| // style() queries with range syntax in the condition, invalid custom properties in the condition | |
| test_if_with_custom_properties('if(style(--x + 1 >= --y): true_value; else: false_value)', | |
| [['--x', '5'], ['--y', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(--x >= --y + 1): true_value; else: false_value)', | |
| [['--x', '5'], ['--y', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(calc(--x + 1) >= --y): true_value; else: false_value)', | |
| [['--x', '5'], ['--y', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(--x >= calc(--y + 1)): true_value; else: false_value)', | |
| [['--x', '5'], ['--y', '3']], | |
| 'false_value'); | |
| // style() queries with range syntax in the condition, custom properties with functions in the condition | |
| test_if_with_custom_properties('if(style(--x >= calc(3px + 3px)): true_value; else: false_value)', | |
| [['--x', '7px']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(calc(var(--x) + 1) >= var(--y)): true_value; else: false_value)', | |
| [['--x', '5'], ['--y', '3']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(var(--x) >= --x): true_value; else: false_value)', | |
| [['--x', '3']], | |
| 'true_value'); | |
| // style() queries with range syntax in the condition, incompatible types in the range. | |
| test_if_with_custom_properties('if(style(3px > 3): true_value; else: false_value)', | |
| [], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(3em > 3deg): true_value; else: false_value)', | |
| [], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(1px >= 1%) or style(1px <= 1%): true_value; else: false_value)', | |
| [], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(--length > 3): true_value; else: false_value)', | |
| [['--length', '11em']], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(--number > 3px): true_value; else: false_value)', | |
| [['--number', '11']], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(--x >= 3): true_value; else: false_value)', | |
| [['--x', '3px']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(--length >= 30px): true_value; | |
| else: false_value)`, | |
| [['--length', 'attr(data-foo type(<length>))']], | |
| 'true_value'); | |
| // style() queries with range syntax in the condition, double range | |
| test_if_with_custom_properties('if(style(10px <= 10px < 11px): true_value; else: false_value)', [], 'true_value'); | |
| test_if_with_custom_properties('if(style(3 < --x <= 5): true_value; else: false_value)', | |
| [['--x', '5']], | |
| 'true_value'); | |
| test_if_with_custom_properties('if(style(--x >= --y > --z): true_value; else: false_value)', | |
| [['--x', '3'], ['--y', '3'], ['--z', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties('if(style(--x >= --y > --z): true_value; else: false_value)', | |
| [['--x', '3'], ['--y', '3'], ['--z', '1']], | |
| 'true_value'); | |
| // media() queries in the condition | |
| test_if(`if(media(max-width: 1px): true_value; | |
| else: false_value)`, | |
| 'false_value'); | |
| test_if(`if(media((max-width: 1px)): true_value; | |
| else: false_value)`, | |
| 'false_value'); | |
| test_if(`if(media(height <= 999999px): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if(media(min-color: 1): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if(media((min-color: 1) and (height <= 999999px)): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| // supports() queries in the condition | |
| test_if(`if(supports((display: table-cell)): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if(supports(display: table-cell): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if(supports(display): true_value; | |
| else: false_value)`, | |
| 'false_value'); | |
| test_if(`if(supports(display: invalid): true_value; | |
| else: false_value)`, | |
| 'false_value'); | |
| test_if(`if(supports(not (transform-origin: 10em 10em 10em)): true_value; | |
| else: false_value)`, | |
| 'false_value') | |
| test_if(`if(supports(selector(h2 > p)): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if(supports((selector(h2 > p))): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if(supports((display: table-cell) and (display: list-item) and (display: contents)): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if(supports((display: invalid) and (display: list-item) and (display: contents)): true_value; | |
| else: false_value)`, | |
| 'false_value'); | |
| test_if(`if(supports((display: table-cell) and (invalid: list-item) and (display: contents)): true_value; | |
| else: false_value)`, | |
| 'false_value'); | |
| // media(), style() and supports() queries in the condition | |
| test_if(`if((media(min-width: 1px)) or (style(--x)): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if((media(height <= 999999px)) and style(--non-existent): true_value; | |
| else: false_value)`, | |
| 'false_value'); | |
| test_if(`if((media((min-color: 1) and (height <= 999999px))) and (style(--x)): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| test_if(`if((media((min-color: 8) and (height <= 600px)) and style(--x: 3px)) or supports(display: table-cell): true_value; | |
| else: false_value)`, | |
| 'true_value'); | |
| // Invalid if() syntax | |
| test_if_with_custom_properties('if()', [['--x', '3']], ''); | |
| test_if_with_custom_properties('if(style())', [['--x', '3']], ''); | |
| test_if_with_custom_properties('if(style(--x: 3) !)', [['--x', '3']], ''); | |
| test_if_with_custom_properties(`if(style(--x: 3) true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| ''); | |
| test_if_with_custom_properties(`if(style(--x: 3): true_value; | |
| else: false_value!)`, | |
| [['--x', '3']], | |
| ''); | |
| test_if_with_custom_properties(`if(!style(--x: 3): true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| ''); | |
| test_if_with_custom_properties(`if(style(--x) and invalid: true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(invalid or style(--x): true_value; | |
| else: false_value)`, | |
| [['--x', '3']], | |
| 'false_value'); | |
| test_if_with_custom_properties(`if(style(not (--x: 5) or (--z: 10px)): true_value; | |
| else: false_value;)`, | |
| [['--x', '3'], ['--y', 'green'], ['--z', '11px']], | |
| 'false_value'); | |
| // IACVT | |
| test_if_with_custom_properties('if(style(--x: 0): true_value;)', [['--x', '3']], ''); | |
| test_if_with_custom_properties('if(style(--non-existent): true_value;)', [['--x', '3']], ''); | |
| test_if_with_custom_properties('if(style(--non-existent: 3): true_value;)', [['--x', '3']], ''); | |
| test_if_with_custom_properties('if(style(--invalid): value)', [], ''); | |
| test_if_with_custom_properties('if(style(--invalid): var(--x))', [['--x', 'true_value']], ''); | |
| test_if_with_custom_properties(`if(style(--x: 1): value1; | |
| style(--y: green): value2; | |
| style(--z: 3px): value3;)`, | |
| [['--x', '3'], ['--y', 'red'], ['--z', '10px']], | |
| ''); | |
| // Equality of attr-tainted if() | |
| test_if_with_custom_properties('if(style(--x: attr(data-attr type(*))): true_value; else: false_value)', [['--x', 'attr']], 'true_value'); | |
| test_if_with_custom_properties('if(style(--x: attr): true_value; else: false_value)', [['--x', 'attr(data-attr type(*))']], 'true_value'); | |
| // The else keyword is recognized after substitution, so a var() that expands to else matches. | |
| test_if_with_custom_properties('if(var(--else): true_value; else: false_value)', [['--else', 'else']], 'true_value'); | |
| </script> |