mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-27 14:52:16 +00:00
Bug 1887957 [wpt PR 45327] - [css-anchor-position] Add basic position-visibility tests, a=testonly
Automatic update from web-platform-tests [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} -- wpt-commits: 88c9bc22612450e1bfd962f4b55b6158c4ce8ff1 wpt-pr: 45327
This commit is contained in:
Philip Rogers
moz-wptsync-bot
parent
0827851f43
commit
c0e4a0ef84
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user