Rune Lillesveen
369c4211a6
Automatic update from web-platform-tests Reland container queries invalidation with MSAN fix First change: ------------- Invalidate container queries on sibling changes Rely on marking container elements for style recalc on nth-invalidations if the evaluator has been invoked with a tree counting function. If a container evaluator depends on tree counting function evaluation, and we recalc style for it for whatever reason, we recompute the CSSContainerValues. To avoid that we would have needed a different way of invalidating the container than relying on style recalc. Pull the sibling-index() dependency out of ComputeValue() to know when we need to invalidate the container values for style() queries. There is a pre-existing bug for style() queries for other units like rem units. That will be fixed in a follow-up CL. Second change: -------------- Emit unit flags from style() query evaluations Fixes unit invalidation for registered custom property container queries. Bug: 40282719, 419454587, 419862635 Change-Id: I67d1214679f6ba2ef88da294fd57e03d99de5919 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6584554 Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Auto-Submit: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Daniil Sakhapov <sakhapov@chromium.org> Cr-Commit-Position: refs/heads/main@{#1465396} -- wpt-commits: 387fc2d0c34ad7c7e5a001dc1cc774a0e043f241 wpt-pr: 52772 Differential Revision: https://phabricator.services.mozilla.com/D251812
93 lines
3.2 KiB
HTML
93 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: sibling-index() and sibling-count() changes in container queries</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
|
|
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-features">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
@property --length {
|
|
syntax: "<length>";
|
|
initial-value: 0px;
|
|
inherits: false;
|
|
}
|
|
.container { container-type: inline-size; }
|
|
#c1 {
|
|
width: 100px;
|
|
--length: 100px;
|
|
}
|
|
#c2 {
|
|
width: 400px;
|
|
--length: 600px;
|
|
}
|
|
span {
|
|
--match-100: no;
|
|
--match-600: no;
|
|
}
|
|
@container (width = calc(100px * sibling-index())) {
|
|
span { background-color: green; }
|
|
}
|
|
@container (width = calc(200px * sibling-count())) {
|
|
span { color: lime; }
|
|
}
|
|
@container style(--length: calc(100px * sibling-index())) {
|
|
span { --match-100: yes; }
|
|
}
|
|
@container style(--length: calc(300px * sibling-count())) {
|
|
span { --match-600: yes; }
|
|
}
|
|
</style>
|
|
<div style="color:black">
|
|
<div id="rm1"></div>
|
|
<div id="rm2"></div>
|
|
<div id="c1" class="container">
|
|
<span id="t1"></span>
|
|
</div>
|
|
<div id="c2" class="container">
|
|
<span id="t2"></span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)");
|
|
assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
|
|
}, "sibling-index() in @container width query initially not matching");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)");
|
|
assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
|
|
}, "sibling-count() in @container width query initially not matching");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "no");
|
|
assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no");
|
|
}, "sibling-index() in @container style() query initially not matching");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no");
|
|
assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "no");
|
|
}, "sibling-count() in @container style() query initially not matching");
|
|
|
|
rm1.remove();
|
|
rm2.remove();
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)");
|
|
assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
|
|
}, "sibling-index() in @container width query matching after removal");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t2).backgroundColor, "rgba(0, 0, 0, 0)");
|
|
assert_equals(getComputedStyle(t2).color, "rgb(0, 255, 0)");
|
|
}, "sibling-count() in @container width query matching after removal");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "yes");
|
|
assert_equals(getComputedStyle(t1).getPropertyValue("--match-600"), "no");
|
|
}, "sibling-index() in @container style() query matching after removal");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no");
|
|
assert_equals(getComputedStyle(t2).getPropertyValue("--match-600"), "yes");
|
|
}, "sibling-count() in @container style() query matching after removal");
|
|
</script>
|