Bug 2057630 Part 6 - Add WPT to exercise sticky and transform. r=layout-reviewers,dshin

`anchor-scroll-to-sticky-006.html` renders the same as `anchor-scroll-to-sticky-005`. The only difference between the two tests is that 006 has an identity `scale: 1` added to `#sticky` to exercise the anchor transform code path. Differential Revision: https://phabricator.services.mozilla.com/D325535
2026-09-12 19:49:23 +00:00
parent e1b54aa821
commit 7c24ec4123
1 changed files with 68 additions and 0 deletions
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+<title>Test: Fixed box anchors to sticky child while scrolling, with a transform on the sticky element</title>
+<link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
+<link rel="match" href="anchor-scroll-to-sticky-005-ref.html">
+
+<style>
+#sticky {
+  position: sticky;
+  inset-block-start: 0;
+  background: teal;
+  border: 10px solid aqua;
+  color: white;
+  anchor-name: --sticky;
+  scale: 1; /* Identity transform to exercise the anchor transform code path. */
+}
+
+#child {
+  anchor-name: --sticky-child;
+  background: blue;
+  border: 5px solid navy;
+  margin-inline: 25%;
+}
+
+.anchored {
+  position: absolute;
+  background: fuchsia;
+  padding: 4px;
+}
+.anchored.positionArea {
+  position-area: bottom span-right;
+}
+.anchored.anchorFunction {
+  top: anchor(outside);
+  right: anchor(inside);
+ }
+
+.anchored.sticky {
+  position-anchor: --sticky;
+}
+.anchored.sticky-child {
+  position-anchor: --sticky-child;
+}
+
+:root {
+  padding: 40px;
+  block-size: 200%;
+}
+body {
+  border: 2px dashed;
+  height: 100%;
+}
+</style>
+
+<div id="sticky">Sticky
+  <div id="child">Sticky Child</div>
+</div>
+<div class="anchored sticky positionArea">Anchored to Sticky</div>
+<div class="anchored sticky-child positionArea">Anchored to Child</div>
+<div class="anchored sticky anchorFunction">Anchored to Sticky</div>
+<div class="anchored sticky-child anchorFunction">Anchored to Child</div>
+
+<script>
+window.scrollBy(0, 100);
+document.documentElement.removeAttribute('class');
+</script>