focus-centers-element.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /focus/focus-centers-element.html - WPT Dashboard Interop Dashboard

<!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>