Bug 1889707 [wpt PR 45550] - [css-anchor-position] Support CSS visibi…

…lity for anchors-visible, a=testonly Automatic update from web-platform-tests [css-anchor-position] Support CSS visibility for anchors-visible We previously supported position-visibility: anchors-visible only for the "intersection visibility" of the anchor element. This patch extends anchors-visible to also be based on the CSS visibility of the anchor element. Implementation notes: * CSS visibility of anchor elements can change without notifying the anchored element. To catch these style changes, we loop over all used anchor elements every lifecycle update with `LocalFrame::CheckPositionAnchorsForCssVisibilityChanges`. * LayerPositionVisibility has been introduced to support the two aspects of anchors-visible visibility. These can be tracked independently. Spec: w3c/csswg-drafts#7758 (comment) Bug: 332663437 Change-Id: Id043217fb33308c7af35a3d9fbe103a5c552a34a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5425736 Reviewed-by: Xianzhu Wang <[email protected]> Commit-Queue: Philip Rogers <[email protected]> Cr-Commit-Position: refs/heads/main@{#1282626} -- wpt-commits: 9417ab6082dc381eda5c3ef4f198c6a8cce03fe7 wpt-pr: 45550
mozilla · Apr 10, 2024 · dd82e27 · dd82e27
1 parent e73c93b
commit dd82e27
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 0 deletions.
diff --git a/...ss/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html b/...ss/css-anchor-position/position-visibility-anchors-visible-change-css-visibility-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  #anchor {
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+  #target {
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+<div id="anchor">anchor</div>
+<div id="target">target</div>
diff --git a/...-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html b/...-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<meta name="assert" content="Position-visibility: anchors-visible should show an element after an anchor changes from visibility: hidden to visibility: visible." />
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-visible-change-css-visibility-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+  #container {
+    visibility: hidden;
+  }
+
+  #anchor {
+    anchor-name: --a1;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  #target {
+    position-anchor: --a1;
+    position-visibility: anchors-visible;
+    inset-area: bottom;
+    width: 100px;
+    height: 100px;
+    background: green;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>
+
+<div id="container">
+  <div id="anchor">anchor</div>
+</div>
+<div id="target">target</div>
+
+<script>
+  // #target should be initially hidden because it is anchored to #anchor,
+  // which is hidden with "visibility: hidden".
+
+  waitForAtLeastOneFrame().then(() => {
+    // Change #container to "visibility: visible". #target should become
+    // visible again, because #anchor is no longer hidden.
+    container.style.visibility = 'visible';
+    takeScreenshot();
+  });
+</script>
diff --git a/...tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html b/...tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<!-- This test passes if both the anchor and anchored elements are hidden. -->
diff --git a/...css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html b/...css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="assert" content="Position-visibility: anchors-visible should hide an element with an anchor that has visibility: hidden." />
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-visible-css-visibility-ref.html">
+<style>
+  #container {
+    visibility: hidden;
+  }
+
+  #anchor {
+    anchor-name: --a1;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  #target {
+    position-anchor: --a1;
+    position-visibility: anchors-visible;
+    inset-area: bottom right;
+    width: 100px;
+    height: 100px;
+    background: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>
+
+<div id="container">
+  <div id="anchor">anchor</div>
+</div>
+<div id="target">target</div>