at-container-scrollable-parsing.html (2141B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container scrollable query parsing</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrollable"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 8 <div style="container-name:name;container-type:scroll-state"> 9 <main id="cq-main"></main> 10 </div> 11 <script> 12 setup(() => assert_implements_scroll_state_container_queries()); 13 14 test_cq_condition_known('scroll-state(scrollable)'); 15 test_cq_condition_known('scroll-state(scrollable: none)'); 16 test_cq_condition_known('scroll-state(scrollable: top)'); 17 test_cq_condition_known('scroll-state(scrollable: left)'); 18 test_cq_condition_known('scroll-state(scrollable: bottom)'); 19 test_cq_condition_known('scroll-state(scrollable: right)'); 20 test_cq_condition_known('scroll-state(scrollable: inline-start)'); 21 test_cq_condition_known('scroll-state(scrollable: inline-end)'); 22 test_cq_condition_known('scroll-state(scrollable: block-start)'); 23 test_cq_condition_known('scroll-state(scrollable: block-end)'); 24 test_cq_condition_known('scroll-state(scrollable: block)'); 25 test_cq_condition_known('scroll-state(scrollable: x)'); 26 test_cq_condition_known('scroll-state(scrollable: y)'); 27 test_cq_condition_known('scroll-state(scrollable: inline)'); 28 test_cq_condition_known('(scroll-state(scrollable: inline-end))'); 29 test_cq_condition_known('scroll-state((scrollable: left))'); 30 test_cq_condition_known('scroll-state(not ((scrollable: bottom) and (scrollable: right)))'); 31 test_cq_condition_known('scroll-state((scrollable: left) or (scrollable: top))'); 32 33 test_cq_condition_unknown('scroll-state(scrollable: auto)'); 34 test_cq_condition_unknown('scroll-state(scrollable: true)'); 35 test_cq_condition_unknown('scroll-state(style(scrollable: left))'); 36 test_cq_condition_unknown('style(scroll-state(scrollable: left))'); 37 test_cq_condition_unknown('scroll-state(scrollable:)'); 38 </script>