Bug 1888090 [wpt PR 45364] - [css-anchor-position] Basic support for …

…position-visibility: no-overflow, a=testonly Automatic update from web-platform-tests [css-anchor-position] Basic support for position-visibility: no-overflow w3c/csswg-drafts#7758 (comment) no-overflow hides the abspos if it overflows its inset-modified containing block (after exhausting all position-try options, if relevant). Note this value would apply even when using regular abspos or fixedpos. PaintLayer::SetInvisibleForPositionVisibility to track if the layer needs to be invisible for any position-visibility constraint. The function is called when the abspos needs to be invisible due to no-overflow. The layer, as well certain descendant layers [1] in containing block hierarchy will be skipped during hit-testing and paint. [1] We should skip all descendant layers in containing block hierarchy, but this CL fails to skip self-painting descendant layers if the layer is not a stacking context. The issue will be addressed in a followup. Bug: 329703412 Change-Id: Iee50ef89fbdb6a4c514b1940c45b0d9c41220383 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5398471 Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Xianzhu Wang <[email protected]> Cr-Commit-Position: refs/heads/main@{#1279183} -- wpt-commits: f1d83c9438a4efaf226ec445d23d88bb1bc708ad wpt-pr: 45364
mozilla · Apr 8, 2024 · 8d8f727 · 8d8f727
1 parent 927f406
commit 8d8f727
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 0 deletions.
diff --git a/...platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html b/...platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-no-overflow-ref.html">
+<style>
+  #scroll-container {
+    position: relative;
+    overflow: hidden scroll;
+    width: 400px;
+    height: 100px;
+  }
+
+  .anchor {
+    width: 100px;
+    height: 100px;
+    background: orange;
+    display: inline-block;
+  }
+
+  .target {
+    position: absolute;
+    inset-area: block-end;
+    width: 100px;
+    height: 100px;
+    background: red;
+    top: 0;
+    left: 0;
+  }
+</style>
+
+<div id="scroll-container">
+  <!-- #target1 should not be visible because it overflows the containing block. -->
+  <div class="anchor" style="anchor-name: --a1;">anchor1</div>
+  <div id="target" class="target" style="position-anchor: --a1;">target1</div>
+</div>
+
+<script>
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    target.style.positionVisibility = 'no-overflow';
+    document.documentElement.classList.remove('reftest-wait');
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-ref.html
@@ -17,4 +17,5 @@
 
 <div id="scroll-container">
   <div class="anchor">anchor1</div>
+  <div style="height: 100px"></div>
 </div>
diff --git a/...web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html b/...web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html
@@ -5,6 +5,7 @@
 <link rel="match" href="position-visibility-no-overflow-ref.html">
 <style>
   #scroll-container {
+    position: relative;
     overflow: hidden scroll;
     width: 400px;
     height: 100px;

diff --git a/...eb-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html b/...eb-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  #scroll-container {
+    overflow: hidden scroll;
+    width: 400px;
+    height: 100px;
+  }
+
+  .anchor {
+    width: 100px;
+    height: 100px;
+    background: orange;
+    display: inline-block;
+  }
+
+  .target {
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+
+<div id="scroll-container">
+  <div class="anchor">anchor1</div>
+  <div class="target">target1</div>
+</div>
diff --git a/...tform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html b/...tform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: position-visibility: no-overflow</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-no-overflow-ref.html">
+<style>
+  #scroll-container {
+    position: relative;
+    overflow: hidden scroll;
+    width: 400px;
+    height: 100px;
+  }
+
+  .anchor {
+    width: 100px;
+    height: 100px;
+    background: orange;
+    display: inline-block;
+  }
+
+  .target {
+    position: absolute;
+    position-visibility: no-overflow;
+    inset-area: block-end;
+    width: 100px;
+    height: 100px;
+    background: green;
+    top: 0;
+    left: 0;
+  }
+</style>
+
+<div id="scroll-container">
+  <!-- #target1 should not be visible because it overflows the containing block. -->
+  <div class="anchor" style="anchor-name: --a1;">anchor1</div>
+  <div id="target" class="target" style="position-anchor: --a1;">target1</div>
+</div>
+
+<script>
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    target.style.positionVisibility = 'initial';
+    document.documentElement.classList.remove('reftest-wait');
+  });
+});
+</script>
+</html>