top-layer-nested-dialog.html (1535B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Nested top layer elements and @container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 dialog { color: red; } 9 #container { width: 100px; } 10 #container, #outer { container-type: inline-size; } 11 @container (min-width: 200px) { 12 #outer { width: 400px; color: lime; } 13 } 14 @container (min-width: 400px) { 15 #inner { color: green; } 16 } 17 </style> 18 <div id="container"> 19 <dialog id="outer"> 20 <dialog id="inner"></dialog> 21 </dialog> 22 </div> 23 <script> 24 setup(() => assert_implements_size_container_queries()); 25 26 test(() => { 27 assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)"); 28 assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)"); 29 }, "Dialogs initially not matching for container queries"); 30 31 test(() => { 32 container.offsetTop; 33 outer.showModal(); 34 inner.showModal(); 35 assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)"); 36 assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)"); 37 }, "Dialogs still not matching after showModal"); 38 39 test(() => { 40 container.offsetTop; 41 container.style.width = "200px"; 42 assert_equals(getComputedStyle(outer).color, "rgb(0, 255, 0)"); 43 assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)"); 44 }, "@container queries start matching"); 45 </script>