summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/widgets/test_image_recognition.html
blob: d4dfc6216e5eb9b90c6ae385fc311bdce8793e27 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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>