top-layer-dialog-backdrop.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-contain/container-queries/top-layer-dialog-backdrop.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>CSS Container Queries Test: ::backdrop depending on @container</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">

<link rel="match" href="top-layer-dialog-backdrop-ref.html">

<style>

  html { background: green; }

  #container { container-type: inline-size; }

  @container (max-width: 200px) {

    ::backdrop { display: none; }

    #dialog { visibility: hidden; }

</style>

<div id="container">

  <dialog id="dialog"></dialog>

</div>

<script>

  dialog.showModal();

  dialog.offsetTop;

  container.style.width = "100px";

</script>