fullscreen/api/resources/recursive-iframe-fullscreen.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Recursive IFrame Fullscreen API success reporter</title>
<body>
<script>
let child_frame = null;
let fullscreen_events = [];
document.onfullscreenchange = () => { fullscreen_events.push(true); };
document.onfullscreenerror = () => { fullscreen_events.push(false); };

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

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%";
  child_frame.src = src;
  document.body.appendChild(child_frame);
}

function trusted_click(callback, container)
{
    let document = container.ownerDocument;
    let button = document.createElement("button");
    button.textContent = "click to continue test";
    button.style.display = "block";
    button.style.fontSize = "20px";
    button.style.padding = "10px";
    button.onclick = function() {
        callback();
        container.removeChild(button);
    };
    container.insertBefore(button, container.firstChild);
}

function go_fullscreen() {
  trusted_click(() => {
    document.body.requestFullscreen().then(() => {
      window.top.postMessage({"action": "ready"}, "*");
    });
  }, document.body);
}

window.addEventListener('message', e => {
  switch (e.data.action) {
    case "requestReport":
      send_report();
      // If we have children tell them to report as well.
      if (child_frame) { child_frame.contentWindow.postMessage(e.data, "*"); }
      break;
    case "requestFullscreen":
      if (e.data.fullscreen.name == window.name) {
        go_fullscreen(e.data);
      } else if (child_frame) { child_frame.contentWindow.postMessage(e.data, "*"); }
      break;
    case "addIframe":
      if (child_frame) {
        child_frame.contentWindow.postMessage(e.data, "*");
      } else {
        create_child_frame(e.data.iframe);
      }
      break;
  }
});

window.onload = function () {
  window.top.postMessage({"action": "ready"}, "*")
}
</script>