[css-anchor-position] Missing check for PositionAnchor

The presence of position-anchor will affect the passes in OutOfFlowLayoutPart::CalculateOffset(), hence need to be taken into account for storing old style to trigger transitions correctly. This fixes the added test, but not the case in the bug report. Will need to look further into that. Bug: 344506496 Change-Id: I07938b325485f75de35b5f2fd382401257efe061 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5645058 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1318987}
JuhaVainio · Jun 25, 2024 · 5a50219 · 5a50219
1 parent b29c083
commit 5a50219
Showing 1 changed file with 43 additions and 0 deletions.
diff --git a/css/css-anchor-position/anchor-transition-focus.html b/css/css-anchor-position/anchor-transition-focus.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning Test: Transition with unused position-anchor</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  body:has(:focus) {
+    --unused: foo;
+  }
+  #anchored {
+    position: absolute;
+    position-anchor: --foo;
+    top: 0px;
+    transition: top 0.1s steps(2, start);
+  }
+  :focus ~ #anchored {
+    top: 40px;
+  }
+</style>
+<div id="focusable" tabindex="0" focused>Focus me</div>
+<div id="anchored">Anchored</div>
+<script>
+
+  promise_test(async t => {
+    document.body.offsetTop;
+    assert_equals(anchored.offsetTop, 0);
+
+    focusable.focus();
+    assert_equals(anchored.offsetTop, 20);
+
+    const watcher = new EventWatcher(t, anchored, [ "transitionend" ]);
+    await watcher.wait_for("transitionend");
+
+    assert_equals(anchored.offsetTop, 40);
+
+    focusable.blur();
+    assert_equals(anchored.offsetTop, 20);
+
+    await watcher.wait_for("transitionend");
+    assert_equals(anchored.offsetTop, 0);
+  }, "Transition insets with focus()/blur() and unused position-anchor");
+
+</script>