summaryrefslogtreecommitdiffstats
path: root/gfx/layers/apz/test/mochitest/browser_test_animations_without_apz_sampler.js
blob: 8fdd20887a870b3c3d58ae1438763ad3ff67241d (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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set sts=2 sw=2 et tw=80: */
"use strict";

Services.scriptloader.loadSubScript(
  "chrome://mochitests/content/browser/browser/components/extensions/test/browser/head.js",
  this
);
Services.scriptloader.loadSubScript(
  "chrome://mochitests/content/browser/browser/components/extensions/test/browser/head_browserAction.js",
  this
);

add_task(async () => {
  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      browser_action: {
        default_popup: "popup.html",
        browser_style: true,
      },
    },

    files: {
      "popup.html": `
        <html>
          <head>
            <meta charset="utf-8">
            <style>
              #target {
                width: 100px;
                height: 50px;
                background: green;
              }
              #target2 {
                width: 100px;
                height: 50px;
                background: green;
              }
            </style>
          </head>
          <body>
            <div id="target"></div>
            <div id="target2"></div>
          </body>
        </html>`,
    },
  });

  await extension.startup();

  async function takeSnapshot(browserWin, callback) {
    let browser = await openBrowserActionPanel(extension, browserWin, true);

    if (callback) {
      await SpecialPowers.spawn(browser, [], callback);
    }

    // Ensure there's no pending paint requests.
    // The below code is a simplified version of promiseAllPaintsDone in
    // paint_listener.js.
    await SpecialPowers.spawn(browser, [], async () => {
      return new Promise(resolve => {
        function waitForPaints() {
          // Wait until paint suppression has ended
          if (SpecialPowers.DOMWindowUtils.paintingSuppressed) {
            dump`waiting for paint suppression to end...`;
            content.window.setTimeout(waitForPaints, 0);
            return;
          }

          if (SpecialPowers.DOMWindowUtils.isMozAfterPaintPending) {
            dump`waiting for paint...`;
            content.window.addEventListener("MozAfterPaint", waitForPaints, {
              once: true,
            });
            return;
          }
          resolve();
        }
        waitForPaints();
      });
    });

    const snapshot = await SpecialPowers.spawn(browser, [], async () => {
      return SpecialPowers.snapshotWindowWithOptions(
        content.window,
        undefined /* use the default rect */,
        undefined /* use the default bgcolor */,
        { DRAWWINDOW_DRAW_VIEW: true } /* to capture scrollbars */
      )
        .toDataURL()
        .toString();
    });

    const popup = getBrowserActionPopup(extension, browserWin);
    await closeBrowserAction(extension, browserWin);
    is(popup.state, "closed", "browserAction popup has been closed");

    return snapshot;
  }

  // Test without apz sampler.
  await SpecialPowers.pushPrefEnv({ set: [["apz.popups.enabled", false]] });

  // Reference
  const newWin = await BrowserTestUtils.openNewBrowserWindow();
  const reference = await takeSnapshot(newWin);
  await BrowserTestUtils.closeWindow(newWin);

  // Test target
  const testWin = await BrowserTestUtils.openNewBrowserWindow();
  const result = await takeSnapshot(testWin, async () => {
    let div = content.window.document.getElementById("target");
    const anim = div.animate({ opacity: [1, 0.5] }, 10);
    await anim.finished;
    const anim2 = div.animate(
      { transform: ["translateX(10px)", "translateX(20px)"] },
      10
    );
    await anim2.finished;

    let div2 = content.window.document.getElementById("target2");
    const anim3 = div2.animate(
      { transform: ["translateX(10px)", "translateX(20px)"] },
      10
    );
    await anim3.finished;
  });
  await BrowserTestUtils.closeWindow(testWin);

  is(result, reference, "The omta property value should be reset");

  await extension.unload();
});