Anders Hartvoll Ruud
31be8ffde4
Automatic update from web-platform-tests Set explicit inheritance flags for inherit() When we apply 'inherit' in StyleBuilder::ApplyPhysicalProperty, we also set some flags to ensure that inherited styles propagate "deep enough" during style recalcs. The inherit() function has exactly the same dependency, but StyleBuilder is not aware of that since inherit() resolves earlier. Hence, we set the flags manually during ResolveInheritInto instead. I was also concerned that we had a bug related to the "independently inherited" optimization, where we perform "light" style recalcs for children in situations where only custom properties change and nothing actually refers to those custom properties. However, it turns out we already consider *any* arbitrary substitution function (var(), attr(), env(), etc) as "possibly referencing a custom property", so there was no bug there. (See MarkHasVariableReference). Bug: 452071846 Change-Id: I033ae293ee10317fdc5c2e2faeaa163d1c0dccbb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7054668 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Steinar H Gunderson <sesse@chromium.org> Cr-Commit-Position: refs/heads/main@{#1532199} -- wpt-commits: 082ef48403ebea0c585fcec8b44fb022eb94a71b wpt-pr: 55542
95 lines
2.6 KiB
HTML
95 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values: The inherit() function (invalidation)</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=parent_change_unregistered>
|
|
<style>
|
|
#outer {
|
|
--z: 2;
|
|
}
|
|
#target {
|
|
z-index: inherit(--z);
|
|
}
|
|
</style>
|
|
<div id=outer>
|
|
<div id=target>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(parent_change_unregistered.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(target).zIndex, '2');
|
|
assert_equals(getComputedStyle(target).getPropertyValue('--z'), '2');
|
|
outer.style.setProperty('--z', '4');
|
|
assert_equals(getComputedStyle(target).zIndex, '4');
|
|
assert_equals(getComputedStyle(target).getPropertyValue('--z'), '4');
|
|
}, 'inherit() invalidates when values changes on parent element, inherited');
|
|
</script>
|
|
|
|
<!-- Like the previous test, but #target is buried deeper. -->
|
|
<template id=parent_change_unregistered_deep>
|
|
<style>
|
|
#outer {
|
|
--z: 2;
|
|
}
|
|
#target {
|
|
z-index: inherit(--z, 7);
|
|
}
|
|
</style>
|
|
<div id=outer>
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<div id=target></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(parent_change_unregistered_deep.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(target).zIndex, '2');
|
|
outer.style.setProperty('--z', '4');
|
|
assert_equals(getComputedStyle(target).zIndex, '4');
|
|
}, 'inherit() invalidates when values changes on parent element, inherited, deeper');
|
|
</script>
|
|
|
|
<template id=parent_change_registered>
|
|
<style>
|
|
@property --z {
|
|
syntax: "<integer>";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
#outer {
|
|
--z: 2;
|
|
}
|
|
#target {
|
|
z-index: inherit(--z, 7);
|
|
}
|
|
</style>
|
|
<div id=outer>
|
|
<div id=target>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(parent_change_registered.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(target).zIndex, '2');
|
|
assert_equals(getComputedStyle(target).getPropertyValue('--z'), '0');
|
|
outer.style.setProperty('--z', '4');
|
|
assert_equals(getComputedStyle(target).zIndex, '4');
|
|
assert_equals(getComputedStyle(target).getPropertyValue('--z'), '0');
|
|
}, 'inherit() invalidates when values changes on parent element, non-inherited');
|
|
</script>
|