summaryrefslogtreecommitdiffstats
path: root/toolkit/components/pictureinpicture/tests/browser_reversePiP.js
blob: 3f8b43b02bcac99311de5379554baccc671bf020 (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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

/**
 *  Tests that the PiP toggle button is not flipped
 *  on certain websites (such as whereby.com).
 */
add_task(async () => {
  await BrowserTestUtils.withNewTab(
    {
      gBrowser,
      url: TEST_ROOT + "test-reversed.html",
    },
    async browser => {
      await ensureVideosReady(browser);

      let videoID = "reversed";

      // Test the toggle button
      await prepareForToggleClick(browser, videoID);

      // Hover the mouse over the video to reveal the toggle.
      await BrowserTestUtils.synthesizeMouseAtCenter(
        `#${videoID}`,
        {
          type: "mousemove",
        },
        browser
      );
      await BrowserTestUtils.synthesizeMouseAtCenter(
        `#${videoID}`,
        {
          type: "mouseover",
        },
        browser
      );

      let toggleFlippedAttribute = await SpecialPowers.spawn(
        browser,
        [videoID],
        async videoID => {
          let video = content.document.getElementById(videoID);
          let shadowRoot = video.openOrClosedShadowRoot;
          let controlsOverlay = shadowRoot.querySelector(".controlsOverlay");

          await ContentTaskUtils.waitForCondition(() => {
            return controlsOverlay.classList.contains("hovering");
          }, "Waiting for the hovering state to be set on the video.");

          return shadowRoot.firstChild.getAttribute("flipped");
        }
      );

      Assert.equal(
        toggleFlippedAttribute,
        "",
        `The "flipped" attribute should be set on the toggle button (when applicable).`
      );
    }
  );
});

/**
 * Tests that the "This video is playing in Picture-in-Picture" message
 * as well as the video playing in PiP are both not flipped on certain sites
 * (such as whereby.com)
 */
add_task(async () => {
  await BrowserTestUtils.withNewTab(
    {
      gBrowser,
      url: TEST_ROOT + "test-reversed.html",
    },
    async browser => {
      /**
       * A helper function used to get the "flipped" attribute of the video's shadowRoot's first child.
       * @param {Element} browser The <xul:browser> hosting the <video>
       * @param {String} videoID The ID of the video being checked
       */
      async function getFlippedAttribute(browser, videoID) {
        let videoFlippedAttribute = await SpecialPowers.spawn(
          browser,
          [videoID],
          async videoID => {
            let video = content.document.getElementById(videoID);
            let shadowRoot = video.openOrClosedShadowRoot;
            return shadowRoot.firstChild.getAttribute("flipped");
          }
        );
        return videoFlippedAttribute;
      }

      /**
       * A helper function that returns the transform.a of the video being played in PiP.
       * @param {Element} playerBrowser The <xul:browser> of the PiP window
       */
      async function getPiPVideoTransform(playerBrowser) {
        let pipVideoTransform = await SpecialPowers.spawn(
          playerBrowser,
          [],
          async () => {
            let video = content.document.querySelector("video");
            return video.getTransformToViewport().a;
          }
        );
        return pipVideoTransform;
      }

      await ensureVideosReady(browser);

      let videoID = "reversed";

      let videoFlippedAttribute = await getFlippedAttribute(browser, videoID);
      Assert.equal(
        videoFlippedAttribute,
        null,
        `The "flipped" attribute should not be set initially.`
      );

      let pipWin = await triggerPictureInPicture(browser, videoID);

      videoFlippedAttribute = await getFlippedAttribute(browser, "reversed");
      Assert.equal(
        videoFlippedAttribute,
        "true",
        `The "flipped" value should be set once the PiP window is opened (when applicable).`
      );

      let playerBrowser = pipWin.document.getElementById("browser");
      let pipVideoTransform = await getPiPVideoTransform(playerBrowser);
      Assert.equal(pipVideoTransform, -1);

      await ensureMessageAndClosePiP(browser, videoID, pipWin, false);

      videoFlippedAttribute = await getFlippedAttribute(browser, "reversed");
      Assert.equal(
        videoFlippedAttribute,
        null,
        `The "flipped" attribute should be removed after closing PiP.`
      );

      // Now we want to test that regular (not-reversed) videos are unaffected
      videoID = "not-reversed";
      videoFlippedAttribute = await getFlippedAttribute(browser, videoID);
      Assert.equal(videoFlippedAttribute, null);

      pipWin = await triggerPictureInPicture(browser, videoID);

      videoFlippedAttribute = await getFlippedAttribute(browser, videoID);
      Assert.equal(videoFlippedAttribute, null);

      playerBrowser = pipWin.document.getElementById("browser");
      pipVideoTransform = await getPiPVideoTransform(playerBrowser);

      await ensureMessageAndClosePiP(browser, videoID, pipWin, false);
    }
  );
});