Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /dom/base/test/test_document_wireframe.html
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
1 files changed, 354 insertions, 0 deletions
diff --git a/dom/base/test/test_document_wireframe.html b/dom/base/test/test_document_wireframe.html
new file mode 100644
index 0000000000..ddb6ea888d
--- /dev/null
+++ b/dom/base/test/test_document_wireframe.html
@@ -0,0 +1,354 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Tests for document.getWireframe()</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+  <script>
+    /**
+     * This test creates some simple webpages, captures wireframes for them, and
+     * then compares them against some expected wireframe structures.
+     */
+
+    /**
+     * Converts some RGB values into the same uint32_t nsColor representation
+     * that getWireframe uses.
+     *
+     * @param {Number} r
+     *   Red color value.
+     * @param {Number} g
+     *   Green color value.
+     * @param {Number} b
+     *   Blue color value.
+     * @returns {Number}
+     *   The red, green and blue values composed in a single uint32_t-compatible
+     *   value.
+     */
+    function nscolor(r, g, b) {
+      return (255 << 24 | b << 16 | g << 8 | r) >>> 0;
+    }
+
+    const WHITE_NSCOLOR = nscolor(255, 255, 255);
+
+    const RED_RGB = "rgb(255, 0, 0)";
+    const RED_NSCOLOR = nscolor(255, 0, 0);
+    const GREEN_RGB = "rgb(0, 255, 0)";
+    const GREEN_NSCOLOR = nscolor(0, 255, 0);
+    const BLUE_RGB = "rgb(0, 0, 255)";
+    const BLUE_NSCOLOR = nscolor(0, 0, 255);
+    const BLACK_RGB = "rgb(0, 0, 0)";
+    const BLACK_NSCOLOR = nscolor(0, 0, 0);
+    const BUILDER = "http://mochi.test:8888/document-builder.sjs?html=";
+    const TEST_PATH = "http://mochi.test:8888/tests/dom/base/test/";
+
+    /**
+     * This array contains the definition of each test. Each test is an object
+     * that expects two properties:
+     *
+     * {String} html
+     *   The markup to be loaded in the page iframe that a wireframe will be
+     *   generated for.
+     * {Object} expectedWireframe
+     *   An approximation of the wireframe that should be generated. The
+     *   approximation is due to the fact that different platforms and
+     *   execution environments might produce slightly different positioning
+     *   of wireframe rects. We skip comparing the position of the rects, and
+     *   only look at their dimensions (sometimes only one dimension if the
+     *   other is potentially more variable - for example with text). Properties
+     *   included in this object will do a strict comparison with the generated
+     *   wireframe. Properties in the generated wireframe that are not in the
+     *   expectedWireframe will be ignored.
+     */
+    const kTests = [{
+      // Base case: a simple solid background with a single character in the
+      // foreground.
+      html: `
+        <html>
+        <style>
+          body {
+            width: 500px;
+            height: 500px;
+            background-color: ${RED_RGB};
+            color: ${BLACK_RGB};
+            overflow: hidden;
+            font-size: 12px;
+          }
+        </style>
+        <body>x</body>
+        </html>
+      `,
+      expectedWireframe: {
+        canvasBackground: RED_NSCOLOR,
+        rects: [{
+          color: BLACK_NSCOLOR,
+          height: 12,
+          type: "text",
+        }]
+      },
+    }, {
+      // Additional background on top of the main background.
+      html: `
+        <html>
+        <style>
+          body {
+            background-color: ${RED_RGB};
+            color: ${BLACK_RGB};
+            overflow: hidden;
+            font-size: 12px;
+          }
+          div {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 20px;
+            height: 20px;
+            background-color: ${GREEN_RGB};
+          }
+        </style>
+        <body>
+          <div>x</div>
+        </body>
+        </html>
+      `,
+      expectedWireframe: {
+        canvasBackground: RED_NSCOLOR,
+        rects: [{
+          color: GREEN_NSCOLOR,
+          height: 20,
+          width: 20,
+          type: "background",
+        }, {
+          color: BLACK_NSCOLOR,
+          height: 12,
+          type: "text",
+        }]
+      },
+    }, {
+      // Image on top of the main background with another background
+      // floating in the top right.
+      html: `
+        <html>
+        <style>
+          body {
+            background-color: ${RED_RGB};
+            color: ${BLACK_RGB};
+            overflow: hidden;
+            font-size: 12px;
+          }
+          div {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 20px;
+            height: 20px;
+            background-color: ${GREEN_RGB};
+          }
+          img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 50px;
+            width: 50px;
+          }
+        </style>
+        <body>
+          <img src="${TEST_PATH}/green.png"/>
+          <div>x</div>
+        </body>
+        </html>
+      `,
+      expectedWireframe: {
+        canvasBackground: RED_NSCOLOR,
+        rects: [{
+          color: 0,
+          height: 50,
+          width: 50,
+          type: "image",
+        }, {
+          color: GREEN_NSCOLOR,
+          height: 20,
+          width: 20,
+          type: "background",
+        }, {
+          color: BLACK_NSCOLOR,
+          height: 12,
+          type: "text",
+        }]
+      },
+    }, {
+      // Image on top of the main background with another background
+      // floating over the image
+      html: `
+        <html>
+        <style>
+          body {
+            width: 500px;
+            height: 500px;
+            background-color: ${RED_RGB};
+            color: ${BLACK_RGB};
+            overflow: hidden;
+            font-size: 12px;
+          }
+          div {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 20px;
+            height: 20px;
+            background-color: ${BLUE_RGB};
+          }
+          img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 50px;
+            width: 50px;
+          }
+        </style>
+        <body>
+          <img src="${TEST_PATH}/green.png"/>
+          <div>x</div>
+        </body>
+        </html>
+      `,
+      expectedWireframe: {
+        canvasBackground: RED_NSCOLOR,
+        rects: [{
+          color: 0,
+          height: 50,
+          width: 50,
+          type: "image",
+        }, {
+          color: BLUE_NSCOLOR,
+          height: 20,
+          width: 20,
+          type: "background",
+        }, {
+          color: BLACK_NSCOLOR,
+          height: 12,
+          type: "text",
+        }]
+      },
+    }, {
+      // Bug 1759919 - Transformed items incorrectly causing us to not keep hit
+      // testing stuff.
+      html: `
+        <!doctype html>
+        <style>:root { background-color: white; } body { margin: 0 }</style>
+        <div style="transform: rotate(90deg); width: 20px; height: 20px; overflow: clip;">
+          <div style="width: 100%; height: 100%; background-color: blue;"></div>
+        </div>
+        <div style="transform: rotate(90deg); width: 20px; height: 20px; overflow: clip;">
+          <div style="width: 100%; height: 100%; background-color: red;"></div>
+        </div>
+      `,
+      expectedWireframe: {
+        canvasBackground: WHITE_NSCOLOR,
+        rects: [{
+          color: RED_NSCOLOR,
+          height: 20,
+          width: 20,
+          x: 0,
+          y: 0,
+          type: "background",
+        }, {
+          color: BLUE_NSCOLOR,
+          height: 20,
+          width: 20,
+          x: 0,
+          y: 20,
+          type: "background",
+        }],
+      }
+    }];
+
+    /**
+     * Returns a Promise once page has been loaded in frame.
+     *
+     * @param {Element} frame
+     *   The iframe to load the page in.
+     * @param {String} page
+     *   The URL of the page to load in the frame.
+     * @returns Promise
+     * @resolves undefined
+     *   Once the load event has fired for the frame.
+     */
+    function loadInIframe(frame, page) {
+      return new Promise(resolve => {
+        frame.addEventListener("load", resolve, { once: true });
+        frame.src = page;
+      });
+    }
+
+    /**
+     * Compares a generated wireframe to an Object that contains some or all of
+     * the expected structure of the generated wireframe.
+     *
+     * If the wireframe doesn't contain the expected number of rects, the
+     * serialized structure of both the wireframe and approximateWireframe will
+     * be dumped to stdout.
+     *
+     * @param {Wireframe} wireframe
+     *   A wireframe generated via document.getWireframe()
+     * @param {Object} approximateWireframe
+     *   An object that closely resembles a wireframe but the rects in the
+     *   rects property do not need to contain all of the properties expected
+     *   in a WireframeTaggedRect. Skipped properties won't be checked.
+     */
+    function assertApproximateWireframe(wireframe, approximateWireframe) {
+      is(
+        wireframe.canvasBackground,
+        approximateWireframe.canvasBackground,
+        "Canvas backgrounds match."
+      );
+      is(
+        wireframe.rects.length,
+        approximateWireframe.rects.length,
+        "Same rect count"
+      );
+      if (wireframe.rects.length != approximateWireframe.rects.length) {
+        dump(
+          "Generated wireframe: " + JSON.stringify(wireframe, null, "\t") + "\n"
+        );
+        dump(
+          "Expected approximate wireframe: " +
+            JSON.stringify(approximateWireframe, null, "\t") +
+            "\n"
+        );
+      }
+
+      for (let index = 0; index < approximateWireframe.length; ++index) {
+        let wireframeRect = wireframe.rects[index];
+        let approximationRect = approximateWireframe.rects[index];
+        for (let prop of approximationRect) {
+          is(
+            wireframeRect[prop],
+            approximationRect[prop],
+            `Property ${prop} should be equal.`
+          );
+        }
+      }
+    }
+
+    add_task(async () => {
+      const iframe = document.getElementById("iframe");
+
+      for (let testDefinition of kTests) {
+        let pageURL = BUILDER + encodeURIComponent(testDefinition.html);
+        await loadInIframe(iframe, pageURL);
+        let wireframe = SpecialPowers.wrap(
+          iframe.contentDocument
+        ).getWireframe();
+        assertApproximateWireframe(wireframe, testDefinition.expectedWireframe);
+      }
+    });
+  </script>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none"></div>
+<pre id="test"></pre>
+<iframe id="iframe"></iframe>
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /dom/base/test/test_document_wireframe.html
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip