| <!DOCTYPE html> |
| <title>CSS Values and Units Test: CSS if() function cycles</title> |
| <meta name="assert" content="Test cycles in 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> |
| |
| <div id="attr"></div> |
| <div id="expected"></div> |
| |
| <body> |
| <div id="if"></div> |
| </body> |
| |
| <script> |
| function set_custom_properties(customPropertiesData) { |
| customPropertiesData.forEach(entry => { |
| const [customPropertyName, customPropertyValue] = entry; |
| document.getElementById("if").style.setProperty(customPropertyName, customPropertyValue); |
| }); |
| } |
| |
| function test_if(ifValue, customPropertiesData, expectedValue) { |
| set_custom_properties(customPropertiesData); |
| var elem = document.getElementById("if"); |
| var property = "--prop"; |
| elem.style.setProperty(property, ifValue); |
| |
| test(() => { |
| assert_equals(window.getComputedStyle(elem).getPropertyValue(property), |
| expectedValue, |
| '"' + ifValue + '" should be substituted to "' + expectedValue + '".'); |
| }); |
| |
| elem.style.setProperty(property, ''); |
| } |
| |
| var ifElem = document.getElementById("if"); |
| |
| // var() cycle in declaration value |
| // |
| // Note: 'test_if()' places the 'if()' in a custom property '--prop'. |
| test_if(`if(style(--x: 3): var(--prop); else: value)`, |
| [['--x', '3']], |
| ''); |
| test_if(`if(style(--x: 3): value; else: var(--prop))`, |
| [['--x', '0']], |
| ''); |
| |
| // attr() cycle in declaration value |
| ifElem.setAttribute('data-foo', 'var(--prop)'); |
| test_if(`if(style(--x: 3): attr(data-foo type(*)); else: value)`, |
| [['--x', '3']], |
| ''); |
| |
| ifElem.setAttribute('data-foo', 'var(--prop)'); |
| test_if(`if(style(--x: 3): value; else: attr(data-foo type(*)))`, |
| [['--x', '0']], |
| ''); |
| |
| // Cycle in the condition |
| // |
| // Note: 'test_if()' places the 'if()' in a custom property '--prop'. |
| test_if(`if(style(--prop): var(--prop); else: value)`, |
| [], |
| ''); |
| test_if(`if(style(--x): var(--prop); else: value)`, |
| [['--x', 'var(--prop)']], |
| ''); |
| test_if(`if(style(--prop: 3): true_value; |
| else: false_value)`, |
| [['--prop', '3']], |
| ''); |
| test_if(`if(style(--x: 3): true_value; |
| else: false_value)`, |
| [['--x', 'var(--prop)']], |
| ''); |
| test_if(`if(style(not (--prop)): true_value; |
| else: false_value)`, |
| [], |
| ''); |
| test_if(`if(style(not (--x: var(--y))): true_value; |
| else: false_value)`, |
| [['--x', '11'], ['--y', 'var(--prop)']], |
| ''); |
| test_if(`if(style((--prop) or (--y)): true_value; |
| else: false_value)`, |
| [['--y', '3']], |
| ''); |
| test_if(`if(style((--prop) and (--y)): true_value; |
| else: false_value)`, |
| [['--y', '3']], |
| ''); |
| test_if(`if(style(--x: var(--prop)): true_value; |
| else: false_value)`, |
| [['--x', '3']], |
| ''); |
| test_if(`if(style(--x: var(--y)): true_value; |
| else: false_value)`, |
| [['--x', '3'], ['--y', 'var(--prop)']], |
| ''); |
| |
| ifElem.setAttribute('data-foo', 'var(--prop)'); |
| test_if(`if(style(--x: 3): true_value; |
| else: false_value)`, |
| [['--x', 'attr(data-foo type(*))']], |
| ''); |
| |
| ifElem.setAttribute('data-foo', 'var(--prop)'); |
| test_if(`if(style(--x: 3): true_value; |
| else: false_value)`, |
| [['--x', 'var(--y)'], ['--y', 'attr(data-foo type(*))']], |
| ''); |
| |
| ifElem.setAttribute('data-foo', 'var(--prop)'); |
| test_if(`if(style(--x: attr(data-foo type(*))): true_value; |
| else: false_value)`, |
| [['--x', '30px']], |
| ''); |
| |
| // var() cycle in condition's custom property |
| test_if(`if(style(--y): true_value; |
| else: false_value)`, |
| [['--y', 'var(--x)'], ['--x', 'var(--y)']], |
| 'false_value'); |
| test_if(`if(style(not (--x: var(--y))): true_value; |
| else: false_value)`, |
| [['--x', '11'], ['--y', 'var(--y)']], |
| 'true_value'); |
| test_if(`if(style(not (--x: var(--y))): true_value; |
| else: false_value)`, |
| [['--x', '11'], ['--y', 'var(--y)']], |
| 'true_value'); |
| test_if(`if(style((--x) or (--y)): true_value; |
| else: false_value)`, |
| [['--x', 'var(--x)'], ['--y', '3']], |
| 'true_value'); |
| test_if(`if(style((--x) and (--y)): true_value; |
| else: false_value)`, |
| [['--x', 'var(--x)'], ['--y', '3']], |
| 'false_value'); |
| test_if(`if(style((not (--z)) or (--y)): true_value; |
| else: false_value)`, |
| [['--z', 'var(--x)'], ['--x', 'var(--z)'], ['--y', '3']], |
| 'true_value'); |
| test_if(`if(style((not (--z)) and (--y)): true_value; |
| else: false_value)`, |
| [['--z', 'var(--x)'], ['--x', 'var(--z)'], ['--y', '3']], |
| 'true_value'); |
| |
| // cycle with var() and attr() in condition's custom property |
| ifElem.setAttribute('data-foo', 'var(--x)'); |
| test_if(`if(style(--x: 3): true_value; |
| else: false_value)`, |
| [['--x', 'attr(data-foo type(*))']], |
| 'false_value'); |
| |
| ifElem.setAttribute('data-foo', 'var(--y)'); |
| test_if(`if(style(--x: 3): true_value; |
| else: false_value)`, |
| [['--x', 'var(--y)'], ['--y', 'attr(data-foo type(*))']], |
| 'false_value'); |
| |
| // var() cycle in condition specified value |
| test_if(`if(style(--x: var(--y)): true_value; |
| else: false_value)`, |
| [['--x', '3'], ['--y', 'var(--z)'], ['--z', 'var(--y)']], |
| 'false_value'); |
| test_if(`if(style(--x: var(--y)): true_value; |
| else: false_value)`, |
| [['--x', '3'], ['--y', 'var(--y)']], |
| 'false_value'); |
| |
| // attr() cycle in condition specified value |
| ifElem.setAttribute('data-foo', 'attr(data-foo type(*))'); |
| test_if(`if(style(--x: attr(data-foo type(*))): true_value; |
| else: false_value)`, |
| [['--x', '30px']], |
| 'false_value'); |
| |
| ifElem.setAttribute('data-foo', '30px'); |
| test_if(`if(style(--x: attr(data-foo, var(--y))): true_value; |
| else: false_value)`, |
| [['--x', '"30px"'], ['--y', 'var(--y)']], |
| 'true_value'); |
| |
| // self cycle in unused condition |
| test_if(`if(style(--x: 0): value1; style(--prop): value2)`, |
| [['--x', '0']], |
| 'value1'); |
| test_if(`if(style(--x: 3): value1; |
| style(--y: 3): value2; |
| else: value3)`, |
| [['--x', '3'], ['--y', 'var(--prop)']], |
| 'value1'); |
| |
| // cycle in unused condition |
| test_if(`if(style(--x: 0): value1; style(--y): value2)`, |
| [['--x', '0'], ['--y', 'var(--y)']], |
| 'value1'); |
| test_if(`if(style(--x: 3): value1; |
| style(--y: 3): value2; |
| else: value3)`, |
| [['--x', '3'], ['--y', 'var(--y)']], |
| 'value1'); |
| |
| // var() cycle in unused declaration value |
| test_if(`if(style(--x: 0): var(--prop); else: value)`, |
| [['--x', '3']], |
| 'value'); |
| test_if(`if(style(--x: 0): value; else: var(--prop))`, |
| [['--x', '0']], |
| 'value'); |
| test_if(`if(style(--x: 3): value1; |
| style(--y: 3): var(--prop); |
| else: value3)`, |
| [['--x', '3'], ['--y', '0']], |
| 'value1'); |
| test_if(`if(style(--x: 3): var(--prop); |
| style(--y: 3): var(--prop); |
| else: value3)`, |
| [['--x', '0'], ['--y', '0']], |
| 'value3'); |
| |
| // no cycle |
| test_if(`if(style(--x: 3): var(--x); |
| else: value)`, |
| [['--x', '3']], |
| '3'); |
| test_if(`if(style(--x: var(--y)): var(--y); |
| else: value)`, |
| [['--x', '3'], ['--y', '3']], |
| '3'); |
| test_if(`if(style(--x: var(--x)): true_value; |
| else: false_value)`, |
| [['--x', '3']], |
| 'true_value'); |
| test_if(`if(style(--non-existent: var(--non-existent)): true_value; |
| else: false_value)`, |
| [], |
| 'false_value'); |
| test_if(`if(style(--x: 3): true_value; |
| else: var(--x))`, |
| [['--x', '1']], |
| '1'); |
| test_if(`if(style(--x: var(--x)): value1; |
| style(--x: 3): value2; |
| else: value3;)`, |
| [['--x', '3']], |
| 'value1'); |
| test_if(`if(style(--x: var(--y)): value1; |
| style(--z: 3): value2; |
| else: value3;)`, |
| [['--x', 'var(--y)'], ['--y', 'var(--y)'], ['--z', '3']], |
| 'value2'); |
| test_if(`if(style(--z: var(--y)): value1; |
| style(--z: 3): value2; |
| else: value3;)`, |
| [['--x', 'var(--y)'], ['--y', 'var(--y)'], ['--z', '3']], |
| 'value2'); |
| </script> |
