test_image_recognition.html

Enable keyboard shortcuts

<!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>