<!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>