Skip to content

Commit 49ae999

Browse files
andruudchromium-wpt-export-bot
andruud
authored and
chromium-wpt-export-bot
committed
Make custom properties that are IACVT guaranteed-invalid (II)
Per recent spec change [1], custom properties that are invalid at computed-value time (IACVT) shall become guaranteed-invalid [2] if the custom property supports guaranteed-invalid values. In order to maintain our current animations behavior related to cycles (see CSSVarCycleInterpolationType), we still need to be able to distinguish between "cyclic" and "invalid for other reasons" from the outside. These two situations are now represented by CSSCyclicVariableValue and CSSInvalidVariableValue, respectively. [1] w3c/csswg-drafts#6006 [2] https://drafts.csswg.org/css-variables/#guaranteed-invalid-value Fixed: 1110188 I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/0xrbzYe_vxU/m/7bsL76n9CgAJ Change-Id: I0e7b529e4ae595c6c327c45b4da1a43be64c1c88
1 parent a89c11d commit 49ae999

6 files changed

+56
-35
lines changed

‎css/css-env/env-in-custom-properties.tentative.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828

2929
test(() => {
3030
const style = window.getComputedStyle(child);
31-
assert_equals(style.getPropertyValue("--var1"), " inherited");
32-
}, 'Substitution of unrecognized env() causes unset');
31+
assert_equals(style.getPropertyValue("--var1"), "");
32+
}, 'Substitution of unrecognized env() causes guaranteed-invalid');
3333
</script>
3434
</body>
3535
</html>

‎css/css-properties-values-api/animate-invalid.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<title>Do not crash when animating to unresolved var()</title>
3+
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty">
4+
<link rel="help" href="https://crbug.com/1185524">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<div id="target"></div>
8+
<script>
9+
promise_test(async function(){
10+
CSS.registerProperty({
11+
name: '--x',
12+
syntax: '<number>',
13+
initialValue: '1',
14+
inherits: false
15+
});
16+
let animation = target.animate({'--x': [ 'var(--unknown)']}, 100);
17+
await animation.ready;
18+
assert_equals(getComputedStyle(target).getPropertyValue('--x'), '1');
19+
}, 'Do not crash when animating to unresolved var()');
20+
</script>

‎css/css-properties-values-api/unit-cycles.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<script src="/resources/testharness.js"></script>
55
<script src="/resources/testharnessreport.js"></script>
66
<script>
7-
function register_length(name, inherits=true) {
7+
function register_length(name, inherits=false) {
88
CSS.registerProperty({
99
name: name,
1010
syntax: '<length>',
@@ -96,19 +96,19 @@
9696
test(function() {
9797
target.style = 'font-size: var(--font-size-em);';
9898
assert_property_equals('font-size', unsetFontSize);
99-
assert_property_equals('--font-size-em', '');
99+
assert_property_equals('--font-size-em', '0px');
100100
}, 'Lengths with em units may not be referenced from font-size');
101101

102102
test(function() {
103103
target.style = 'font-size: var(--font-size-ex);';
104104
assert_property_equals('font-size', unsetFontSize);
105-
assert_property_equals('--font-size-ex', '');
105+
assert_property_equals('--font-size-ex', '0px');
106106
}, 'Lengths with ex units may not be referenced from font-size');
107107

108108
test(function() {
109109
target.style = 'font-size: var(--font-size-ch);';
110110
assert_property_equals('font-size', unsetFontSize);
111-
assert_property_equals('--font-size-ch', '');
111+
assert_property_equals('--font-size-ch', '0px');
112112
}, 'Lengths with ch units may not be referenced from font-size');
113113

114114
test(function() {
@@ -122,7 +122,7 @@
122122
let root = document.documentElement;
123123
root.style = 'font-size: var(--font-size-rem);';
124124
assert_property_equals('font-size', unsetFontSize, root);
125-
assert_property_equals('--font-size-rem', '', root);
125+
assert_property_equals('--font-size-rem', '0px', root);
126126
}, 'Lengths with rem units may not be referenced from font-size on root element');
127127

128128
test(function() {
@@ -155,26 +155,26 @@
155155
test(function() {
156156
target.style = 'font-size: var(--font-size-em-via-var);';
157157
assert_property_equals('font-size', unsetFontSize);
158-
assert_property_equals('--font-size-em-via-var', '');
158+
assert_property_equals('--font-size-em-via-var', '0px');
159159
}, 'Lengths with em units are detected via var references');
160160

161161
test(function() {
162162
target.style = 'font-size: var(--font-size-ex-via-var);';
163163
assert_property_equals('font-size', unsetFontSize);
164-
assert_property_equals('--font-size-ex-via-var', '');
164+
assert_property_equals('--font-size-ex-via-var', '0px');
165165
}, 'Lengths with ex units are detected via var references');
166166

167167
test(function() {
168168
target.style = 'font-size: var(--font-size-ch-via-var);';
169169
assert_property_equals('font-size', unsetFontSize);
170-
assert_property_equals('--font-size-ch-via-var', '');
170+
assert_property_equals('--font-size-ch-via-var', '0px');
171171
}, 'Lengths with ch units are detected via var references');
172172

173173
test(function() {
174174
let root = document.documentElement;
175175
root.style = 'font-size: var(--font-size-rem-via-var);';
176176
assert_property_equals('font-size', unsetFontSize, root);
177-
assert_property_equals('--font-size-rem-via-var', '', root);
177+
assert_property_equals('--font-size-rem-via-var', '0px', root);
178178
root.style = 'font-size: unset';
179179
}, 'Lengths with rem units are detected via var references');
180180

‎css/css-properties-values-api/var-reference-registered-properties-cycles.html

+19-18
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@
2525
CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px', inherits: false});
2626

2727
computedStyle = getComputedStyle(test1);
28-
assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '');
29-
assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '');
30-
assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '30px');
31-
assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '4px');
32-
assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '');
33-
assert_equals(computedStyle.left, '50px');
34-
assert_equals(computedStyle.top, '60px');
28+
assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '1px');
29+
assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '2px');
30+
assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '2px');
31+
assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '2px');
32+
assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '1px');
33+
assert_equals(computedStyle.left, '1px');
34+
assert_equals(computedStyle.top, '2px');
3535
}, "A var() cycle between two registered properties is handled correctly.");
3636
</script>
3737

