Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 345 insertions, 0 deletions

diff --git a/devtools/client/shared/test/browser_layoutHelpers_getBoxQuads1.js b/devtools/client/shared/test/browser_layoutHelpers_getBoxQuads1.js
new file mode 100644
index 0000000000..4052fe0863
--- /dev/null
+++ b/devtools/client/shared/test/browser_layoutHelpers_getBoxQuads1.js
@@ -0,0 +1,345 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests getAdjustedQuads works properly in a variety of use cases including
+// iframes, scroll and zoom
+
+"use strict";
+
+const TEST_URI = TEST_URI_ROOT + "doc_layoutHelpers_getBoxQuads1.html";
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+
+  info("Running tests");
+
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    // This function allows the Content Task to easily call `FullZoom` API in
+    // the parent process.
+    function sendCommand(cmd) {
+      return SpecialPowers.spawnChrome([cmd], async data => {
+        const window = this.browsingContext.topChromeWindow;
+        switch (data) {
+          case "zoom-enlarge":
+            window.FullZoom.enlarge();
+            break;
+          case "zoom-reset":
+            await window.FullZoom.reset();
+            break;
+          case "zoom-reduce":
+            window.FullZoom.reduce();
+            break;
+        }
+      });
+    }
+
+    const doc = content.document;
+
+    const { require } = ChromeUtils.importESModule(
+      "resource://devtools/shared/loader/Loader.sys.mjs"
+    );
+    const {
+      getAdjustedQuads,
+    } = require("resource://devtools/shared/layout/utils.js");
+
+    ok(typeof getAdjustedQuads === "function", "getAdjustedQuads is defined");
+
+    returnsTheRightDataStructure();
+    isEmptyForMissingNode();
+    isEmptyForHiddenNodes();
+    defaultsToBorderBoxIfNoneProvided();
+    returnsLikeGetBoxQuadsInSimpleCase();
+    takesIframesOffsetsIntoAccount();
+    takesScrollingIntoAccount();
+    await takesZoomIntoAccount();
+    returnsMultipleItemsForWrappingInlineElements();
+
+    function returnsTheRightDataStructure() {
+      info("Checks that the returned data contains bounds and 4 points");
+
+      const node = doc.querySelector("body");
+      const [res] = getAdjustedQuads(doc.defaultView, node, "content");
+
+      ok("bounds" in res, "The returned data has a bounds property");
+      ok("p1" in res, "The returned data has a p1 property");
+      ok("p2" in res, "The returned data has a p2 property");
+      ok("p3" in res, "The returned data has a p3 property");
+      ok("p4" in res, "The returned data has a p4 property");
+
+      for (const boundProp of [
+        "bottom",
+        "top",
+        "right",
+        "left",
+        "width",
+        "height",
+        "x",
+        "y",
+      ]) {
+        ok(
+          boundProp in res.bounds,
+          "The bounds has a " + boundProp + " property"
+        );
+      }
+
+      for (const point of ["p1", "p2", "p3", "p4"]) {
+        for (const pointProp of ["x", "y", "z", "w"]) {
+          ok(
+            pointProp in res[point],
+            point + " has a " + pointProp + " property"
+          );
+        }
+      }
+    }
+
+    function isEmptyForMissingNode() {
+      info("Checks that null is returned for invalid nodes");
+
+      for (const input of [null, undefined, "", 0]) {
+        is(
+          getAdjustedQuads(doc.defaultView, input).length,
+          0,
+          "A 0-length array is returned for input " + input
+        );
+      }
+    }
+
+    function isEmptyForHiddenNodes() {
+      info("Checks that null is returned for nodes that aren't rendered");
+
+      const style = doc.querySelector("#styles");
+      is(
+        getAdjustedQuads(doc.defaultView, style).length,
+        0,
+        "null is returned for a <style> node"
+      );
+
+      const hidden = doc.querySelector("#hidden-node");
+      is(
+        getAdjustedQuads(doc.defaultView, hidden).length,
+        0,
+        "null is returned for a hidden node"
+      );
+    }
+
+    function defaultsToBorderBoxIfNoneProvided() {
+      info(
+        "Checks that if no boxtype is passed, then border is the default one"
+      );
+
+      const node = doc.querySelector("#simple-node-with-margin-padding-border");
+      const [withBoxType] = getAdjustedQuads(doc.defaultView, node, "border");
+      const [withoutBoxType] = getAdjustedQuads(doc.defaultView, node);
+
+      for (const boundProp of [
+        "bottom",
+        "top",
+        "right",
+        "left",
+        "width",
+        "height",
+        "x",
+        "y",
+      ]) {
+        is(
+          withBoxType.bounds[boundProp],
+          withoutBoxType.bounds[boundProp],
+          boundProp + " bound is equal with or without the border box type"
+        );
+      }
+
+      for (const point of ["p1", "p2", "p3", "p4"]) {
+        for (const pointProp of ["x", "y", "z", "w"]) {
+          is(
+            withBoxType[point][pointProp],
+            withoutBoxType[point][pointProp],
+            point +
+              "." +
+              pointProp +
+              " is equal with or without the border box type"
+          );
+        }
+      }
+    }
+
+    function returnsLikeGetBoxQuadsInSimpleCase() {
+      info(
+        "Checks that for an element in the main frame, without scroll nor zoom" +
+          "that the returned value is similar to the returned value of getBoxQuads"
+      );
+
+      const node = doc.querySelector("#simple-node-with-margin-padding-border");
+
+      for (const region of ["content", "padding", "border", "margin"]) {
+        const expected = node.getBoxQuads({
+          box: region,
+        })[0];
+        const [actual] = getAdjustedQuads(doc.defaultView, node, region);
+
+        for (const boundProp of [
+          "bottom",
+          "top",
+          "right",
+          "left",
+          "width",
+          "height",
+          "x",
+          "y",
+        ]) {
+          is(
+            actual.bounds[boundProp],
+            expected.getBounds()[boundProp],
+            boundProp +
+              " bound is equal to the one returned by getBoxQuads for " +
+              region +
+              " box"
+          );
+        }
+
+        for (const point of ["p1", "p2", "p3", "p4"]) {
+          for (const pointProp of ["x", "y", "z", "w"]) {
+            is(
+              actual[point][pointProp],
+              expected[point][pointProp],
+              point +
+                "." +
+                pointProp +
+                " is equal to the one returned by getBoxQuads for " +
+                region +
+                " box"
+            );
+          }
+        }
+      }
+    }
+
+    function takesIframesOffsetsIntoAccount() {
+      info(
+        "Checks that the quad returned for a node inside iframes that have " +
+          "margins takes those offsets into account"
+      );
+
+      const rootIframe = doc.querySelector("iframe");
+      const subIframe = rootIframe.contentDocument.querySelector("iframe");
+      const innerNode = subIframe.contentDocument.querySelector("#inner-node");
+
+      const [quad] = getAdjustedQuads(doc.defaultView, innerNode, "content");
+
+      // rootIframe margin + subIframe margin + node margin + node border + node padding
+      const p1x = 10 + 10 + 10 + 10 + 10;
+      is(quad.p1.x, p1x, "The inner node's p1 x position is correct");
+
+      // Same as p1x + the inner node width
+      const p2x = p1x + 100;
+      is(quad.p2.x, p2x, "The inner node's p2 x position is correct");
+    }
+
+    function takesScrollingIntoAccount() {
+      info(
+        "Checks that the quad returned for a node inside multiple scrolled " +
+          "containers takes the scroll values into account"
+      );
+
+      // For info, the container being tested here is absolutely positioned at 0 0
+      // to simplify asserting the coordinates
+
+      info("Scroll the container nodes down");
+      const scrolledNode = doc.querySelector("#scrolled-node");
+      scrolledNode.scrollTop = 100;
+      const subScrolledNode = doc.querySelector("#sub-scrolled-node");
+      subScrolledNode.scrollTop = 200;
+      const innerNode = doc.querySelector("#inner-scrolled-node");
+
+      let [quad] = getAdjustedQuads(doc.defaultView, innerNode, "content");
+      is(
+        quad.p1.x,
+        0,
+        "p1.x of the scrolled node is correct after scrolling down"
+      );
+      is(
+        quad.p1.y,
+        -300,
+        "p1.y of the scrolled node is correct after scrolling down"
+      );
+
+      info("Scrolling back up");
+      scrolledNode.scrollTop = 0;
+      subScrolledNode.scrollTop = 0;
+
+      [quad] = getAdjustedQuads(doc.defaultView, innerNode, "content");
+      is(
+        quad.p1.x,
+        0,
+        "p1.x of the scrolled node is correct after scrolling up"
+      );
+      is(
+        quad.p1.y,
+        0,
+        "p1.y of the scrolled node is correct after scrolling up"
+      );
+    }
+
+    async function takesZoomIntoAccount() {
+      info(
+        "Checks that if the page is zoomed in/out, the quad returned is correct"
+      );
+
+      // Hard-coding coordinates in this zoom test is a bad idea as it can vary
+      // depending on the platform, so we simply test that zooming in produces a
+      // bigger quad and zooming out produces a smaller quad
+
+      const node = doc.querySelector("#simple-node-with-margin-padding-border");
+      const [defaultQuad] = getAdjustedQuads(doc.defaultView, node);
+
+      info("Zoom in");
+      await sendCommand("zoom-enlarge");
+      const [zoomedInQuad] = getAdjustedQuads(doc.defaultView, node);
+
+      ok(
+        zoomedInQuad.bounds.width > defaultQuad.bounds.width,
+        "The zoomed in quad is bigger than the default one"
+      );
+      ok(
+        zoomedInQuad.bounds.height > defaultQuad.bounds.height,
+        "The zoomed in quad is bigger than the default one"
+      );
+
+      info("Zoom out");
+      await sendCommand("zoom-reset");
+      await sendCommand("zoom-reduce");
+
+      const [zoomedOutQuad] = getAdjustedQuads(doc.defaultView, node);
+
+      ok(
+        zoomedOutQuad.bounds.width < defaultQuad.bounds.width,
+        "The zoomed out quad is smaller than the default one"
+      );
+      ok(
+        zoomedOutQuad.bounds.height < defaultQuad.bounds.height,
+        "The zoomed out quad is smaller than the default one"
+      );
+
+      await sendCommand("zoom-reset");
+    }
+
+    function returnsMultipleItemsForWrappingInlineElements() {
+      info(
+        "Checks that several quads are returned " +
+          "for inline elements that span line-breaks"
+      );
+
+      const node = doc.querySelector("#inline");
+      const quads = getAdjustedQuads(doc.defaultView, node, "content");
+      // At least 3 because of the 2 <br />, maybe more depending on the window size.
+      ok(quads.length >= 3, "Multiple quads were returned");
+
+      is(
+        quads.length,
+        node.getBoxQuads().length,
+        "The same number of boxes as getBoxQuads was returned"
+      );
+    }
+  });
+
+  gBrowser.removeCurrentTab();
+});