455b1d1788b09e8700dc077d29057ab175a2b42c
[WebKit-https.git] / LayoutTests / media / modern-media-controls / playback-support / playback-support-button-click.html
1 <script src="../../../resources/js-test-pre.js"></script>
2 <script src="../resources/media-controls-loader.js" type="text/javascript"></script>
3 <script src="../resources/media-controls-utils.js" type="text/javascript"></script>
4 <body>
5 <video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls autoplay></video>
6 <div id="shadow"></div>
7 <script type="text/javascript">
8
9 window.jsTestIsAsync = true;
10
11 description("Testing the <code>PlaybackSupport</code> behavior by clicking on the play/pause button.");
12
13 const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
14 const media = document.querySelector("video");
15 const mediaController = createControls(shadowRoot, media, null);
16
17 let numberOfPlayEvents = 0;
18 media.addEventListener("play", function() {
19     numberOfPlayEvents++;
20
21     debug("Media is playing");
22     shouldBeTrue("mediaController.controls.playPauseButton.playing");
23
24     if (numberOfPlayEvents === 1)
25         clickPlayPauseButton();
26     else {
27         debug("");
28         shadowRoot.host.remove();
29         media.remove();
30         finishJSTest();
31     }
32 });
33
34 media.addEventListener("pause", function() {
35     debug("Media is paused");
36     shouldBeFalse("mediaController.controls.playPauseButton.playing");
37
38     clickPlayPauseButton();
39 });
40
41 function clickPlayPauseButton()
42 {
43     debug("");
44     debug("Pressing on the play/pause button");
45     window.requestAnimationFrame(() => pressOnElement(mediaController.controls.playPauseButton.element));
46 }
47
48 </script>
49 <script src="../../../resources/js-test-post.js"></script>
50 </body>