Skip to content

Commit 1664571

Browse files
andruudchromium-wpt-export-bot
andruud
authored and
chromium-wpt-export-bot
committed
Implement the inherit() function behind a flag
The inherit() function works like var(), except that it substitutes to the specified computed custom property value on the parent element rather than the current element. This can be useful to modify some property coming from the ancestry "in-place", e.g.: div { /* Twice the flair from this point in the ancestor chain. */ --flair: calc(inherit(--flair) * 2); } Note: Using the inherit() function probably means the child-has- explicit-inheritance flag must be set on the parent style. This CL does not do this, so there may be an invalidation bug. Bug: 452071846 Change-Id: I1f9b78ef36b0cb6842fc2ed854238ddd5c21ad66 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7044487 Reviewed-by: Steinar H Gunderson <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1530721}
1 parent d99578b commit 1664571

File tree

3 files changed

+276
-0
lines changed

3 files changed

+276
-0
lines changed

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

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<title>Custom Functions: Local inherit() substitution</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/">
4+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="resources/utils.js"></script>
8+
9+
<div id=parent>
10+
<div id=target></div>
11+
</div>
12+
<div id=main></div>
13+
14+
<!-- To pass, a test must produce matching computed values for '--actual'
15+
and '--expected' on '#target'. -->
16+
17+
<template data-name="inherit() refers to parent stack frame (element)">
18+
<style>
19+
@function --f() {
20+
--x: FAIL2;
21+
result: inherit(--x);
22+
}
23+
#parent {
24+
--x: FAIL1;
25+
}
26+
#parent > #target {
27+
--x: PASS;
28+
--actual: --f();
29+
--expected: PASS;
30+
}
31+
</style>
32+
</template>
33+
34+
<template data-name="inherit() refers to parent stack frame (other function call)">
35+
<style>
36+
@function --f() {
37+
--x: PASS;
38+
result: --g();
39+
}
40+
@function --g() {
41+
--x: FAIL3;
42+
result: inherit(--x);
43+
}
44+
#parent {
45+
--x: FAIL1;
46+
}
47+
#parent > #target {
48+
--x: FAIL2;
49+
--actual: --f();
50+
--expected: PASS;
51+
}
52+
</style>
53+
</template>
54+
55+
<template data-name="inherit() referring to guaranteed-invalid in parent frame">
56+
<style>
57+
@function --f() {
58+
--x: var(--noexist);
59+
result: --g();
60+
}
61+
@function --g() {
62+
--x: FAIL3;
63+
result: inherit(--x, PASS);
64+
}
65+
#parent {
66+
--x: FAIL1;
67+
}
68+
#parent > #target {
69+
--x: FAIL2;
70+
--actual: --f();
71+
--expected: PASS;
72+
}
73+
</style>
74+
</template>
75+
76+
<template data-name="inherit() referring to cycle in parent frame">
77+
<style>
78+
@function --f() {
79+
--x: var(--x);
80+
result: --g();
81+
}
82+
@function --g() {
83+
--x: FAIL3;
84+
result: inherit(--x, PASS);
85+
}
86+
#parent {
87+
--x: FAIL1;
88+
}
89+
#parent > #target {
90+
--x: FAIL2;
91+
--actual: --f();
92+
--expected: PASS;
93+
}
94+
</style>
95+
</template>
96+
97+
98+
<template data-name="inherit() referring to typed value in parent frame">
99+
<style>
100+
@function --f(--x <length>) {
101+
result: --g();
102+
}
103+
@function --g() {
104+
--x: 14px;
105+
result: inherit(--x);
106+
}
107+
#parent {
108+
--x: 12px;
109+
}
110+
#parent > #target {
111+
--x: 13px;
112+
--actual: --f(42.0px);
113+
--expected: 42px;
114+
}
115+
</style>
116+
</template>
117+
118+
<script>
119+
test_all_templates();
120+
</script>

