[Modern Media Controls] Media Controller: update controls based on fullscreen playbac...
[WebKit-https.git] / LayoutTests / media / modern-media-controls / media-controller / media-controller-fullscreen-change.html
1 <script src="../../../resources/js-test-pre.js"></script>
2 <script src="../resources/media-controls-loader.js" type="text/javascript"></script>
3 <body>
4 <video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
5 <div id="shadow"></div>
6 <script type="text/javascript">
7
8 window.jsTestIsAsync = true;
9
10 description("Testing the <code>MediaController</code> behavior when entering and leaving fullscreen.");
11
12 const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
13 const media = document.querySelector("video");
14 const mediaController = createControls(shadowRoot, media, null);
15
16 const button = document.body.appendChild(document.createElement("button"));
17
18 function enterFullscreen()
19 {
20     if (!("eventSender" in window)) {
21         debug("This test is designed to run in DRT");
22         return;
23     }
24
25     // Click a button so we may enter fullscreen.
26     button.addEventListener("click", event => {
27         try {
28             media.webkitEnterFullscreen();
29         } catch(e) {
30             debug("Toggling fullscreen failed");
31             finishJSTest();
32         }
33     });
34
35     eventSender.mouseMoveTo(button.offsetLeft + 1, button.offsetTop + 1);
36     eventSender.mouseDown();
37     eventSender.mouseUp();
38 }
39
40 media.addEventListener("webkitfullscreenchange", function() {
41     if (media.webkitDisplayingFullscreen) {
42         debug("Media entered fullscreen");
43         shouldBe("mediaController.layoutTraits", "LayoutTraits.macOS | LayoutTraits.Fullscreen");
44         shouldBeTrue("mediaController.controls instanceof MacOSFullscreenMediaControls");
45         debug("");
46         media.webkitExitFullscreen()
47     } else {
48         debug("Media exited fullscreen");
49         shouldBe("mediaController.layoutTraits", "LayoutTraits.macOS");
50         shouldBeTrue("mediaController.controls instanceof MacOSInlineMediaControls");
51
52         debug("");
53         shadowRoot.host.remove();
54         media.remove();
55         button.remove();
56         finishJSTest();
57     }
58 });
59
60 media.addEventListener("loadedmetadata", enterFullscreen);
61
62 </script>
63 <script src="../../../resources/js-test-post.js"></script>
64 </body>