commit 896b506af8c63196cc57567854710a47ea2ff46c parent ca74ac45cbf9776aaf381a9ac7ff89cfb7525127 Author: fantasai <fantasai.bugs@inkedblade.net> Date: Fri, 19 Dec 2025 09:13:51 +0000 Bug 2006176 [wpt PR 56750] - [css-anchor-position-1] Ensure that fixed anchor positioned boxes can be scrolled into view, a=testonly Automatic update from web-platform-tests [css-anchor-position-1] Ensure that fixed anchor positioned boxes can be scrolled into view https://bugs.webkit.org/show_bug.cgi?id=300515 https://commits.webkit.org/302368@main In the past, it was impossible for a fixed-positioned box outside the viewport to be scrolled into view. However, with anchor positioning, scrolling the page can bring the box into view when it has a default anchor. Test that this works correctly. This is especially important for keyboard navigation. -- wpt-commits: 4d9858fd6340a364aace6cb03c3ef41cba3b1f2d wpt-pr: 56750 Diffstat:
21 files changed, 1391 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-000-expected.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-000-expected.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed Box 2D</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: absolute; + position-anchor: --foo; + left: calc(100% - 4em); + top: calc(100% - 4em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should NOT trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(0, 0); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-000-ref.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-000-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed Box 2D</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: absolute; + position-anchor: --foo; + left: calc(100% - 4em); + top: calc(100% - 4em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should NOT trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(0, 0); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-000.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-000.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Test: Scroll-to-Focus Fixed Box 2D</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#position-property"> + +<link rel="match" href="scroll-to-anchored-fixed-000-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: fixed; + position-anchor: --foo; + left: calc(100% - 4em); + top: calc(100% - 4em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should NOT trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-001-expected.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-001-expected.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed anchor()ed Box 2D</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: absolute; + position-anchor: --foo; + left: anchor(left); + top: anchor(top); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-001-ref.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-001-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed anchor()ed Box 2D</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: absolute; + position-anchor: --foo; + left: anchor(left); + top: anchor(top); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-001.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-001.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Test: Scroll-to-Focus Fixed anchor()ed Box 2D</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#scroll"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> + +<link rel="match" href="scroll-to-anchored-fixed-001-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: fixed; + position-anchor: --foo; + left: anchor(left); + top: anchor(top); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-002-expected.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-002-expected.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed position-area Box 2D</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: absolute; + position-anchor: --foo; + position-area: center; + place-self: start; + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-002-ref.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-002-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed position-area Box 2D</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: absolute; + position-anchor: --foo; + position-area: center; + place-self: start; + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-002.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-002.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Test: Scroll-to-Focus Fixed position-area Box 2D</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#scroll"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> + +<link rel="match" href="scroll-to-anchored-fixed-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in both axes */ + .fixed { + position: fixed; + position-anchor: --foo; + position-area: center; + place-self: start; + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-003-expected.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-003-expected.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed anchor()ed Box Vertical</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in vertical axis */ + .fixed { + position: absolute; + position-anchor: --foo; + left: calc(100vw - 5em); + top: anchor(top); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(0, window.scrollY); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-003-ref.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-003-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed anchor()ed Box Vertical</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in vertical axis */ + .fixed { + position: absolute; + position-anchor: --foo; + left: calc(100vw - 5em); + top: anchor(top); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(0, window.scrollY); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-003.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-003.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Test: Scroll-to-Focus Fixed anchor()ed Box Vertical</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#scroll"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> + +<link rel="match" href="scroll-to-anchored-fixed-003-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in vertical axis */ + .fixed { + position: fixed; + position-anchor: --foo; + left: calc(100vw - 5em); + top: anchor(top); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-004-expected.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-004-expected.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed position-area Box Vertical</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in vertical axis */ + .fixed { + position: absolute; + position-anchor: --foo; + position-area: center span-all; + place-self: start; + left: calc(100vw - 5em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(0, window.scrollY); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-004-ref.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-004-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed position-area Box Vertical</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in vertical axis */ + .fixed { + position: absolute; + position-anchor: --foo; + position-area: center span-all; + place-self: start; + left: calc(100vw - 5em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(0, window.scrollY); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-004.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-004.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Test: Scroll-to-Focus Fixed position-area Box Vertical</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#scroll"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> + +<link rel="match" href="scroll-to-anchored-fixed-004-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in vertical axis */ + .fixed { + position: fixed; + position-anchor: --foo; + position-area: center span-all; + place-self: start; + left: calc(100vw - 5em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-005-expected.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-005-expected.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed anchor()ed Box Horizontal</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in horizontal axis */ + .fixed { + position: absolute; + position-anchor: --foo; + top: calc(100vh - 5em); + left: anchor(left); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(window.scrollX, 0); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-005-ref.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-005-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed anchor()ed Box Horizontal</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in horizontal axis */ + .fixed { + position: absolute; + position-anchor: --foo; + top: calc(100vh - 5em); + left: anchor(left); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(window.scrollX, 0); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-005.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-005.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Test: Scroll-to-Focus Fixed anchor()ed Box Horizontal</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#scroll"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> + +<link rel="match" href="scroll-to-anchored-fixed-005-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in horizontal axis */ + .fixed { + position: fixed; + position-anchor: --foo; + top: calc(100vh - 5em); + left: anchor(left); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-006-expected.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-006-expected.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed position-area Box Vertical</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in horizontal axis */ + .fixed { + position: absolute; + position-anchor: --foo; + position-area: span-all center; + place-self: start; + top: calc(100vh - 5em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(window.scrollX, 0); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-006-ref.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-006-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Reference: Scroll-to-Focus Fixed position-area Box Vertical</title> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in horizontal axis */ + .fixed { + position: absolute; + position-anchor: --foo; + position-area: span-all center; + place-self: start; + top: calc(100vh - 5em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + window.scroll(window.scrollX, 0); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script> diff --git a/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-006.html b/testing/web-platform/tests/css/css-anchor-position/scroll-to-anchored-fixed-006.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Test: Scroll-to-Focus Fixed position-area Box Horizontal</title> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#scroll"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> + +<link rel="match" href="scroll-to-anchored-fixed-006-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + /* Force scrolling. */ + body { + border: solid silver; + height: 100vh; + width: 100vw; + } + .anchor { + position: absolute; + top: 100%; + left: 100%; + width: 100vw; + height: 100vh; + border: solid silver; + anchor-name: --foo; + } + + /* Attach to anchor in horizontal axis */ + .fixed { + position: fixed; + position-anchor: --foo; + position-area: span-all center; + place-self: start; + top: calc(100vh - 5em); + padding: 1em 2em; + border: solid orange 10px; + margin: 5px; + } + + /* Avoid pixel differences. */ + .fixed { + font-family: Ahem; + } + a:focus { + outline: solid blue; + } +</style> + +<input value="Tab to the next link →"><br> +<em>This should trigger a scroll operation...</em> + +<div class=anchor></div> +<div class=fixed> + <p><a href="" id=test>One</a> + <p><a href="">Two</a> + <p><a href="">Three</a> +</div> + +<script> +function raf() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} +async function runTest() { + await raf(); + document.getElementById('test').focus(); + await raf(); + document.documentElement.classList.remove('reftest-wait'); +} +runTest(); +</script>