tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

focus-centers-element.html (2002B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset=utf-8>
      5 <meta name="viewport" content="width=device-width,initial-scale=1">
      6 <title>focus() centers element outside displayport</title>
      7 <script src=/resources/testharness.js></script>
      8 <script src=/resources/testharnessreport.js></script>
      9 <style>
     10 
     11 #container {
     12  height: 25vh;
     13  width: 100vw;
     14  background: yellow;
     15  overflow: auto;
     16  white-space: nowrap;
     17 }
     18 
     19 .spacer {
     20  width: 150vw;
     21  height: 150vh;
     22  background: green;
     23 }
     24 
     25 #target {
     26  height: 5vh;
     27  width: 5vw;
     28  background: red;
     29  margin: 0 auto;
     30 }
     31 
     32 #container > div {
     33  display: inline-block;
     34 }
     35 
     36 </style>
     37 </head>
     38 <body>
     39  <div id="container">
     40    <div class="spacer"></div>
     41    <!-- Center the target element -->
     42    <div style="width: 5vw">
     43      <div style="height: 70vh"></div>
     44      <div tabindex=0 id="target"></div>
     45      <div style="height: 70vh"></div>
     46    </div>
     47    <div class="spacer"></div>
     48  </div>
     49 </body>
     50 <script>
     51 
     52 function promiseFrame() {
     53  return new Promise(resolve => {
     54    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
     55  });
     56 }
     57 
     58 promise_test(async (t) => {
     59  let target = document.getElementById("target");
     60 
     61  // Focus the element and record the scroll position
     62  target.focus();
     63  await promiseFrame();
     64 
     65  let focusLeft = container.scrollLeft;
     66  let focusTop = container.scrollTop;
     67 
     68  container.scroll(0, 0);
     69 
     70  // scrollIntoView the element and record the scroll position
     71  target.scrollIntoView({block: "center", inline: "center"});
     72  await promiseFrame();
     73  let scrollLeft = container.scrollLeft;
     74  let scrollTop = container.scrollTop;
     75 
     76  // Ensure that both scroll positions are within +/- 1
     77  assert_approx_equals(focusLeft, scrollLeft, 1.0,
     78                       "focus() inline direction is within +/- 1 of a centered scrollIntoView()");
     79  assert_approx_equals(focusTop, scrollTop, 1.0,
     80                       "focus() block direction is within +/- 1 of a centered scrollIntoView()");
     81 }, "Element.focus() center in both directions");
     82 
     83 </script>
     84 </html>