1 files changed, 67 insertions, 0 deletions
diff --git a/toolkit/content/tests/widgets/test_image_recognition.html b/toolkit/content/tests/widgets/test_image_recognition.html
new file mode 100644
index 0000000000..d4dfc6216e
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_image_recognition.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Image recognition test</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script type="text/javascript" src="head.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display"></p>
+
+<div id="content">
+  <img src="image.png" />
+</div>
+
+<pre id="test">
+<script class="testbody">
+  const { TestUtils } = SpecialPowers.ChromeUtils.importESModule(
+    "resource://testing-common/TestUtils.sys.mjs"
+  );
+
+  function pushPref(preferenceName, value) {
+    return new Promise(resolve => {
+      const options = {"set": [[preferenceName, value]]};
+      SpecialPowers.pushPrefEnv(options, resolve);
+    });
+  }
+
+  add_task(async () => {
+    // Performing text recognition in CI can take some time, and test verify runs have
+    // timed out.
+    SimpleTest.requestLongerTimeout(2);
+
+    await pushPref("dom.text-recognition.shadow-dom-enabled", true);
+    const img = document.querySelector("#content img");
+
+    info("Recognizing the image text");
+    const result = await SpecialPowers.wrap(img).recognizeCurrentImageText();
+    is(result.length, 2, "Two words were found.");
+    const mozilla = result.find(r => r.string === "Mozilla");
+    const firefox = result.find(r => r.string === "Firefox");
+
+    ok(mozilla, "The word Mozilla was found.");
+    ok(firefox, "The word Firefox was found.");
+
+    ok(mozilla.quad.p1.x < firefox.quad.p2.x, "The Mozilla text is left of Firefox");
+    ok(mozilla.quad.p1.y > firefox.quad.p2.y, "The Mozilla text is above Firefox");
+
+    const spans = await TestUtils.waitForCondition(
+      () => shadowRootQuerySelectorAll(img, "span"),
+      "Attempting to get image recognition spans."
+    );
+
+    const mozillaSpan = [...spans].find(s => s.innerText === "Mozilla");
+    const firefoxSpan = [...spans].find(s => s.innerText === "Firefox");
+
+    ok(mozillaSpan, "The word Mozilla span was found.");
+    ok(firefoxSpan, "The word Firefox span was found.");
+
+    ok(mozillaSpan.style.transform.startsWith("matrix3d("), "A matrix transform was applied");
+    ok(firefoxSpan.style.transform.startsWith("matrix3d("), "A matrix transform was applied");
+  });
+</script>
+</pre>
+</body>
+</html>