‎css/css-values/inherit-function-basic.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<title>CSS Values: The inherit() function (basic behavior)</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<main id=main>
7+
</main>
8+
9+
<template id=inherit_immediate_parent>
10+
<style>
11+
#parent {
12+
--z: 2;
13+
}
14+
#target {
15+
--z: 13;
16+
z-index: inherit(--z);
17+
}
18+
</style>
19+
<div id=parent>
20+
<div id=target>
21+
</div>
22+
</div>
23+
</template>
24+
<script>
25+
test((t) => {
26+
main.append(inherit_immediate_parent.content.cloneNode(true));
27+
t.add_cleanup(() => { main.replaceChildren(); });
28+
assert_equals(getComputedStyle(target).zIndex, '2');
29+
}, 'inherit() on value set on parent');
30+
</script>
31+
32+
<template id=inherit_ancestor>
33+
<style>
34+
:root {
35+
--z: 2;
36+
}
37+
#foo {
38+
--z: 13;
39+
z-index: inherit(--z);
40+
}
41+
</style>
42+
<div id=foo>
43+
</div>
44+
</template>
45+
<script>
46+
test((t) => {
47+
main.append(inherit_ancestor.content.cloneNode(true));
48+
t.add_cleanup(() => { main.replaceChildren(); });
49+
assert_equals(getComputedStyle(foo).zIndex, '2');
50+
}, 'inherit() on value set on ancestor');
51+
</script>
52+
53+
<template id=inherit_fallback>
54+
<style>
55+
#foo {
56+
--z: 13;
57+
z-index: inherit(--z, 4);
58+
}
59+
</style>
60+
<div id=foo>
61+
</div>
62+
</template>
63+
<script>
64+
test((t) => {
65+
main.append(inherit_fallback.content.cloneNode(true));
66+
t.add_cleanup(() => { main.replaceChildren(); });
67+
assert_equals(getComputedStyle(foo).zIndex, '4');
68+
}, 'inherit(), no value set on parent');
69+
</script>
70+
71+
<template id=inherit_accumulate_values>
72+
<style>
73+
#e1 { --v: e1; }
74+
#e2 { --v: e2 inherit(--v); }
75+
#e3 { --v: e3 inherit(--v); }
76+
</style>
77+
<div id=e1>
78+
<div id=e2>
79+
<div id=e3>
80+
</div>
81+
</div>
82+
</div>
83+
</template>
84+
<script>
85+
test((t) => {
86+
main.append(inherit_accumulate_values.content.cloneNode(true));
87+
t.add_cleanup(() => { main.replaceChildren(); });
88+
assert_equals(getComputedStyle(e3).getPropertyValue('--v'), 'e3 e2 e1');
89+
}, 'inherit(), accumulating values');
90+
</script>
91+
92+
<template id=inherit_accumulate_font_size>
93+
<style>
94+
@property --f {
95+
syntax: "<length>";
96+
inherits: false;
97+
initial-value: 0px;
98+
}
99+
#e1 { font-size: 3px; --f: 1em; }
100+
#e2 { font-size: 5px; --f: calc(1em + inherit(--f)); }
101+
#e3 { font-size: 7px; --f: calc(1em + inherit(--f)); }
102+
</style>
103+
<div id=e1>
104+
<div id=e2>
105+
<div id=e3>
106+
</div>
107+
</div>
108+
</div>
109+
</template>
110+
<script>
111+
test((t) => {
112+
main.append(inherit_accumulate_font_size.content.cloneNode(true));
113+
t.add_cleanup(() => { main.replaceChildren(); });
114+
assert_equals(getComputedStyle(e3).getPropertyValue('--f'), '15px');
115+
}, 'inherit(), accumulating font-size');
116+
</script>
117+
118+
<template id=inherit_within_if>
119+
<style>
120+
#parent {
121+
--z: 2;
122+
}
123+
#target {
124+
--z: 13;
125+
z-index: if(style(--z > inherit(--z)):4; else:7);
126+
}
127+
</style>
128+
<div id=parent>
129+
<div id=target>
130+
</div>
131+
</div>
132+
</template>
133+
<script>
134+
test((t) => {
135+
main.append(inherit_within_if.content.cloneNode(true));
136+
t.add_cleanup(() => { main.replaceChildren(); });
137+
assert_equals(getComputedStyle(target).zIndex, '4');
138+
}, 'inherit() can be used within if()');
139+
</script>

‎css/css-values/inherit-function-parsing.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<title>CSS Values: The inherit() function (parsing)</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/css/support/parsing-testcommon.js"></script>
7+
<script>
8+
// 'left' chosen arbitrarily:
9+
test_valid_value('left', 'inherit(--x)');
10+
test_valid_value('left', 'calc(inherit(--x) + 1px)');
11+
test_valid_value('left', 'inherit(--x,)');
12+
test_valid_value('left', 'inherit(--x, )');
13+
test_valid_value('left', 'inherit(--x , )');
14+
test_valid_value('left', 'inherit(--x, foo)');
15+
test_invalid_value('left', 'inherit(!!, foo)');
16+
test_invalid_value('left', 'inherit(, foo)');
17+
</script>

0 commit comments

Comments
 (0)