tor-browser

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

browser_resources_reflows.js (3172B)

      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 ResourceCommand API for reflows
      7 
      8 const {
      9  TYPES,
     10 } = require("resource://devtools/shared/commands/resource/resource-command.js");
     11 
     12 add_task(async function () {
     13  const tab = await addTab(
     14    "https://example.com/document-builder.sjs?html=<h1>Test reflow resources</h1>"
     15  );
     16 
     17  const { client, resourceCommand, targetCommand } =
     18    await initResourceCommand(tab);
     19 
     20  const resources = [];
     21  const onAvailable = _resources => {
     22    resources.push(..._resources);
     23  };
     24  await resourceCommand.watchResources([TYPES.REFLOW], {
     25    onAvailable,
     26  });
     27 
     28  is(resources.length, 0, "No reflow resource were sent initially");
     29 
     30  await SpecialPowers.spawn(tab.linkedBrowser, [], () => {
     31    const el = content.document.createElement("div");
     32    el.textContent = "1";
     33    content.document.body.appendChild(el);
     34  });
     35 
     36  await waitFor(() => resources.length === 1);
     37  checkReflowResource(resources[0]);
     38 
     39  await SpecialPowers.spawn(tab.linkedBrowser, [], () => {
     40    const el = content.document.querySelector("div");
     41    el.style.display = "inline-grid";
     42  });
     43 
     44  await waitFor(() => resources.length === 2);
     45  ok(
     46    true,
     47    "A reflow resource is sent when the display property of an element is modified"
     48  );
     49  checkReflowResource(resources.at(-1));
     50 
     51  info("Check that adding an iframe does emit a reflow");
     52  const iframeBC = await SpecialPowers.spawn(
     53    tab.linkedBrowser,
     54    [],
     55    async () => {
     56      const el = content.document.createElement("iframe");
     57      const onLoaded = ContentTaskUtils.waitForEvent(el, "load");
     58      el.src =
     59        "https://example.org/document-builder.sjs?html=<h2>remote iframe</h2>";
     60      content.document.body.appendChild(el);
     61      await onLoaded;
     62      return el.browsingContext;
     63    }
     64  );
     65 
     66  await waitFor(() => resources.length === 3);
     67  ok(true, "A reflow resource was received when adding a remote iframe");
     68  checkReflowResource(resources.at(-1));
     69 
     70  info("Check that we receive reflow resources for the remote iframe");
     71  await SpecialPowers.spawn(iframeBC, [], () => {
     72    const el = content.document.createElement("section");
     73    el.textContent = "remote org iframe";
     74    el.style.display = "grid";
     75    content.document.body.appendChild(el);
     76  });
     77 
     78  await waitFor(() => resources.length === 4);
     79  ok(
     80    resources.at(-1).targetFront.url.includes("example.org"),
     81    "The reflow resource is linked to the remote target"
     82  );
     83  checkReflowResource(resources.at(-1));
     84 
     85  targetCommand.destroy();
     86  await client.close();
     87 });
     88 
     89 function checkReflowResource(resource) {
     90  is(
     91    resource.resourceType,
     92    TYPES.REFLOW,
     93    "The resource has the expected resourceType"
     94  );
     95 
     96  ok(Array.isArray(resource.reflows), "the `reflows` property is an array");
     97  for (const reflow of resource.reflows) {
     98    is(
     99      Number.isFinite(reflow.start),
    100      true,
    101      "reflow start property is a number"
    102    );
    103    is(Number.isFinite(reflow.end), true, "reflow end property is a number");
    104    Assert.greaterOrEqual(
    105      reflow.end,
    106      reflow.start,
    107      "end is greater than start"
    108    );
    109  }
    110 }