Skip to content

Commit

Permalink
Use computed value of query specified value in if style conditions
Browse files Browse the repository at this point in the history 
Compare custom properties values in if() style queries with computed
specified values.

Bug: 346977961
Change-Id: I3c02254e6e5b017f606f17e0232c3986352df846
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6198204
Reviewed-by: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Munira Tursunova <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1414861}
  • Loading branch information
@tursunova @chromium-wpt-export-bot
tursunova authored and chromium-wpt-export-bot committed Feb 3, 2025
1 parent 387deb3 commit dba8d17
Showing 1 changed file with 111 additions and 0 deletions.
111 changes: 111 additions & 0 deletions css/css-values/if-style-query.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,20 @@
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;
Expand All @@ -32,6 +42,8 @@
}
.outer {
--inherited: outer_value;
--number: 30;
--x: 11;
--length: 30px;
--length-inherited: 30px;
}
Expand Down Expand Up @@ -80,6 +92,21 @@
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(--x: initial): true_value; else: false_value)', [['--x', '']], 'true_value');
test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', 'initial']], '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', 'inner_value']],
'false_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');
Expand Down Expand Up @@ -132,6 +159,14 @@
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');

// Valid if() with multiple conditions with unregistered custom properties
test_if(`if(style(--non-existent): value1;
Expand Down Expand Up @@ -225,6 +260,7 @@
else: false_value)`,
[['--string', '"fail"']],
'false_value');

test_if(`if(style(--number: 1): true_value;
else: false_value)`,
[['--number', '1']],
Expand All @@ -241,6 +277,15 @@
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']],
Expand All @@ -249,6 +294,64 @@
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: initial): true_value;
else: false_value)`,
[],
'true_value');
test_if(`if(style(--length: initial): true_value;
else: false_value)`,
[['--length', '3px']],
'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-inherited: inherit): true_value;
else: false_value)`,
[],
'true_value');
test_if(`if(style(--length: inherit): true_value;
else: false_value)`,
[['--length-inherited', '30px']],
'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']],
Expand All @@ -261,6 +364,14 @@
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']],
Expand Down

0 comments on commit dba8d17

Please sign in to comment.