test_page.html | Explore in Territory

<!DOCTYPE html>
<meta name="viewport" content="width=device-width initial-scale=1.0" />
<script src="shared.js"></script>
<style>
  #target {
    margin-top: env(safe-area-inset-top);
    margin-left: env(safe-area-inset-left);
    margin-bottom: env(safe-area-inset-bottom);
    margin-right: env(safe-area-inset-right);
  }

  iframe {
    width: 500px;
    height: 500px;
  }
</style>
<div id=target></div>
<button id=fullscreen>go fullscreen</button>
<button id=subframefull>fullscreen subframe</button>
<iframe src=subframe.html id=frame allow=fullscreen></iframe>
<script>
  const frameWindow = document.getElementById('frame').contentWindow;

  document.querySelector('#fullscreen').addEventListener('click', () => {
    document.body.webkitRequestFullscreen();
  }, { once: true });

  document.querySelector('#subframefull').addEventListener('click', () => {
    frameWindow.document.body.webkitRequestFullscreen();
  }, { once: true });

  const viewportTag = document.getElementsByTagName('meta')[0];
  const defaultViewportContent = viewportTag.getAttribute('content');

  function setViewportFit(value) {
    viewportTag.setAttribute('content', defaultViewportContent + ', viewport-fit=' + value);
  }
</script>
chromium/chrome/test/data/android/display_cutout/test_page.html
