Bug 1891070 [wpt PR 45668] - [anchor] Mark PositionedMovementLayout for null-AnchorEvaluator styles, a=testonly

Automatic update from web-platform-tests
[anchor] Mark PositionedMovementLayout for null-AnchorEvaluator styles

Regular style recalcs (that are not interleaved from OOF layout)
evaluate anchor*() functions without an AnchorEvaluator, which means
the fallback behavior is always taken. This means if we initially have
some style with left:10px, and then (in a separate lifecycle) change
the specified value to left:anchor(--a right,10px), the ComputedStyle
diffing will not be able to tell that something changed (because it
didn't: anchor() resolves computed-value time). Yet we still need
to invalidate layout in this situation, otherwise we'll never enter
the interleaving OOF recalc and evaluate the anchor() function
for real.

Therefore, this CL (effectively) marks for PositionedMovementLayout
in this situation. I do not actually set the the flag in the diff,
however, because the decision to invalidate is based on the new
style alone (i.e. no actual diffing).

Fixed: 333858786
Change-Id: I49d08c0551ae2ce54d08b6ec947e56c5514c0a61
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5445690
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1286396}

--

wpt-commits: 1608f50e923836a9063c64c2f5f177c408a48086
wpt-pr: 45668
This commit is contained in:
Anders Hartvoll Ruud 2024-04-15 16:15:51 +00:00 committed by moz-wptsync-bot
parent 9e66d80df4
commit b4ccdeb562

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<title>CSS Anchor Positioning: Invalidation when the anchor*() fallback matches old style</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
<link rel="help" href="https://issues.chromium.org/issues/333858786">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#cb {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
#anchor {
anchor-name: --a;
position: absolute;
width: 40px;
height: 30px;
left: 75px;
top: 75px;
background: coral;
}
#anchored {
position: absolute;
background: seagreen;
width: 50px;
height: 50px;
}
#anchored.change {
/* The fallbacks match what the unchanged style says, but we shouldn't
take the fallbacks here. */
width: anchor-size(--a width, 50px);
height: anchor-size(--a height, 50px);
}
</style>
<div id=cb>
<div id=anchor></div>
<div id=anchored>X</div>
</div>
<script>
test(() => {
assert_equals(anchored.offsetWidth, 50);
assert_equals(anchored.offsetHeight, 50);
anchored.classList.toggle('change');
assert_equals(anchored.offsetWidth, 40);
assert_equals(anchored.offsetHeight, 30);
}, 'Correct invalidation when fallbacks match the old style');
</script>