Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 121 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/if-style-query.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Values and Units Test: CSS inline if() function</title>
<meta name="assert" content="Test inline if() function">
<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;
}
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(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);
}
// Valid if() with unregistered custom properties in conditions.
test_if('if(style(--x: 3): true_value)', [['--x', '3']], 'true_value');
test_if('if( style( --x : 3 ) : true_value )', [['--x', '3']], 'true_value ');
test_if('if(style(--x): true_value;)', [['--x', '3']], 'true_value');
test_if('if( style(--x) : true_value; )', [['--x', '3']], 'true_value');
test_if('if(style(--x: 3): true_value;)', [['--x', '3']], 'true_value');
test_if('if(style(--x: 0): true_value;)', [['--x', '0']], 'true_value');
test_if('if(style(--x: 0): ;)', [['--x', '0']], '');
test_if('if(style(--x: 0): )', [['--x', '0']], '');
test_if('if(style(--x: blue): true_value;)', [['--x', 'blue']], 'true_value');
test_if('if(style(--x: 3): 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: initial): true_value; else: false_value)', [['--x', '']], 'false_value');
test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', 'initial']], 'true_value');
test_if('if(style(--non-existent: initial): true_value; else: false_value)', [], 'true_value');
test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', '3']], 'false_value');
test_if(`if(style(--inherited: inherit): true_value;
else: false_value)`,
[['--inherited', 'outer_value']],
'true_value');
test_if(`if(style(--inherited: inherit): true_value;
else: false_value)`,
[['--inherited', 'inherit']],
'true_value');
test_if(`if(style(--inherited: inherit): true_value;
else: false_value)`,
[['--inherited', 'unset']],
'true_value');
test_if(`if(style(--inherited: inherit): true_value;
else: false_value)`,
[['--inherited', 'inner_value']],
'false_value');
test_if(`if(style(--inherited: unset): true_value;
else: false_value)`,
[['--inherited', 'outer_value']],
'true_value');
test_if(`if(style(--inherited: unset): true_value;
else: false_value)`,
[['--inherited', 'unset']],
'true_value');
test_if(`if(style(--inherited: unset): true_value;
else: false_value)`,
[['--inherited', 'inner_value']],
'false_value');
test_if(`if(style(--inherited: unset): true_value;
else: false_value)`,
[['--inherited', 'inherit']],
'true_value');
test_if('if(style(--x: 3): true_value; else:false_value)', [['--x', '3']], 'true_value');
test_if('if(style(--x: 3): true_value; else: false_value;)', [['--x', '3']], 'true_value');
test_if('if(style(--x: 0): true_value; else: false_value)', [['--x', '3']], 'false_value');
test_if('if( style( --x: 0 ) : true_value ; else : false_value)', [['--x', '3']], 'false_value');
test_if('if(style(not (--unknown)): true_value;)', [['--x', '3']], 'true_value');
test_if(`if(style(--x: 0): true_value;
else: )`,
[['--x', '3']],
'');
test_if(`if(style(--x: 3): ;
else: false_value)`,
[['--x', '3']],
'');
test_if(`if(style(--non-existent: 0): true_value;
else: false_value)`,
[['--x', '3']],
'false_value');
test_if(`if(style(--x: 3): true_value;
else: false_value)`,
[['--x', 'calc(1 + 2)']],
'false_value');
test_if(`if(style(--x: calc(1 + 2)): true_value;
else: false_value)`,
[['--x', '3']],
'false_value');
test_if(`if(style(--non-existent): true_value;
else: false_value;)`,
[['--x', '3']],
'false_value');
test_if(`if(style(style(--x)): true_value;
else: false_value;)`,
[['--x', '3']],
'false_value');
test_if(`if(style(var(--x)): true_value;
else: false_value;)`,
[['--x', '3']],
'false_value');
test_if(`if(style(--x: revert): true_value;
else: false_value)`,
[['--x', '11']],
'false_value');
test_if(`if(style(--x: revert-layer): true_value;
else: false_value)`,
[['--x', '']],
'false_value');
test_if(`if(style(--x):a)if(style(--x):b)`,
[['--x', '3']],
'a/**/b');
// Valid if() with multiple conditions with unregistered custom properties
test_if(`if(style(--non-existent): value1;
style(--x): value2;
else: value3;)`,
[['--x', '3']],
'value2');
test_if(`if(style(--x: 1): value1;
style(--x: 2): value2;
style(--x: 3): value3;)`,
[['--x', '3']],
'value3');
test_if(`if(style(--x: 1): value1;
style(--y: green): value2;
style(--z: 3px): value3;
else: value4;)`,
[['--x', '3'], ['--y', 'red'], ['--z', '10px']],
'value4');
test_if(`if(style(--x: 1): value1;
else: value2;
style(--y: green): value3;
style(--z: 3px): value4;)`,
[['--x', '3'], ['--y', 'red'], ['--z', '10px']],
'value2');
test_if(`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(`if(style(--x: 3): value1;
style(--y: green): value2;
style(--z: 3px): value3;
else: value4;)`,
[['--x', '3'], ['--y', 'red'], ['--z', '10px']],
'value1');
test_if(`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(`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(`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(`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(`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(`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(`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(`if(style((--x: 3) and (not (--y: red))): value1;
style(--z: 15px): value2;
else: value3;)`,
[['--x', '3'], ['--y', 'green'], ['--z', '11px']],
'value1');
test_if(`if(style((--x: 3) and (not (--y: red))): value1;
style(--z: 15px): value2;
else: value3;)`,
[['--x', '3'], ['--y', 'red'], ['--z', '15px']],
'value2');
test_if(`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(`if(style(--string: "success"): true_value;
else: false_value)`,
[['--string', '"success"']],
'true_value');
test_if(`if(style(--string: "success"): true_value;
else: false_value)`,
[['--string', '"fail"']],
'false_value');
test_if(`if(style(--number: 1): true_value;
else: false_value)`,
[['--number', '1']],
'true_value');
test_if(`if(style(--number: 3): true_value;
else: false_value)`,
[['--number', '1']],
'false_value');
test_if(`if(style(--number: calc(1 + 2)): true_value;
else: false_value)`,
[['--number', '3']],
'true_value');
test_if(`if(style(--number: 3): true_value;
else: false_value)`,
[['--number', 'calc(1 + 2)']],
'true_value');
test_if(`if(style(--number: revert): true_value;
else: false_value)`,
[['--number', '3']],
'false_value');
test_if(`if(style(--number: revert-layer): true_value;
else: false_value)`,
[['--number', '3']],
'false_value');
test_if(`if(style(--length: 1px): true_value;
else: false_value)`,
[['--length', '1px']],
'true_value');
test_if(`if(style(--length: 3): true_value;
else: false_value)`,
[['--length', '3px']],
'false_value');
test_if(`if(style(--length: calc(1px + 2px)): true_value;
else: false_value)`,
[['--length', '3px']],
'true_value');
test_if(`if(style(--length: 3px): true_value;
else: false_value)`,
[['--length', 'calc(1px + 2px)']],
'true_value');
test_if(`if(style(--length: 1em): true_value;
else: false_value)`,
[['--length', '30px']],
'true_value');
test_if(`if(style(--length: 30px): true_value;
else: false_value)`,
[['--length', '1em']],
'true_value');
test_if(`if(style(--length: 3): true_value;
else: false_value)`,
[],
'false_value');
test_if(`if(style(--length: initial): true_value;
else: false_value)`,
[['--length', '3px']],
'true_value');
test_if(`if(style(--length: initial): true_value;
else: false_value)`,
[],
'true_value');
test_if(`if(style(--length: inherit): true_value;
else: false_value)`,
[],
'false_value');
test_if(`if(style(--length: inherit): true_value;
else: false_value)`,
[['--length', '30px']],
'true_value');
test_if(`if(style(--length: unset): true_value;
else: false_value)`,
[['--length', '3px']],
'true_value');
test_if(`if(style(--length-inherited: inherit): true_value;
else: false_value)`,
[],
'true_value');
test_if(`if(style(--length-inherited: inherit): true_value;
else: false_value)`,
[['--length-inherited', '30px']],
'true_value');
test_if(`if(style(--length-inherited: inherit): true_value;
else: false_value)`,
[['--length-inherited', 'unset']],
'true_value');
test_if(`if(style(--length-inherited: unset): true_value;
else: false_value)`,
[['--length-inherited', '30px']],
'true_value');
test_if(`if(style(--length-inherited: unset): true_value;
else: false_value)`,
[['--length-inherited', 'inherit']],
'true_value');
test_if(`if(style(--percentage: 30%): true_value;
else: false_value)`,
[['--percentage', '30%']],
'true_value');
test_if(`if(style(--percentage: 90px): true_value;
else: false_value)`,
[['--percentage', '30%']],
'false_value');
test_if(`if(style(--percentage: 30px): true_value;
else: false_value)`,
[['--percentage', '30%']],
'false_value');
test_if(`if(style(--percentage: 90%): true_value;
else: false_value)`,
[['--percentage', '3px']],
'false_value');
test_if(`if(style(--color: green): true_value;
else: false_value)`,
[['--color', 'green']],
'true_value');
test_if(`if(style(--color: rgb(0, 128, 0)): true_value;
else: false_value)`,
[['--color', 'green']],
'true_value');
test_if(`if(style(--color: green): true_value;
else: false_value)`,
[['--color', 'rgb(0, 128, 0)']],
'true_value');
test_if(`if(style(--color: #008000): true_value;
else: false_value)`,
[['--color', 'green']],
'true_value');
test_if(`if(style(--color: green): true_value;
else: false_value)`,
[['--color', '#008000']],
'true_value');
test_if(`if(style(--color: green): true_value;
else: false_value)`,
[['--color', 'blue']],
'false_value');
// Valid if() with substitution function in conditions.
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: var(--y)): true_value;
else: false_value)`,
[['--x', '3'], ['--y', '3']],
'true_value');
test_if(`if(style(--x: var(--y)): true_value;
else: false_value)`,
[['--x', '1'], ['--y', '3']],
'false_value');
test_if(`if(style(--x: attr(data-foo type(<length>))): true_value;
else: false_value)`,
[['--x', '30px']],
'true_value');
test_if(`if(style(--x: attr(data-foo)): true_value;
else: false_value)`,
[['--x', '"30px"']],
'true_value');
test_if(`if(style(--length: attr(data-foo type(<length>))): true_value;
else: false_value)`,
[['--length', '30px']],
'true_value');
test_if(`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(`if(style(--x: 3): true_value;
else: false_value)`,
[['--x', 'var(--y)'], ['--y', '3']],
'true_value');
test_if(`if(style(--x: 3): true_value;
else: false_value)`,
[['--x', 'var(--y)'], ['--y', '1']],
'false_value');
test_if(`if(style(--x: "30px"): true_value;
else: false_value)`,
[['--x', 'attr(data-foo)']],
'true_value');
test_if(`if(style(--x: 3): true_value;
else: false_value)`,
[['--x', 'attr(data-foo)']],
'false_value');
test_if(`if(style(--length: 30px): true_value;
else: false_value)`,
[['--length', 'attr(data-foo type(<length>))']],
'true_value');
test_if(`if(style(--length: 30): true_value;
else: false_value)`,
[['--length', 'attr(data-foo type(<length>))']],
'false_value');
// Invalid if() syntax
test_if('if()', [['--x', '3']], '');
test_if('if(style())', [['--x', '3']], '');
test_if('if(style(--x: 3) !)', [['--x', '3']], '');
test_if(`if(style(--x: 3) true_value;
else: false_value)`,
[['--x', '3']],
'');
test_if(`if(style(--x: 3): true_value;
else: false_value!)`,
[['--x', '3']],
'');
test_if(`if(!style(--x: 3): true_value;
else: false_value)`,
[['--x', '3']],
'');
test_if(`if(style(--x!): true_value;
else: false_value)`,
[['--x', '3']],
'');
test_if(`if(style(color: green): true_value;
else: false_value)`,
[],
'');
test_if(`if(style(not (--x: 5) or (--z: 10px)): true_value;
else: false_value;)`,
[['--x', '3'], ['--y', 'green'], ['--z', '11px']],
'');
// IACVT
test_if('if(style(--x: 0): true_value;)', [['--x', '3']], '');
test_if('if(style(--non-existent): true_value;)', [['--x', '3']], '');
test_if('if(style(--non-existent: 3): true_value;)', [['--x', '3']], '');
test_if('if(style(--invalid): value)', [], '');
test_if('if(style(--invalid): var(--x))', [['--x', 'true_value']], '');
test_if(`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('if(style(--x: attr(data-attr type(*))): true_value; else: false_value)', [['--x', 'attr']], 'true_value');
test_if('if(style(--x: attr): true_value; else: false_value)', [['--x', 'attr(data-attr type(*))']], 'true_value');
</script>