Bug 1904347 [wpt PR 46878] - [css-anchor-position] Missing check for …

…PositionAnchor, a=testonly Automatic update from web-platform-tests [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} -- wpt-commits: 5a502190cceaf65e55e086d68014504236b455f0 wpt-pr: 46878
i3roly · Jun 28, 2024 · fee4d90 · fee4d90
1 parent b19538f
commit fee4d90
Showing 1 changed file with 43 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-transition-focus.html b/testing/web-platform/tests/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>