multiple-scroll-state-containers-comma-separated-queries.html (1911B)
1 <!DOCTYPE html> 2 <title>@container: multiple scroll-state containers - comma separated queries</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 7 <style> 8 #combined { 9 container-type: inline-size scroll-state; 10 overflow: scroll; 11 width: 200px; 12 height: 200px; 13 } 14 #outer { 15 container: --container / scroll-state; 16 overflow: scroll; 17 width: 400px; 18 height: 400px; 19 } 20 #inner { 21 container-type: scroll-state; 22 width: 200px; 23 height: 600px; 24 } 25 #target { 26 --match: no; 27 --match-combined: no; 28 } 29 30 @container scroll-state(scrollable), --container scroll-state(scrollable) { 31 #target { --match: yes; } 32 } 33 @container scroll-state(scrollable) { 34 #target { --match: no-way; } 35 } 36 37 @container scroll-state((scrollable:right) and (scrollable:bottom)), 38 (inline-size) and scroll-state((scrollable:right) and (scrollable:bottom)) { 39 #target { --match-combined: yes; } 40 } 41 @container scroll-state((scrollable:right) and (scrollable:bottom)) { 42 #target { --match-combined: no-way; } 43 } 44 </style> 45 <div id="combined"> 46 <div id="outer"> 47 <div id="inner"> 48 <div id="target"></div> 49 </div> 50 </div> 51 </div> 52 <script> 53 setup(() => { 54 assert_implements_scroll_state_container_queries(); 55 assert_implements_size_container_queries(); 56 }); 57 58 test(() => { 59 assert_equals(getComputedStyle(target).getPropertyValue("--match"), "yes"); 60 }, "Should match the named outer container for scroll-state(scrollable)"); 61 62 test(() => { 63 assert_equals(getComputedStyle(target).getPropertyValue("--match-combined"), "yes"); 64 }, "Match the #combined outer container which is also a size container"); 65 </script>