| <!DOCTYPE html> |
| <title>CSS Overflow Test: style and scroll-state container for ::scroll-marker-group</title> |
| <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-property"> |
| <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> |
| <style> |
| #container { |
| container-type: inline-size scroll-state; |
| overflow: auto; |
| width: 200px; |
| height: 200px; |
| --container: outer; |
| } |
| #scroller { |
| container-type: inline-size scroll-state; |
| width: 400px; |
| height: 400px; |
| scroll-marker-group: before; |
| --container: inner; |
| @container not scroll-state(scrollable) { |
| &::scroll-marker-group { --scroll-state-test: pass; } |
| } |
| @container style(--container: inner) { |
| &::scroll-marker-group { --style-test: pass; } |
| } |
| } |
| </style> |
| <div id="container"> |
| <div id="scroller"></div> |
| </div> |
| <script> |
| test(() => { |
| assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--scroll-state-test"), "pass"); |
| }, "::scroll-marker-group should not skip originating element for scroll-state queries"); |
| |
| test(() => { |
| assert_equals(getComputedStyle(scroller, "::scroll-marker-group").getPropertyValue("--style-test"), "pass"); |
| }, "::scroll-marker-group should not skip originating element for style queries"); |
| </script> |
