diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/reference')
9 files changed, 442 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-composited-scrolling-006-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-composited-scrolling-006-ref.html new file mode 100644 index 0000000000..92fe187117 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-composited-scrolling-006-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} +#scroller { + width: 200px; + height: 100px; + overflow: scroll; + will-change: scroll-position; +} +#spacer { + height: 400px; +} +#anchor { + width: 100px; + height: 100px; + anchor-name: --a; +} +#overlap { + position: absolute; + width: 100px; + height: 100px; + top: 150px; + left: 0; + z-index: 100; + background: green; +} +</style> + +<div id="overlap"></div> +<div id="scroller"> + <div id="spacer"></div> + <div id="anchor"></div> +</div> + +<script> +scroller.scrollTop = 150; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-fixedpos-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-fixedpos-ref.html new file mode 100644 index 0000000000..e73354df72 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-fixedpos-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; + height: 2000px; +} + +div { + width: 100px; + height: 100px; +} + +#anchor { + margin: 300px; + background: orange; +} + +#anchored { + position: fixed; + left: 400px; + top: 100px; + background: green; +} + +</style> + +<div id="anchor"></div> +<div id="anchored"></div> + +<script> +document.documentElement.scrollTop = 200; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-nested-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-nested-ref.html new file mode 100644 index 0000000000..a651114868 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-nested-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<title>Tests anchor positioned scrolling with nested scroll containers</title> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<style> +body { + margin: 0; + width: 1500px; + height: 1500px; + position: relative; +} + +#outer-scroller { + margin: 500px; + width: 350px; + height: 350px; + outline: 1px solid black; + overflow: scroll; +} + +#inner-scroller { + margin: 100px; + width: 250px; + height: 250px; + outline: 1px solid black; + overflow: scroll; +} + +#anchor { + margin: 200px; + width: 50px; + height: 50px; + background-color: green; +} + +.anchored { + position: fixed; + width: 50px; + height: 50px; + left: 250px; +} + +.above { + top: 200px; + background-color: red; +} + +.below { + top: 300px; + background-color: yellow; +} +</style> + +<div id="outer-scroller"> + <div id="inner-scroller"> + <div id="anchor"></div> + <div class="anchored above"></div> + </div> +</div> + +<div class="anchored below"></div> + +<script> +document.documentElement.scrollTop = 400; +document.documentElement.scrollLeft = 400; + +let outerScroller = document.getElementById('outer-scroller'); +outerScroller.scrollTop = 50; +outerScroller.scrollLeft = 50; + +let innerScroller = document.getElementById('inner-scroller'); +innerScroller.scrollTop = 100; +innerScroller.scrollLeft = 100; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-ref.html new file mode 100644 index 0000000000..06d4a60e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled</title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + font: 20px/1 Ahem; + margin: 0; +} + +#scroll-container { + width: 400px; + height: 400px; + overflow: scroll; +} + +#scroll-contents { + width: 1000px; + height: 1000px; + position: relative; +} + +#placefiller-above-anchor { + height: 500px; +} + +#placefiller-before-anchor { + display: inline-block; + width: 500px; +} + +#inner-anchored { + color: green; + position: fixed; + left: 70px; + top: 180px; +} + +#outer-anchored { + color: yellow; + position: fixed; + left: 70px; + top: 220px; +} +</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> +</div> + +<div id="inner-anchored">inner-anchored</div> +<div id="outer-anchored">outer-anchored</div> + +<script> +const scroller = document.getElementById('scroll-container'); +scroller.scrollTop = 300; +scroller.scrollLeft = 450; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-update-005-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-update-005-ref.html new file mode 100644 index 0000000000..b0c3a820f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-update-005-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> + #cb { + position: absolute; + inset: 0; + } + #scroller { + margin-top: 300px; + overflow-y: scroll; + height: 200px; + } + #spacer { height: 400px; } + #anchor { anchor-name: --a; } + #anchored { + position: absolute; + width: 100px; + height: 100px; + background-color: green; + top: 100px; + left: 0; + } +</style> +<div id="cb"> + <div id="scroller"> + <div id="anchor"></div> + <div id="spacer"></div> + </div> + <div id="anchored"></div> +</div> +<script> +const scroller = document.getElementById('scroller'); +scroller.scrollTop = 200; +</script> + diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-update-006-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-update-006-ref.html new file mode 100644 index 0000000000..c7fbb57e76 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-update-006-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<style> + #cb { + position: absolute; + inset: 0; + } + #scroller { + margin-top: 300px; + overflow-y: scroll; + height: 100px; + } + #spacer { height: 300px; } + #anchor { anchor-name: --a; } + #anchored { + position: absolute; + width: 100px; + height: 100px; + background-color: green; + top: 100px; + left: 0; + } +</style> +<div id="cb"> + <div id="scroller"> + <div id="anchor"></div> + <div id="spacer"></div> + </div> + <div id="anchored"></div> +</div> +<script> +const scroller = document.getElementById('scroller'); +scroller.scrollTop = 200; +</script> + diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-vlr-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-vlr-ref.html new file mode 100644 index 0000000000..01be0823e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-vlr-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<title>Tests that anchor positioned scrolling works in vertical-lr writing mode</title> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +:root { + overflow: clip; +} + +body { + font: 20px/1 Ahem; + margin: 0; + writing-mode: vertical-lr; + white-space: nowrap; +} + +#scroll-container { + width: 400px; + height: 400px; + overflow: scroll; +} + +#scroll-contents { + width: 1000px; + height: 1000px; + position: relative; +} + +#placefiller-above-anchor { + width: 480px; +} + +#placefiller-before-anchor { + display: inline-block; + height: 500px; +} + +#anchor { + anchor-name: --anchor; +} + +#inner-anchored { + color: green; + margin-top: 520px; +} + +#outer-anchored { + color: yellow; + margin-top: 520px; +} +</style> + +<div style="position: relative;"> + <div id="scroll-container"> + <div id="scroll-contents"> + <div id="placefiller-above-anchor"></div> + <div id="outer-anchored">outer-anchored</div> + <div id="placefiller-before-anchor"></div> + <span id="anchor">anchor</span> + <div id="inner-anchored">inner-anchored</div> + </div> + </div> +</div> + +<script> +const scroller = document.getElementById('scroll-container'); +scroller.scrollTop = 450; +scroller.scrollLeft = 300; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-vrl-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-vrl-ref.html new file mode 100644 index 0000000000..2366a7dc09 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-vrl-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<title>Tests that anchor positioned scrolling works in vertical-rl writing mode</title> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-scroll"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +:root { + overflow: clip; +} + +body { + font: 20px/1 Ahem; + margin: 0; + writing-mode: vertical-rl; + white-space: nowrap; +} + +#scroll-container { + width: 400px; + height: 400px; + overflow: scroll; +} + +#scroll-contents { + width: 1000px; + height: 1000px; + position: relative; +} + +#placefiller-above-anchor { + width: 480px; +} + +#placefiller-before-anchor { + display: inline-block; + height: 500px; +} + +#anchor { + anchor-name: --anchor; +} + +#inner-anchored { + margin-top: 520px; + color: green; +} + +#outer-anchored { + margin-top: 520px; + color: yellow; +} +</style> + +<div style="position: relative;"> + <div id="scroll-container"> + <div id="scroll-contents"> + <div id="placefiller-above-anchor"></div> + <div id="inner-anchored">inner-anchored</div> + <div id="placefiller-before-anchor"></div> + <span id="anchor">anchor</span> + <div id="outer-anchored">outer-anchored</div> + </div> + </div> +</div> + +<script> +const scroller = document.getElementById('scroll-container'); +scroller.scrollTop = 450; +scroller.scrollLeft = -300; +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/sticky-anchor-position-invalid-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/sticky-anchor-position-invalid-ref.html new file mode 100644 index 0000000000..3a48755874 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/reference/sticky-anchor-position-invalid-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Anchor queries in sticky positioning is invalid</title> +<style> +#scroll-container { + width: 200px; + height: 200px; + overflow-y: scroll; +} + +#scroller { + height: 400px; +} + +#sticky { + position: sticky; + height: 150px; + background: green; +} +</style> +<div id="scroll-container"> + <div id="scroller"> + <div id="sticky"> + </div> + </div> +</div> +<script> +document.getElementById("scroll-container").scrollTop = 50; +</script> |