at-container-scrolled-parsing.html (2101B)
1 <!DOCTYPE html> 2 <title>CSS Conditional Test: @container scroll-state(scrolled) 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/#scrolled"> 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(scrolled)'); 15 test_cq_condition_known('scroll-state(scrolled: none)'); 16 test_cq_condition_known('scroll-state(scrolled: top)'); 17 test_cq_condition_known('scroll-state(scrolled: left)'); 18 test_cq_condition_known('scroll-state(scrolled: bottom)'); 19 test_cq_condition_known('scroll-state(scrolled: right)'); 20 test_cq_condition_known('scroll-state(scrolled: inline-start)'); 21 test_cq_condition_known('scroll-state(scrolled: inline-end)'); 22 test_cq_condition_known('scroll-state(scrolled: block-start)'); 23 test_cq_condition_known('scroll-state(scrolled: block-end)'); 24 test_cq_condition_known('scroll-state(scrolled: block)'); 25 test_cq_condition_known('scroll-state(scrolled: x)'); 26 test_cq_condition_known('scroll-state(scrolled: y)'); 27 test_cq_condition_known('scroll-state(scrolled: inline)'); 28 test_cq_condition_known('(scroll-state(scrolled: inline-end))'); 29 test_cq_condition_known('scroll-state((scrolled: left))'); 30 test_cq_condition_known('scroll-state(not ((scrolled: bottom) and (scrolled: right)))'); 31 test_cq_condition_known('scroll-state((scrolled: left) or (scrolled: top))'); 32 33 test_cq_condition_unknown('scroll-state(scrolled: auto)'); 34 test_cq_condition_unknown('scroll-state(scrolled: true)'); 35 test_cq_condition_unknown('scroll-state(style(scrolled: left))'); 36 test_cq_condition_unknown('style(scroll-state(scrolled: left))'); 37 test_cq_condition_unknown('scroll-state(scrolled:)'); 38 </script>