Skip to content

Commit f9fe3ed

Browse files
andruudchromium-wpt-export-bot
andruud
authored and
chromium-wpt-export-bot
committed
[function] Let typed parameters act as local registrations
When a parameter has a type, the passed argument gets computed against the type (e.g. red => rgb(255, 0, 0) for <color>). However, beyond that computation step, the type of the parameter is lost before the actual function body is executed. This means that any if() functions that exist within the body will not see this type: @function --f(--c <color>) { result: if(style(--c:red):true; else:false); } /* --f(#f00) => false */ This behavior is clearly surprising, but it's also currently what the spec requires. Issue 12315 aims to change this, and this CL makes that change in Blink in advance of the resolution. Bug: 427115598 Change-Id: Ia7267830170507e4de39860be5c8c08c2352453e https: //github.com/w3c/csswg-drafts/issues/12315 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6652173 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Munira Tursunova <moonira@google.com> Cr-Commit-Position: refs/heads/main@{#1477540}
1 parent 85df788 commit f9fe3ed

File tree

2 files changed

+212
-0
lines changed

2 files changed

+212
-0
lines changed

‎css/css-mixins/local-if-substitution.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,87 @@
218218
</style>
219219
</template>
220220

221+
<template data-name="CSS-wide keywords are interpreted locally (initial)">
222+
<style>
223+
@function --f(--c: green) {
224+
result: if(style(--c: initial): PASS; else: FAIL);
225+
}
226+
@function --g() {
227+
--c: red;
228+
result: --f();
229+
}
230+
#target {
231+
--actual: --g();
232+
--expected: PASS;
233+
}
234+
</style>
235+
</template>
236+
237+
<template data-name="CSS-wide keywords are interpreted locally (inherit)">
238+
<style>
239+
@function --f(--c: red) {
240+
--c: green;
241+
result: if(style(--c: inherit): PASS; else: FAIL);
242+
}
243+
@function --g() {
244+
--c: green;
245+
result: --f();
246+
}
247+
#target {
248+
--actual: --g();
249+
--expected: PASS;
250+
}
251+
</style>
252+
</template>
253+
254+
<template data-name="CSS-wide keywords are interpreted locally (guaranteed-invalid, initial)">
255+
<style>
256+
@function --f() {
257+
result: if(style(--c: initial): PASS; else: FAIL);
258+
}
259+
#target {
260+
--actual: --f();
261+
--expected: PASS;
262+
}
263+
</style>
264+
</template>
265+
266+
<template data-name="CSS-wide keywords are interpreted locally (guaranteed-invalid, unset)">
267+
<style>
268+
@function --f() {
269+
result: if(style(--c: unset): PASS; else: FAIL);
270+
}
271+
#target {
272+
--actual: --f();
273+
--expected: PASS;
274+
}
275+
</style>
276+
</template>
277+
278+
<template data-name="CSS-wide keywords are interpreted locally (revert)">
279+
<style>
280+
@function --f() {
281+
result: if(style(--c: revert): FAIL; else: PASS);
282+
}
283+
#target {
284+
--actual: --f();
285+
--expected: PASS;
286+
}
287+
</style>
288+
</template>
289+
290+
<template data-name="CSS-wide keywords are interpreted locally (revert-layer)">
291+
<style>
292+
@function --f() {
293+
result: if(style(--c: revert-layer): FAIL; else: PASS);
294+
}
295+
#target {
296+
--actual: --f();
297+
--expected: PASS;
298+
}
299+
</style>
300+
</template>
301+
221302
<script>
222303
test_all_templates();
223304
</script>

‎css/css-mixins/parameter-types.tentative.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<!DOCTYPE html>
2+
<title>Custom Functions: Typed parameters</title>
3+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12315">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="resources/utils.js"></script>
7+
8+
<div id=target></div>
9+
<div id=main></div>
10+
11+
<!-- To pass, a test must produce matching computed values for --actual and
12+
--expected on #target. -->
13+
14+
<template data-name="A parameter retains its type">
15+
<style>
16+
@function --f(--c <color>) {
17+
result: if(
18+
style(--c:red): PASS;
19+
else: FAIL);
20+
}
21+
#target {
22+
--actual: --f(#f00);
23+
--expected: PASS;
24+
}
25+
</style>
26+
</template>
27+
28+
<template data-name="A parameter type acts as a local registration">
29+
<style>
30+
@function --f(--c <color>) {
31+
--c:#00f; /* <color> */
32+
result: if(
33+
style(--c:blue): PASS;
34+
else: FAIL);
35+
}
36+
#target {
37+
--actual: --f(#000);
38+
--expected: PASS;
39+
}
40+
</style>
41+
</template>
42+
43+
<template data-name="A parameter retains its type (parent stack frame)">
44+
<style>
45+
@function --f() {
46+
result: if(
47+
style(--c:red): PASS;
48+
else: FAIL);
49+
}
50+
@function --g(--c <color>) {
51+
result: --f();
52+
}
53+
#target {
54+
--actual: --g(#f00);
55+
--expected: PASS;
56+
}
57+
</style>
58+
</template>
59+
60+
<template data-name="A parameter type acts as a local registration (parent stack frame)">
61+
<style>
62+
@function --f() {
63+
result: if(
64+
style(--c:blue): PASS;
65+
else: FAIL);
66+
}
67+
@function --g(--c <color>) {
68+
--c:#00f; /* <color> */
69+
result: --f();
70+
}
71+
#target {
72+
--actual: --g(#f00);
73+
--expected: PASS;
74+
}
75+
</style>
76+
</template>
77+
78+
<template data-name="Universally typed parameter can shadow other parameters">
79+
<style>
80+
@function --f(--c type(*)) {
81+
result: if(
82+
style(--c:red): FAIL1;
83+
style(--c:#f00): FAIL2;
84+
style(--c:lime): FAIL3;
85+
style(--c:#0f0): PASS;
86+
else: FAIL4);
87+
}
88+
@function --g(--c <color>) {
89+
result: --f(#0f0);
90+
}
91+
#target {
92+
--actual: --g(#f00);
93+
--expected: PASS;
94+
}
95+
</style>
96+
</template>
97+
98+
<template data-name="Invalid value for typed local becomes IACVT">
99+
<style>
100+
@function --f(--c <color>) {
101+
--c: 3;
102+
result: var(--c, PASS);
103+
}
104+
#target {
105+
--actual: --f(#f00);
106+
--expected: PASS;
107+
}
108+
</style>
109+
</template>
110+
111+
<template data-name="if() within @function can query registered custom property">
112+
<style>
113+
@property --c {
114+
syntax: "<color>";
115+
inherits: false;
116+
initial-value: black;
117+
}
118+
@function --f() {
119+
result: if(style(--c:#f00): PASS; else: FAIL);
120+
}
121+
#target {
122+
--c: red;
123+
--actual: --f();
124+
--expected: PASS;
125+
}
126+
</style>
127+
</template>
128+
129+
<script>
130+
test_all_templates();
131+
</script>

0 commit comments

Comments
 (0)