[@container] Renaming from state to scroll-state

Fixed pseudo element invalidation that incorrectly checked for stuck query selection instead of scroll-state in general. Bug: 40268059 Change-Id: I5d2d610546128c9c5e1de13c471a0f7e1770cd78 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5975667 Commit-Queue: Rune Lillesveen <[email protected]> Reviewed-by: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1376166}
web-platform-tests · Oct 31, 2024 · a2112d6 · a2112d6
1 parent 9a68349
commit a2112d6
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 0 deletions.
diff --git a/css/css-conditional/container-queries/scroll-state/scroll-state-overflowing-pseudo.html b/css/css-conditional/container-queries/scroll-state/scroll-state-overflowing-pseudo.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<title>@container: scroll-state(overflowing) for pseudo element</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#overflowing">
+<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>
+  #scroller {
+    container-type: scroll-state;
+    overflow: auto;
+    width: 100px;
+    height: 100px;
+  }
+  #wrapper {
+    width: 10px;
+    height: 10px;
+  }
+  #wrapper.large {
+    width: 75px;
+    height: 75px;
+  }
+  #target {
+    width: 200%;
+    height: 200%;
+    --before: no;
+    --after: no;
+    @container scroll-state(overflowing) {
+      &::before {
+        --before: yes;
+        content: " ";
+      }
+      &::after {
+        --after: yes;
+      }
+    }
+  }
+</style>
+<div id="scroller">
+  <div id="wrapper">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  promise_test(async t => {
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target, "::before").getPropertyValue("--before"), "no");
+    assert_equals(getComputedStyle(target, "::after").getPropertyValue("--after"), "no");
+  }, "::before/::after initially not matching");
+
+  promise_test(async t => {
+    wrapper.className = "large";
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target, "::before").getPropertyValue("--before"), "yes");
+    assert_equals(getComputedStyle(target, "::after").getPropertyValue("--after"), "yes");
+  }, "::before/::after matching after content starts overflowing #scroller");
+
+</script>
diff --git a/css/css-conditional/container-queries/scroll-state/scroll-state-snapped-pseudo.html b/css/css-conditional/container-queries/scroll-state/scroll-state-snapped-pseudo.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>@container: scroll-state(snapped) layout change</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#snapped">
+<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: block proximity;
+  }
+  body {
+    margin: 0;
+  }
+  #filler-before {
+    height: 10px;
+  }
+  #filler-after {
+    height: 10000px;
+  }
+  #snapped {
+    position: relative;
+    top: 3000px; /* Should be enough to not snap for proximity */
+    container-type: scroll-state inline-size;
+    scroll-snap-align: start;
+    --before: no;
+    --after: no;
+    @container scroll-state(snapped) {
+      &::before {
+        --before: yes;
+        content: " ";
+      }
+      &::after {
+        --after: yes;
+      }
+    }
+  }
+</style>
+<div id="filler-before"></div>
+<div id="snapped"></div>
+<div id="filler-after"></div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  promise_test(async t => {
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(snapped, "::before").getPropertyValue("--before"), "no");
+    assert_equals(getComputedStyle(snapped, "::after").getPropertyValue("--after"), "no");
+  }, "Initially, snapped query does not match and ::before/::after do not apply");
+
+  promise_test(async t => {
+    snapped.style.top = "auto";
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(snapped, "::before").getPropertyValue("--before"), "yes");
+    assert_equals(getComputedStyle(snapped, "::after").getPropertyValue("--after"), "yes");
+  }, "::before/::after depending on snapped query");
+
+</script>
diff --git a/css/css-conditional/container-queries/scroll-state/scroll-state-stuck-pseudo.html b/css/css-conditional/container-queries/scroll-state/scroll-state-stuck-pseudo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>@container: scroll-state(stuck) for pseudo element</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#stuck">
+<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>
+  #scroller {
+    overflow-y: scroll;
+    height: 200px;
+  }
+  #filler {
+    height: 100px;
+  }
+  #stuck {
+    #inner {
+      height: 50px;
+    }
+    container-type: scroll-state;
+    position: sticky;
+    bottom: 0;
+    --before: no;
+    --after: no;
+    @container scroll-state(stuck: bottom) {
+      &::before {
+        --before: yes;
+        content: " ";
+      }
+      &::after {
+        --after: yes;
+      }
+    }
+  }
+</style>
+<div id="scroller">
+  <div id="filler"></div>
+  <div id="stuck">
+    <div id="inner"></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  promise_test(async t => {
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(stuck, "::before").getPropertyValue("--before"), "no");
+    assert_equals(getComputedStyle(stuck, "::after").getPropertyValue("--after"), "no");
+  }, "Initially, stuck query does not match and ::before/::after do not apply");
+
+  promise_test(async t => {
+    inner.style.height = "150px";
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(stuck, "::before").getPropertyValue("--before"), "yes");
+    assert_equals(getComputedStyle(stuck, "::after").getPropertyValue("--after"), "yes");
+  }, "::before/::after depending on stuck query");
+</script>