tor-browser

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

browser_markup_keybindings_scrolltonode.js (3502B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test the keyboard shortcut "S" used to scroll to the selected node.
      7 
      8 const HTML = `<div style="width: 300px; height: 3000px; position:relative;">
      9    <div id="scroll-top"
     10      style="height: 50px; top: 0; position:absolute;">
     11      TOP</div>
     12    <div id="scroll-bottom"
     13      style="height: 50px; bottom: 0; position:absolute;">
     14      BOTTOM</div>
     15  </div>`;
     16 const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
     17 
     18 add_task(async function () {
     19  const { inspector } = await openInspectorForURL(TEST_URL);
     20 
     21  info("Make sure the markup frame has the focus");
     22  inspector.markup._frame.focus();
     23 
     24  info("Before test starts, #scroll-top is visible, #scroll-bottom is hidden");
     25  await checkElementIsInViewport("#scroll-top", true);
     26  await checkElementIsInViewport("#scroll-bottom", false);
     27 
     28  info("Select the #scroll-bottom node");
     29  await selectNode("#scroll-bottom", inspector);
     30  info("Press S to scroll to the bottom node");
     31  let waitForScroll = BrowserTestUtils.waitForContentEvent(
     32    gBrowser.selectedBrowser,
     33    "scroll"
     34  );
     35  await EventUtils.synthesizeKey("S", {}, inspector.panelWin);
     36  await waitForScroll;
     37  ok(true, "Scroll event received");
     38 
     39  info("#scroll-top should be scrolled out, #scroll-bottom should be visible");
     40  await checkElementIsInViewport("#scroll-top", false);
     41  await checkElementIsInViewport("#scroll-bottom", true);
     42 
     43  info("Select the #scroll-top node");
     44  await selectNode("#scroll-top", inspector);
     45  info("Press S to scroll to the top node");
     46  waitForScroll = BrowserTestUtils.waitForContentEvent(
     47    gBrowser.selectedBrowser,
     48    "scroll"
     49  );
     50  await EventUtils.synthesizeKey("S", {}, inspector.panelWin);
     51  await waitForScroll;
     52  ok(true, "Scroll event received");
     53 
     54  info("#scroll-top should be visible, #scroll-bottom should be scrolled out");
     55  await checkElementIsInViewport("#scroll-top", true);
     56  await checkElementIsInViewport("#scroll-bottom", false);
     57 
     58  info("Select #scroll-bottom node");
     59  await selectNode("#scroll-bottom", inspector);
     60  info("Press shift + S, nothing should happen due to the modifier");
     61  await EventUtils.synthesizeKey("S", { shiftKey: true }, inspector.panelWin);
     62 
     63  info("Same state, #scroll-top is visible, #scroll-bottom is scrolled out");
     64  await checkElementIsInViewport("#scroll-top", true);
     65  await checkElementIsInViewport("#scroll-bottom", false);
     66 });
     67 
     68 /**
     69 * Verify that the element matching the provided selector is either in or out
     70 * of the viewport, depending on the provided "expected" argument.
     71 * Returns a promise that will resolve when the test has been performed.
     72 *
     73 * @param {string} selector
     74 *        css selector for the element to test
     75 * @param {boolean} expected
     76 *        true if the element is expected to be in the viewport, false otherwise
     77 * @return {Promise} promise
     78 */
     79 async function checkElementIsInViewport(selector, expected) {
     80  const isInViewport = await SpecialPowers.spawn(
     81    gBrowser.selectedBrowser,
     82    [selector],
     83    _selector => {
     84      const node = content.document.querySelector(_selector);
     85      const rect = node.getBoundingClientRect();
     86      return (
     87        rect.bottom >= 0 &&
     88        rect.right >= 0 &&
     89        rect.top <= content.innerHeight &&
     90        rect.left <= content.innerWidth
     91      );
     92    }
     93  );
     94 
     95  is(
     96    isInViewport,
     97    expected,
     98    selector + " in the viewport: expected to be " + expected
     99  );
    100 }