From d9e852bff08220a2a2417f5e9729662cb9e9952e Mon Sep 17 00:00:00 2001
From: Rune Lillesveen <futhark@chromium.org>
Date: Wed, 25 Mar 2026 09:08:26 -0700
Subject: [PATCH] Add tentative scroll-state(stuck) for snapshot timing after
 scroll

Per HTML spec PR[1], run snapshot post-layout state steps is invoked
after layout for each iteration in the resizeObserver loop. Add a
scroll-state() container query test that makes sure a scroll after the
resizeObserver loop does not take effect until after the style/layout
update in the next resizeObserver loop.

[1] https://github.com/whatwg/html/pull/11613/

Bug: 384523570

Change-Id: I9dcf3052db7e04a4c04ecf908d92bb2f85e3d9d8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7691376
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1604862}
---
 ...stuck-snapshot-after-scroll.tentative.html | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 css/css-conditional/container-queries/scroll-state/scroll-state-stuck-snapshot-after-scroll.tentative.html
diff --git a/css/css-conditional/container-queries/scroll-state/scroll-state-stuck-snapshot-after-scroll.tentative.html b/css/css-conditional/container-queries/scroll-state/scroll-state-stuck-snapshot-after-scroll.tentative.html
new file mode 100644
index 00000000000000..73e77a45b93fc3
--- /dev/null
+++ b/css/css-conditional/container-queries/scroll-state/scroll-state-stuck-snapshot-after-scroll.tentative.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<title>@container: scroll-state(stuck) post-layout snapshot after scroll</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#stuck">
+<link rel="help" href="https://github.com/whatwg/html/pull/11613/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #scroller {
+    overflow-y: scroll;
+    height: 300px;
+  }
+  #filler {
+    height: 300px;
+  }
+  #stuck {
+    container-type: scroll-state;
+    position: sticky;
+    top: 0;
+    height: 100px;
+    background-color: teal;
+  }
+  #target {
+    --stuck: no;
+    @container scroll-state(stuck: top) {
+      --stuck: yes;
+    }
+  }
+  #resizeTrigger, #intersectionTrigger {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 10px;
+    height: 10px;
+  }
+  #resizeTrigger.flip {
+    width: 20px;
+    height: 20px;
+  }
+  #intersectionTrigger.flip {
+    top: -1000px;
+  }
+</style>
+<div id="scroller">
+  <div id="stuck">
+    <span id="target"></span>
+  </div>
+  <div id="filler"></div>
+</div>
+<div id="intersectionTrigger"></div>
+<div id="resizeTrigger"></div>
+<script>
+  let resize_observer_callback = undefined;
+  function triggerResizeObserver(callback_function) {
+    resize_observer_callback = callback_function;
+    resizeTrigger.classList.toggle("flip");
+  }
+  (new ResizeObserver(entries => {
+    if (resize_observer_callback) {
+      resize_observer_callback();
+      resize_observer_callback = undefined;
+    }
+  })).observe(resizeTrigger);
+
+  let intersection_observer_callback = undefined;
+  function triggerIntersectionObserver(callback_function) {
+    intersection_observer_callback = callback_function;
+    intersectionTrigger.classList.toggle("flip");
+  }
+  (new IntersectionObserver(entries => {
+    if (intersection_observer_callback) {
+      intersection_observer_callback();
+      intersection_observer_callback = undefined;
+    }
+  })).observe(intersectionTrigger);
+
+  async_test((t) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        triggerResizeObserver(() => {
+          t.step(() => {
+            assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "no",
+                          "Not stuck after first frame");
+            // Change scroll position at intersection observer time to make sure
+            // the new scroll position is not taken into account for rendering
+            // in the current frame.
+            triggerIntersectionObserver(() => { scroller.scrollTop = 100; });
+          });
+        });
+        requestAnimationFrame(() => {
+          t.step(() => {
+            assert_equals(scroller.scrollTop, 100);
+            assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "no");
+          }, "scrollTop changed but snapshot is not updated before updating style and layout in the resizeObserver loop");
+          triggerResizeObserver(() => {
+            t.step(() => {
+              assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "yes");
+              t.done();
+            }, "At resizeObserver time, run snapshot post-layout state steps has been run and rendering was updated accordingly");
+          });
+        });
+      });
+    });
+  }, "Test that stuck state is updated in the resizeObserver loop");
+</script>
