commit 7d53c88c94c73d94e9cba71f1aba8fb1d3609570
parent 697e14501f0c7a6fd7570410a17c86c41c121fe9
Author: Anders Hartvoll Ruud <andruud@chromium.org>
Date: Tue, 21 Oct 2025 10:30:06 +0000
Bug 1994658 [wpt PR 55474] - Implement the inherit() function behind a flag, a=testonly
Automatic update from web-platform-tests
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 <sesse@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1530721}
--
wpt-commits: 166457119f073eb7cf998c07dc359a25b26879c4
wpt-pr: 55474
Diffstat:
3 files changed, 276 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-mixins/local-inherit-substitution.html b/testing/web-platform/tests/css/css-mixins/local-inherit-substitution.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<title>Custom Functions: Local inherit() substitution</title>
+<link rel="help" href="https://drafts.csswg.org/css-mixins-1/">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+<div id=parent>
+ <div id=target></div>
+</div>
+<div id=main></div>
+
+<!-- To pass, a test must produce matching computed values for '--actual'
+ and '--expected' on '#target'. -->
+
+<template data-name="inherit() refers to parent stack frame (element)">
+ <style>
+ @function --f() {
+ --x: FAIL2;
+ result: inherit(--x);
+ }
+ #parent {
+ --x: FAIL1;
+ }
+ #parent > #target {
+ --x: PASS;
+ --actual: --f();
+ --expected: PASS;
+ }
+ </style>
+</template>
+
+<template data-name="inherit() refers to parent stack frame (other function call)">
+ <style>
+ @function --f() {
+ --x: PASS;
+ result: --g();
+ }
+ @function --g() {
+ --x: FAIL3;
+ result: inherit(--x);
+ }
+ #parent {
+ --x: FAIL1;
+ }
+ #parent > #target {
+ --x: FAIL2;
+ --actual: --f();
+ --expected: PASS;
+ }
+ </style>
+</template>
+
+<template data-name="inherit() referring to guaranteed-invalid in parent frame">
+ <style>
+ @function --f() {
+ --x: var(--noexist);
+ result: --g();
+ }
+ @function --g() {
+ --x: FAIL3;
+ result: inherit(--x, PASS);
+ }
+ #parent {
+ --x: FAIL1;
+ }
+ #parent > #target {
+ --x: FAIL2;
+ --actual: --f();
+ --expected: PASS;
+ }
+ </style>
+</template>
+
+<template data-name="inherit() referring to cycle in parent frame">
+ <style>
+ @function --f() {
+ --x: var(--x);
+ result: --g();
+ }
+ @function --g() {
+ --x: FAIL3;
+ result: inherit(--x, PASS);
+ }
+ #parent {
+ --x: FAIL1;
+ }
+ #parent > #target {
+ --x: FAIL2;
+ --actual: --f();
+ --expected: PASS;
+ }
+ </style>
+</template>
+
+
+<template data-name="inherit() referring to typed value in parent frame">
+ <style>
+ @function --f(--x <length>) {
+ result: --g();
+ }
+ @function --g() {
+ --x: 14px;
+ result: inherit(--x);
+ }
+ #parent {
+ --x: 12px;
+ }
+ #parent > #target {
+ --x: 13px;
+ --actual: --f(42.0px);
+ --expected: 42px;
+ }
+ </style>
+</template>
+
+<script>
+ test_all_templates();
+</script>
diff --git a/testing/web-platform/tests/css/css-values/inherit-function-basic.html b/testing/web-platform/tests/css/css-values/inherit-function-basic.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<title>CSS Values: The inherit() function (basic behavior)</title>
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<main id=main>
+</main>
+
+<template id=inherit_immediate_parent>
+ <style>
+ #parent {
+ --z: 2;
+ }
+ #target {
+ --z: 13;
+ z-index: inherit(--z);
+ }
+ </style>
+ <div id=parent>
+ <div id=target>
+ </div>
+ </div>
+</template>
+<script>
+ test((t) => {
+ main.append(inherit_immediate_parent.content.cloneNode(true));
+ t.add_cleanup(() => { main.replaceChildren(); });
+ assert_equals(getComputedStyle(target).zIndex, '2');
+ }, 'inherit() on value set on parent');
+</script>
+
+<template id=inherit_ancestor>
+ <style>
+ :root {
+ --z: 2;
+ }
+ #foo {
+ --z: 13;
+ z-index: inherit(--z);
+ }
+ </style>
+ <div id=foo>
+ </div>
+</template>
+<script>
+ test((t) => {
+ main.append(inherit_ancestor.content.cloneNode(true));
+ t.add_cleanup(() => { main.replaceChildren(); });
+ assert_equals(getComputedStyle(foo).zIndex, '2');
+ }, 'inherit() on value set on ancestor');
+</script>
+
+<template id=inherit_fallback>
+ <style>
+ #foo {
+ --z: 13;
+ z-index: inherit(--z, 4);
+ }
+ </style>
+ <div id=foo>
+ </div>
+</template>
+<script>
+ test((t) => {
+ main.append(inherit_fallback.content.cloneNode(true));
+ t.add_cleanup(() => { main.replaceChildren(); });
+ assert_equals(getComputedStyle(foo).zIndex, '4');
+ }, 'inherit(), no value set on parent');
+</script>
+
+<template id=inherit_accumulate_values>
+ <style>
+ #e1 { --v: e1; }
+ #e2 { --v: e2 inherit(--v); }
+ #e3 { --v: e3 inherit(--v); }
+ </style>
+ <div id=e1>
+ <div id=e2>
+ <div id=e3>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+ test((t) => {
+ main.append(inherit_accumulate_values.content.cloneNode(true));
+ t.add_cleanup(() => { main.replaceChildren(); });
+ assert_equals(getComputedStyle(e3).getPropertyValue('--v'), 'e3 e2 e1');
+ }, 'inherit(), accumulating values');
+</script>
+
+<template id=inherit_accumulate_font_size>
+ <style>
+ @property --f {
+ syntax: "<length>";
+ inherits: false;
+ initial-value: 0px;
+ }
+ #e1 { font-size: 3px; --f: 1em; }
+ #e2 { font-size: 5px; --f: calc(1em + inherit(--f)); }
+ #e3 { font-size: 7px; --f: calc(1em + inherit(--f)); }
+ </style>
+ <div id=e1>
+ <div id=e2>
+ <div id=e3>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+ test((t) => {
+ main.append(inherit_accumulate_font_size.content.cloneNode(true));
+ t.add_cleanup(() => { main.replaceChildren(); });
+ assert_equals(getComputedStyle(e3).getPropertyValue('--f'), '15px');
+ }, 'inherit(), accumulating font-size');
+</script>
+
+<template id=inherit_within_if>
+ <style>
+ #parent {
+ --z: 2;
+ }
+ #target {
+ --z: 13;
+ z-index: if(style(--z > inherit(--z)):4; else:7);
+ }
+ </style>
+ <div id=parent>
+ <div id=target>
+ </div>
+ </div>
+</template>
+<script>
+ test((t) => {
+ main.append(inherit_within_if.content.cloneNode(true));
+ t.add_cleanup(() => { main.replaceChildren(); });
+ assert_equals(getComputedStyle(target).zIndex, '4');
+ }, 'inherit() can be used within if()');
+</script>
diff --git a/testing/web-platform/tests/css/css-values/inherit-function-parsing.html b/testing/web-platform/tests/css/css-values/inherit-function-parsing.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Values: The inherit() function (parsing)</title>
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+ // 'left' chosen arbitrarily:
+ test_valid_value('left', 'inherit(--x)');
+ test_valid_value('left', 'calc(inherit(--x) + 1px)');
+ test_valid_value('left', 'inherit(--x,)');
+ test_valid_value('left', 'inherit(--x, )');
+ test_valid_value('left', 'inherit(--x , )');
+ test_valid_value('left', 'inherit(--x, foo)');
+ test_invalid_value('left', 'inherit(!!, foo)');
+ test_invalid_value('left', 'inherit(, foo)');
+</script>