@@ -62,18 +62,18 @@
6262
CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px', inherits: false});
6363

6464
computedStyle = getComputedStyle(test2);
65-
assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '');
65+
assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px');
6666
assert_equals(computedStyle.getPropertyValue('--unregistered-2-a'), '');
6767

68-
assert_equals(computedStyle.getPropertyValue('--registered-2-b'), '30px');
69-
assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '3px');
68+
assert_equals(computedStyle.getPropertyValue('--registered-2-b'), '1px');
69+
assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '1px');
7070
assert_equals(computedStyle.getPropertyValue('--registered-2-d'), '40px');
7171
assert_equals(computedStyle.getPropertyValue('--registered-2-e'), '5px');
72-
assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '50px');
73-
assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '');
72+
assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '1px');
73+
assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '1px');
7474
assert_equals(computedStyle.getPropertyValue('--unregistered-2-d'), '60px');
7575
assert_equals(computedStyle.getPropertyValue('--unregistered-2-e'), '');
76-
assert_equals(computedStyle.left, '70px');
76+
assert_equals(computedStyle.left, '1px');
7777
assert_equals(computedStyle.top, '80px');
7878
}, "A var() cycle between a registered properties and an unregistered property is handled correctly.");
7979
</script>
@@ -136,7 +136,7 @@
136136
assert_equals(computedStyle.getPropertyValue('--unregistered-4-a'), '');
137137

138138
assert_equals(computedStyle.getPropertyValue('--registered-4-b'), 'meow');
139-
assert_equals(computedStyle.getPropertyValue('--registered-4-c'), 'circle');
139+
assert_equals(computedStyle.getPropertyValue('--registered-4-c'), '');
140140
assert_equals(computedStyle.getPropertyValue('--unregistered-4-b'), 'woof');
141141
assert_equals(computedStyle.getPropertyValue('--unregistered-4-c'), '');
142142
assert_equals(computedStyle.transitionProperty, 'water');
@@ -174,9 +174,10 @@
174174
let computedStyle = getComputedStyle(test5);
175175
assert_equals(computedStyle.getPropertyValue('--registered-5-a'), '');
176176
assert_equals(computedStyle.getPropertyValue('--registered-5-b'), '');
177-
assert_equals(computedStyle.getPropertyValue('--registered-5-c'), 'foo');
178-
assert_equals(computedStyle.getPropertyValue('--registered-5-d'), 'bar');
179-
assert_equals(computedStyle.getPropertyValue('--registered-5-e'), 'baz');
177+
assert_equals(computedStyle.getPropertyValue('--registered-5-c'), '');
178+
assert_equals(computedStyle.getPropertyValue('--registered-5-d'), '');
179+
assert_equals(computedStyle.getPropertyValue('--registered-5-e'), '');
180180
assert_equals(computedStyle.getPropertyValue('color'), 'rgb(0, 128, 0)');
181-
}, "Invalid at computed-value time triggers 'unset' behavior");
181+
}, "Custom properties with universal syntax become guaranteed-invalid when " +
182+
"invalid at computed-value time");
182183
</script>

‎css/css-variables/variable-substitution-variable-declaration.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@
140140

141141
{ element: "target10", propertyName: "--varA", expectedPropertyValue: "" },
142142
{ element: "target10", propertyName: "--varB", expectedPropertyValue: "" },
143-
{ element: "target10", propertyName: "--varC", expectedPropertyValue: " another good one" },
143+
{ element: "target10", propertyName: "--varC", expectedPropertyValue: "" },
144144
];
145145

146146
testcases.forEach(function (testcase) {

‎css/css-variables/variables-substitute-guaranteed-invalid.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@
3030
let cs = getComputedStyle(target1);
3131
assert_equals(cs.getPropertyValue('--var1'), '');
3232
assert_equals(cs.getPropertyValue('--var2'), '');
33-
}, 'Custom properties in a cycle are guaranteed-invalid');
33+
}, 'Custom properties in a cycle become guaranteed-invalid');
3434

3535
test( function () {
3636
let cs = getComputedStyle(target1);
37-
assert_equals(cs.getPropertyValue('--var3'), ' inherited');
38-
}, 'A custom property referencing a cycle is treated as unset');
37+
assert_equals(cs.getPropertyValue('--var3'), '');
38+
}, 'A custom property referencing a cycle becomes guaranteed-invalid');
3939

4040
test( function () {
4141
let cs = getComputedStyle(target1);
42-
assert_equals(cs.getPropertyValue('--var4'), ' inherited');
43-
}, 'A custom property referencing a non-existent variable is treated as unset');
42+
assert_equals(cs.getPropertyValue('--var4'), '');
43+
}, 'A custom property referencing a non-existent variable becomes guaranteed-invalid');
4444
</script>

0 commit comments

Comments
 (0)