| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS Test: scroll tracking for ::scroll-markers on 2-D scrollers selects from block and then from inline. </title> | |
| <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#active-scroll-marker"> | |
| <link rel="match" href="scroll-marker-selection-in-2d-ref.html"> | |
| </head> | |
| <body> | |
| <style> | |
| .scroller { | |
| width: 200px; | |
| height: 200px; | |
| position: relative; | |
| border: solid; | |
| scroll-marker-group: after; | |
| overflow: scroll; | |
| &::scroll-marker-group { | |
| height: 100px; | |
| width: 200px; | |
| border: solid; | |
| display: grid; | |
| grid-auto-flow: column; | |
| white-space: nowrap; | |
| }; | |
| } | |
| .vwm { /* vertical writing-mode */ | |
| writing-mode: vertical-lr; | |
| } | |
| .box { | |
| position: absolute; | |
| height: 50px; | |
| width: 50px; | |
| font-size: 50px; | |
| background-color: blue; | |
| &::scroll-marker { | |
| height: 40px; | |
| width: 40px; | |
| font-size: 20px; | |
| display: inline-block; | |
| } | |
| &::scroll-marker:target-current { | |
| border: solid blue; | |
| } | |
| } | |
| .top_right { | |
| top: 0px; | |
| left: 100px; | |
| &::scroll-marker { | |
| content: ""; | |
| background-color: teal; | |
| } | |
| } | |
| .bottom_left { | |
| top: 100px; | |
| left: 0px; | |
| &::scroll-marker { | |
| content: ""; | |
| background-color: brown; | |
| } | |
| } | |
| .space { | |
| height: 800px; | |
| width: 800px; | |
| position: absolute; | |
| } | |
| </style> | |
| <div> | |
| <div class="scroller"> | |
| <div class="space"></div> | |
| <div class="top_right box">TR</div> | |
| <div class="bottom_left box">BL</div> | |
| </div> | |
| <div class="vwm scroller"> | |
| <div class="space"></div> | |
| <div class="top_right box">TR</div> | |
| <div class="bottom_left box">BL</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |