summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/fullscreen/api/resources/recursive-iframe-fullscreen.html
blob: d242a3b3e68753540cbed2c95644ec1a3c92f33e (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
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Recursive IFrame Fullscreen API success reporter</title>
<body>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="../../trusted-click.js"></script>
  <script>
    let child_frame = null;
    const events = [];

    document.onfullscreenchange = () => {
      events.push("fullscreenchange");
    };

    document.onfullscreenerror  = () => {
      events.push("fullscreenerror");
    };

    function send_report() {
      window.top.postMessage(
        {
          name: window.name,
          action: "report",
          report: {
            api: "fullscreen",
            frame: window.name,
            fullscreenElementIsNull: document.fullscreenElement === null,
            events,
          },
        },
        "*"
      );
    }

    async function create_child_frame({ src, name, allow_fullscreen }) {
      child_frame = document.createElement("iframe");
      child_frame.allow = allow_fullscreen ? "fullscreen" : "";
      child_frame.name = name;
      child_frame.style.width = "100%";
      child_frame.style.height = "100%";
      document.body.appendChild(child_frame);
      await new Promise((resolve) => {
        child_frame.addEventListener("load", resolve, { once: true });
        child_frame.src = src;
      });
      window.top.postMessage({ action: "load", name }, "*");
    }

    async function go_fullscreen() {
      await trusted_click(document.body);
      let error;
      try {
        await document.body.requestFullscreen();
      } catch (err) {
        error = err.name;
      } finally {
        window.top.postMessage(
          { action: "requestFullscreen", name: window.name, error },
          "*"
        );
      }
    }

    window.addEventListener("message", async (e) => {
      // Massage is not for us, try to pass it on...
      if (e.data.name !== window.name) {
        child_frame?.contentWindow.postMessage(e.data, "*");
        return;
      }
      switch (e.data.action) {
        case "requestReport":
          send_report();
          break;
        case "requestFullscreen":
          await go_fullscreen();
          break;
        case "addIframe":
          await create_child_frame(e.data.iframe);
          break;
        default:
          window.top.postMessage(e.data, "*");
      }
    });
  </script>
</body>