top-layer-nested-dialog.html

Enable keyboard shortcuts

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

<!doctype html>

<title>CSS Container Queries Test: Nested top layer elements and @container</title>

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

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="support/cq-testcommon.js"></script>

<style>

  dialog { color: red; }

  #container { width: 100px; }

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

  @container (min-width: 200px) {

    #outer { width: 400px; color: lime; }

  @container (min-width: 400px) {

    #inner { color: green; }

</style>

<div id="container">

  <dialog id="outer">

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

  </dialog>

</div>

<script>

  setup(() => assert_implements_size_container_queries());

  test(() => {

    assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)");

  }, "Dialogs initially not matching for container queries");

  test(() => {

    container.offsetTop;

    outer.showModal();

    inner.showModal();

    assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)");

  }, "Dialogs still not matching after showModal");

  test(() => {

    container.offsetTop;

    container.style.width = "200px";

    assert_equals(getComputedStyle(outer).color, "rgb(0, 255, 0)");

    assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)");

  }, "@container queries start matching");

</script>