tor-browser

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

browser_canvasframe_helper_04.js (4492B)

      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 CanvasFrameAnonymousContentHelper re-inserts the content when the
      7 // page reloads.
      8 
      9 const TEST_URL_1 =
     10  "data:text/html;charset=utf-8,CanvasFrameAnonymousContentHelper test 1";
     11 const TEST_URL_2 =
     12  "data:text/html;charset=utf-8,CanvasFrameAnonymousContentHelper test 2";
     13 
     14 add_task(async function () {
     15  const tab = await addTab(TEST_URL_1);
     16  await SpecialPowers.spawn(
     17    tab.linkedBrowser,
     18    [TEST_URL_2],
     19    async function (url2) {
     20      const { require } = ChromeUtils.importESModule(
     21        "resource://devtools/shared/loader/Loader.sys.mjs"
     22      );
     23      const {
     24        HighlighterEnvironment,
     25      } = require("resource://devtools/server/actors/highlighters.js");
     26      const {
     27        CanvasFrameAnonymousContentHelper,
     28      } = require("resource://devtools/server/actors/highlighters/utils/markup.js");
     29      let doc = content.document;
     30 
     31      const nodeBuilder = () => {
     32        const root = doc.createElement("div");
     33        const child = doc.createElement("div");
     34        child.style =
     35          "pointer-events:auto;width:200px;height:200px;background:red;";
     36        child.id = "child-element";
     37        child.className = "child-element";
     38        child.textContent = "test content";
     39        root.appendChild(child);
     40        return root;
     41      };
     42 
     43      info("Building the helper");
     44      const env = new HighlighterEnvironment();
     45      env.initFromWindow(doc.defaultView);
     46      const helper = new CanvasFrameAnonymousContentHelper(env, nodeBuilder);
     47      await helper.initialize();
     48 
     49      info("Get an element from the helper");
     50      const el = helper.getElement("child-element");
     51 
     52      info("Try to access the element");
     53      is(
     54        el.getAttribute("class"),
     55        "child-element",
     56        "The attribute is correct before navigation"
     57      );
     58      is(
     59        el.getTextContent(),
     60        "test content",
     61        "The text content is correct before navigation"
     62      );
     63 
     64      info("Add an event listener on the element");
     65      let mouseDownHandled = 0;
     66      const onMouseDown = (e, id) => {
     67        is(
     68          id,
     69          "child-element",
     70          "The mousedown event was triggered on the element"
     71        );
     72        mouseDownHandled++;
     73      };
     74      el.addEventListener("mousedown", onMouseDown);
     75 
     76      const once = function once(target, event) {
     77        return new Promise(done => {
     78          target.addEventListener(event, done, { once: true });
     79        });
     80      };
     81 
     82      const synthesizeMouseDown = function synthesizeMouseDown(x, y, win) {
     83        // We need to make sure the inserted anonymous content can be targeted by the
     84        // event right after having been inserted, and so we need to force a sync
     85        // reflow.
     86        win.document.documentElement.offsetWidth;
     87        EventUtils.synthesizeMouseAtPoint(x, y, { type: "mousedown" }, win);
     88      };
     89 
     90      info("Synthesizing an event on the element");
     91      let onDocMouseDown = once(doc, "mousedown");
     92      synthesizeMouseDown(100, 100, doc.defaultView);
     93      await onDocMouseDown;
     94      is(
     95        mouseDownHandled,
     96        1,
     97        "The mousedown event was handled once before navigation"
     98      );
     99 
    100      info("Navigating to a new page");
    101      const loaded = once(this, "load");
    102      content.location = url2;
    103      await loaded;
    104 
    105      // Wait for the next event tick to make sure the remaining part of the
    106      // test is not executed in the microtask checkpoint for load event
    107      // itself.  Otherwise the synthesizeMouseDown doesn't work.
    108      await new Promise(r => content.setTimeout(r, 0));
    109 
    110      // Update to the new document we just loaded
    111      doc = content.document;
    112 
    113      info("Try to access the element again");
    114      is(
    115        el.getAttribute("class"),
    116        "child-element",
    117        "The attribute is correct after navigation"
    118      );
    119      is(
    120        el.getTextContent(),
    121        "test content",
    122        "The text content is correct after navigation"
    123      );
    124 
    125      info("Synthesizing an event on the element again");
    126      onDocMouseDown = once(doc, "mousedown");
    127      synthesizeMouseDown(100, 100, doc.defaultView);
    128      await onDocMouseDown;
    129      is(
    130        mouseDownHandled,
    131        1,
    132        "The mousedown event was not handled after navigation"
    133      );
    134 
    135      info("Destroying the helper");
    136      env.destroy();
    137      helper.destroy();
    138    }
    139  );
    140 
    141  gBrowser.removeCurrentTab();
    142 });