[css-anchor-position] Add basic position-visibility tests
This patch adds basic tests for the new position-visibility property.
The specification is in-progress and is based on:
https://github.com/w3c/csswg-drafts/issues/7758#issuecomment-1965540529
Bug: 329703412
Change-Id: I460662f1a131336d9b17cdd597eecf4879c2414e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5393391
Auto-Submit: Philip Rogers <pdr@chromium.org>
Commit-Queue: Philip Rogers <pdr@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1278060}
diff --git a/css/css-anchor-position/position-visibility-anchors-valid-ref.html b/css/css-anchor-position/position-visibility-anchors-valid-ref.html
new file mode 100644
index 0000000..3f86fdc
--- /dev/null
+++ b/css/css-anchor-position/position-visibility-anchors-valid-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ .anchor {
+ width: 100px;
+ height: 100px;
+ background: orange;
+ display: inline-block;
+ }
+</style>
+
+<div class="anchor">anchor1</div>
+
+<div class="anchor">anchor2</div>
+
+<div class="anchor">anchor3</div>
diff --git a/css/css-anchor-position/position-visibility-anchors-valid.tentative.html b/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
new file mode 100644
index 0000000..05a0444
--- /dev/null
+++ b/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: position-visibility: anchors-valid</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-valid-ref.html">
+<style>
+ .anchor {
+ width: 100px;
+ height: 100px;
+ background: orange;
+ display: inline-block;
+ }
+
+ .target {
+ position: absolute;
+ position-visibility: anchors-valid;
+ inset-area: block-end;
+ width: 100px;
+ height: 100px;
+ background: red;
+ top: 0;
+ left: 0;
+ }
+</style>
+
+<!-- #target1 should not be visible because anchor name does not exist. -->
+<div class="anchor" style="anchor-name: --a1;">anchor1</div>
+<div id="target1" class="target" style="position-anchor: --does-not-exist;">target1</div>
+
+<!-- #target2 should not be visible because referenced name in anchor() does not exist. -->
+<div class="anchor" style="anchor-name: --a2;">anchor2</div>
+<div id="target2" class="target" style="position-anchor: --a2; top: anchor(--does-not-exist bottom);">target2</div>
+
+<!-- #target3 should not be visible because referenced name in anchor-size() does not exist. -->
+<div class="anchor" style="anchor-name: --a3;">anchor3</div>
+<div id="target3" class="target" style="position-anchor: --a3; min-width: anchor-width(--does-not-exist width);">target3</div>
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-ref.html b/css/css-anchor-position/position-visibility-anchors-visible-ref.html
new file mode 100644
index 0000000..6f8d3cb
--- /dev/null
+++ b/css/css-anchor-position/position-visibility-anchors-visible-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ #scroll-container {
+ overflow: hidden scroll;
+ width: 400px;
+ height: 100px;
+ }
+
+ #contents-container {
+ height: 400px;
+ }
+
+ .anchor {
+ width: 100px;
+ height: 100px;
+ background: orange;
+ display: inline-block;
+ }
+</style>
+
+<div id="scroll-container">
+ <div id="contents-container">
+ <div class="anchor">anchor1</div>
+
+ <div class="anchor" style="height: 150px;">anchor2</div>
+
+ <div class="anchor" style="height: 150px;">anchor3</div>
+ </div>
+</div>
+
+<script>
+ const scroller = document.getElementById('scroll-container');
+ scroller.scrollTop = 100;
+</script>
diff --git a/css/css-anchor-position/position-visibility-anchors-visible.tentative.html b/css/css-anchor-position/position-visibility-anchors-visible.tentative.html
new file mode 100644
index 0000000..6605bbc
--- /dev/null
+++ b/css/css-anchor-position/position-visibility-anchors-visible.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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-ref.html">
+<style>
+ #scroll-container {
+ overflow: hidden scroll;
+ width: 400px;
+ height: 100px;
+ }
+
+ #contents-container {
+ height: 400px;
+ }
+
+ .anchor {
+ width: 100px;
+ height: 100px;
+ background: orange;
+ display: inline-block;
+ }
+
+ .target {
+ position: absolute;
+ position-visibility: anchors-visible;
+ inset-area: block-end;
+ width: 100px;
+ height: 100px;
+ background: red;
+ top: 0;
+ left: 0;
+ }
+</style>
+
+<div id="scroll-container">
+ <div id="contents-container">
+ <!-- #target1 should not be visible because anchor is scrolled to not be visible. -->
+ <div class="anchor" style="anchor-name: --a1;">anchor1</div>
+ <div id="target1" class="target" style="position-anchor: --a1;">target1</div>
+
+ <!-- #target2 should not be visible because referenced name in anchor() is not visible. -->
+ <div class="anchor" style="anchor-name: --a2; height: 150px;">anchor2</div>
+ <div id="target2" class="target" style="position-anchor: --a2; top: anchor(--a1 bottom);">target2</div>
+
+ <!-- #target3 should not be visible because referenced name in anchor-size() is not visible. -->
+ <div class="anchor" style="anchor-name: --a3; height: 150px;">anchor3</div>
+ <div id="target3" class="target" style="position-anchor: --a3; min-width: anchor-width(--a1 width);">target3</div>
+ </div>
+</div>
+
+<script>
+ const scroller = document.getElementById('scroll-container');
+ scroller.scrollTop = 100;
+</script>
diff --git a/css/css-anchor-position/position-visibility-no-overflow-ref.html b/css/css-anchor-position/position-visibility-no-overflow-ref.html
new file mode 100644
index 0000000..9d11cd8
--- /dev/null
+++ b/css/css-anchor-position/position-visibility-no-overflow-ref.html
@@ -0,0 +1,20 @@
+<!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;
+ }
+</style>
+
+<div id="scroll-container">
+ <div class="anchor">anchor1</div>
+</div>
diff --git a/css/css-anchor-position/position-visibility-no-overflow.tentative.html b/css/css-anchor-position/position-visibility-no-overflow.tentative.html
new file mode 100644
index 0000000..2ce6783
--- /dev/null
+++ b/css/css-anchor-position/position-visibility-no-overflow.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<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 {
+ 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: 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="target1" class="target" style="position-anchor: --a1;">target1</div>
+</div>
