Blitz - WPT: scroll-to-anchored-fixed-004.html

wpt / css / css-anchor-position / scroll-to-anchored-fixed-004.html

/css/css-anchor-position/scroll-to-anchored-fixed-004.html

<!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 &rarr;"><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>

/css/css-anchor-position/scroll-to-anchored-fixed-004-ref.html

<!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 &rarr;"><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>