diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
commit | 8dd16259287f58f9273002717ec4d27e97127719 (patch) | |
tree | 3863e62a53829a84037444beab3abd4ed9dfc7d0 /testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html | |
parent | Releasing progress-linux version 126.0.1-1~progress7.99u1. (diff) | |
download | firefox-8dd16259287f58f9273002717ec4d27e97127719.tar.xz firefox-8dd16259287f58f9273002717ec4d27e97127719.zip |
Merging upstream version 127.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html new file mode 100644 index 0000000000..b57e39956b --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled in overflow:hidden</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="match" href="anchor-scroll-overflow-hidden-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + font: 20px/1 Ahem; + margin: 0; +} + +#scroll-container { + width: 400px; + height: 400px; + overflow: hidden; +} + +#scroll-contents { + width: 1000px; + height: 1000px; +} + +#placefiller-above-anchor { + height: 500px; +} + +#placefiller-before-anchor { + display: inline-block; + width: 500px; +} + +#anchor { + anchor-name: --anchor; +} + +#inner-anchored { + color: green; + position: absolute; + left: anchor(--anchor left); + bottom: anchor(--anchor top); + position-anchor: --anchor; +} + +#outer-anchored { + color: yellow; + position: absolute; + left: anchor(--anchor left); + top: anchor(--anchor bottom); + position-anchor: --anchor; +} +</style> + +<div id="scroll-container"> + <div id="scroll-contents"> + <div id="placefiller-above-anchor"></div> + <div id="placefiller-before-anchor"></div> + <span id="anchor">anchor</span> + <div id="inner-anchored">inner-anchored</div> + </div> +</div> +<div id="outer-anchored">outer-anchored</div> + +<script> +const scroller = document.getElementById('scroll-container'); +scroller.scrollTop = 300; +scroller.scrollLeft = 450; +</script> |