Safe-area edge test

auto.html

<!doctype html>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=auto"
/>
<title>Safe-area edge test</title>
<style>
  html {
    background: #172033;
    color: white;
    font: 16px system-ui;
  }
  body {
    margin: 0;
    min-height: 150vh;
  }
  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  main {
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 90px 16px 16px;
  }
  #stripe {
    position: fixed;
    inset: 0 0 0 auto;
    width: 64px;
    background: repeating-linear-gradient(45deg, gold 0 12px, black 12px 24px);
  }
  .marker {
    position: fixed;
    padding: 12px;
    color: black;
    font-weight: bold;
  }
  #edge {
    top: 60%;
    right: 0;
    background: salmon;
  }
  #safe {
    top: 75%;
    right: env(safe-area-inset-right, 0px);
    background: springgreen;
  }
  #probe {
    visibility: hidden;
    position: fixed;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
</style>
<div id="stripe"></div>
<main>
  <nav style="display: flex; gap: 14px">
    <a style="color: white" href="cover.html">cover</a
    ><a style="color: white" href="auto.html">auto</a
    ><a style="color: white" href="contain.html">contain</a>
  </nav>
  <p>viewport-fit=auto</p>
  <h2>Safe-area edge test</h2>
  <pre id="result"></pre>
</main>
<div id="edge" class="marker">right: 0 →</div>
<div id="safe" class="marker">right: env(…) →</div>
<div id="probe"></div>
<script>
  function measure() {
    const s = getComputedStyle(document.getElementById("probe"));
    document.getElementById("result").textContent =
      "Viewport: " +
      innerWidth +
      " × " +
      innerHeight +
      "\nInsets T/R/B/L:\n" +
      [s.paddingTop, s.paddingRight, s.paddingBottom, s.paddingLeft].join(
        " / ",
      );
  }
  addEventListener("resize", measure);
  visualViewport.addEventListener("resize", measure);
  measure();
</script>

contain.html

<!doctype html>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=contain"
/>
<title>Safe-area edge test</title>
<style>
  html {
    background: #172033;
    color: white;
    font: 16px system-ui;
  }
  body {
    margin: 0;
    min-height: 150vh;
  }
  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  main {
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 90px 16px 16px;
  }
  #stripe {
    position: fixed;
    inset: 0 0 0 auto;
    width: 64px;
    background: repeating-linear-gradient(45deg, gold 0 12px, black 12px 24px);
  }
  .marker {
    position: fixed;
    padding: 12px;
    color: black;
    font-weight: bold;
  }
  #edge {
    top: 60%;
    right: 0;
    background: salmon;
  }
  #safe {
    top: 75%;
    right: env(safe-area-inset-right, 0px);
    background: springgreen;
  }
  #probe {
    visibility: hidden;
    position: fixed;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
</style>
<div id="stripe"></div>
<main>
  <nav style="display: flex; gap: 14px">
    <a style="color: white" href="cover.html">cover</a
    ><a style="color: white" href="auto.html">auto</a
    ><a style="color: white" href="contain.html">contain</a>
  </nav>
  <p>viewport-fit=contain</p>
  <h2>Safe-area edge test</h2>
  <pre id="result"></pre>
</main>
<div id="edge" class="marker">right: 0 →</div>
<div id="safe" class="marker">right: env(…) →</div>
<div id="probe"></div>
<script>
  function measure() {
    const s = getComputedStyle(document.getElementById("probe"));
    document.getElementById("result").textContent =
      "Viewport: " +
      innerWidth +
      " × " +
      innerHeight +
      "\nInsets T/R/B/L:\n" +
      [s.paddingTop, s.paddingRight, s.paddingBottom, s.paddingLeft].join(
        " / ",
      );
  }
  addEventListener("resize", measure);
  visualViewport.addEventListener("resize", measure);
  measure();
</script>

cover.html

<!doctype html>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<title>Safe-area edge test</title>
<style>
  html {
    background: #172033;
    color: white;
    font: 16px system-ui;
  }
  body {
    margin: 0;
    min-height: 150vh;
  }
  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  main {
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 90px 16px 16px;
  }
  #stripe {
    position: fixed;
    inset: 0 0 0 auto;
    width: 64px;
    background: repeating-linear-gradient(45deg, gold 0 12px, black 12px 24px);
  }
  .marker {
    position: fixed;
    padding: 12px;
    color: black;
    font-weight: bold;
  }
  #edge {
    top: 60%;
    right: 0;
    background: salmon;
  }
  #safe {
    top: 75%;
    right: env(safe-area-inset-right, 0px);
    background: springgreen;
  }
  #probe {
    visibility: hidden;
    position: fixed;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
</style>
<div id="stripe"></div>
<main>
  <nav style="display: flex; gap: 14px">
    <a style="color: white" href="cover.html">cover</a
    ><a style="color: white" href="auto.html">auto</a
    ><a style="color: white" href="contain.html">contain</a>
  </nav>
  <p>viewport-fit=cover</p>
  <h2>Safe-area edge test</h2>
  <pre id="result"></pre>
</main>
<div id="edge" class="marker">right: 0 →</div>
<div id="safe" class="marker">right: env(…) →</div>
<div id="probe"></div>
<script>
  function measure() {
    const s = getComputedStyle(document.getElementById("probe"));
    document.getElementById("result").textContent =
      "Viewport: " +
      innerWidth +
      " × " +
      innerHeight +
      "\nInsets T/R/B/L:\n" +
      [s.paddingTop, s.paddingRight, s.paddingBottom, s.paddingLeft].join(
        " / ",
      );
  }
  addEventListener("resize", measure);
  visualViewport.addEventListener("resize", measure);
  measure();
</script>