focus-centers-element.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>focus() centers element outside displayport</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>

#container {
  height: 25vh;
  width: 100vw;
  background: yellow;
  overflow: auto;
  white-space: nowrap;
}

.spacer {
  width: 150vw;
  height: 150vh;
  background: green;
}

#target {
  height: 5vh;
  width: 5vw;
  background: red;
  margin: 0 auto;
}

#container > div {
  display: inline-block;
}

</style>
</head>
<body>
  <div id="container">
    <div class="spacer"></div>
    <!-- Center the target element -->
    <div style="width: 5vw">
      <div style="height: 70vh"></div>
      <div tabindex=0 id="target"></div>
      <div style="height: 70vh"></div>
    </div>
    <div class="spacer"></div>
  </div>
</body>
<script>

function promiseFrame() {
  return new Promise(resolve => {
    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
  });
}

promise_test(async (t) => {
  let target = document.getElementById("target");

  // Focus the element and record the scroll position
  target.focus();
  await promiseFrame();

  let focusLeft = container.scrollLeft;
  let focusTop = container.scrollTop;

  container.scroll(0, 0);

  // scrollIntoView the element and record the scroll position
  target.scrollIntoView({block: "center", inline: "center"});
  await promiseFrame();
  let scrollLeft = container.scrollLeft;
  let scrollTop = container.scrollTop;

  // Ensure that both scroll positions are within +/- 1
  assert_approx_equals(focusLeft, scrollLeft, 1.0,
                       "focus() inline direction is within +/- 1 of a centered scrollIntoView()");
  assert_approx_equals(focusTop, scrollTop, 1.0,
                       "focus() block direction is within +/- 1 of a centered scrollIntoView()");
}, "Element.focus() center in both directions");

</script>
</html>
chromium/third_party/blink/web_tests/external/wpt/focus/focus-centers-element.html
