[@container] Add support for scroll-state(snapped:both)

A new value for snapped when snapped in both directions. This is sugaring for scroll-state((snapped:x) and (snapped:y)). Based on request in [1] [1] w3c/csswg-drafts#11181 Bug: 40279568 Change-Id: I8a1ef18c438810cc38cda64ce59a00517e0ab625 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022975 Commit-Queue: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1386118}
tkntjsdw · Nov 21, 2024 · f812fb3 · f812fb3
1 parent d486856
commit f812fb3
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/css/css-conditional/container-queries/scroll-state/at-container-snapped-parsing.html b/css/css-conditional/container-queries/scroll-state/at-container-snapped-parsing.html
@@ -16,6 +16,7 @@
   test_cq_condition_known('scroll-state(snapped: none)');
   test_cq_condition_known('scroll-state(snapped: block)');
   test_cq_condition_known('scroll-state(snapped: inline)');
+  test_cq_condition_known('scroll-state(snapped: both)');
   test_cq_condition_known('(scroll-state(snapped: block))');
   test_cq_condition_known('scroll-state((snapped: inline))');
   test_cq_condition_known('scroll-state(not ((snapped: inline) and (snapped: block)))');

diff --git a/css/css-conditional/container-queries/scroll-state/scroll-state-snapped-both.html b/css/css-conditional/container-queries/scroll-state/scroll-state-snapped-both.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>@container: scroll-state(snapped: both) matching</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
+<script src="/css/css-transitions/support/helper.js"></script>
+<style>
+  :root {
+    scroll-snap-type: both mandatory;
+  }
+  body {
+    margin: 0;
+  }
+  #filler {
+    width: 10000px;
+    height: 10000px;
+  }
+  #snapped {
+    margin-top: 200px;
+    margin-left: 200px;
+    width: 100px;
+    height: 100px;
+    container-type: scroll-state;
+    scroll-snap-align: start;
+    background: teal;
+  }
+
+  @container scroll-state(snapped: both) {
+    #target { --snapped: yes }
+  }
+</style>
+<div id="snapped">
+  <span id="target">My container is snapped</span>
+</div>
+<div id="filler"></div>
+<script>
+  setup(() => assert_implements_scroll_state_container_queries());
+
+  promise_test(async t => {
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).getPropertyValue("--snapped"), "yes");
+    assert_equals(document.documentElement.scrollTop, 200);
+    assert_equals(document.documentElement.scrollLeft, 200);
+  }, "Check that scroll-state(snapped: block) matches");
+</script>