scroll-marker-selection-picks-closest.html (4811B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Test: selection of scroll-markers picks closest</title> 7 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/dom/events/scrolling/scroll_support.js"></script> 11 <script src="/css/css-overflow/support/scroll-marker-support.js"></script> 12 </head> 13 14 <body> 15 <style> 16 .wrapper { 17 display: grid; 18 justify-content: center; 19 } 20 21 .carousel { 22 display: grid; 23 grid-auto-flow: column; 24 width: 512px; 25 height: 512px; 26 overflow-x: scroll; 27 list-style-type: none; 28 border: solid 2px grey; 29 padding-top: 10%; 30 text-align: center; 31 counter-set: markeridx -1; 32 33 &>.item { 34 height: 80%; 35 width: 510px; 36 border: 1px solid; 37 place-content: center; 38 39 &::scroll-marker { 40 content: counter(markeridx); 41 counter-increment: markeridx; 42 align-content: center; 43 text-align: center; 44 width: 35px; 45 height: 35px; 46 border: 3px solid gray; 47 border-radius: 50%; 48 margin: 3px; 49 background-color: red; 50 } 51 52 &::scroll-marker:target-current { 53 background-color: green; 54 } 55 } 56 57 scroll-marker-group: after; 58 59 &::scroll-marker-group { 60 height: 45px; 61 display: flex; 62 align-items: center; 63 justify-content: center; 64 border: solid 1px black; 65 border-radius: 30px; 66 } 67 } 68 </style> 69 <div class="wrapper" id="wrapper"> 70 <div class="carousel" id="carousel"> 71 <div class="item" id="item0" tabindex=0><p>0</p></div> 72 <div class="item" id="item1" tabindex=0><p>1</p></div> 73 <div class="item" id="item2" tabindex=0><p>2</p></div> 74 <div class="item" id="item3" tabindex=0><p>3</p></div> 75 </div> 76 </div> 77 <script> 78 79 const carousel = document.getElementById("carousel"); 80 const items = document.querySelectorAll(".item"); 81 const wrapper = document.getElementById("wrapper"); 82 83 RED = "rgb(255, 0, 0)"; 84 GREEN = "rgb(0, 128, 0)"; 85 86 const max_scroll_offset = carousel.scrollWidth - carousel.clientWidth; 87 async function testActiveMarker(test, scroll_position, expected_idx) { 88 await waitForCompositorCommit(); 89 if (carousel.scrollLeft !== scroll_position) { 90 await waitForScrollReset(test, carousel, scroll_position); 91 } 92 verifySelectedMarker(expected_idx, items, GREEN, RED); 93 } 94 95 const SCROLL_OFFSET_EPSILON = 5; 96 promise_test(async(t) => { 97 await testActiveMarker(t, 0, 0); 98 }, "scroll-marker 0 selected at scrollLeft = 0"); 99 100 promise_test(async(t) => { 101 // Scrolling to just before halfway into item0, scroll-marker 0 should 102 // be selected. 103 const scroll_position = item0.offsetWidth / 2 - SCROLL_OFFSET_EPSILON; 104 await testActiveMarker(t, scroll_position, 0); 105 }, "scroll-marker 0 selected just before mid point of item0"); 106 107 promise_test(async(t) => { 108 // Scrolling to just after halfway into item0, scroll-marker 1 should 109 // be selected. 110 const scroll_position = item0.offsetWidth / 2 + SCROLL_OFFSET_EPSILON; 111 await testActiveMarker(t, scroll_position, 1); 112 }, "scroll-marker 1 selected just after mid point of item0"); 113 114 promise_test(async(t) => { 115 // Scrolling to left edge of item1, scroll-marker 1 should 116 // be selected. 117 const scroll_position = item0.offsetWidth; 118 await testActiveMarker(t, scroll_position, 1); 119 }, "scroll-marker 1 selected at left edge of item1"); 120 121 promise_test(async (t) => { 122 // Scrolling to just before halfway into item1, scroll-marker 1 should 123 // be selected. 124 const scroll_position = item0.offsetWidth + item1.offsetWidth / 2 125 - SCROLL_OFFSET_EPSILON; 126 await testActiveMarker(t, scroll_position, 1); 127 }, "scroll-marker 1 selected just before mid point of item1"); 128 129 promise_test(async(t) => { 130 // Scrolling to just after halfway into item1, scroll-marker 2 should 131 // be selected. 132 const scroll_position = item0.offsetWidth + item1.offsetWidth / 2 133 + SCROLL_OFFSET_EPSILON; 134 await testActiveMarker(t, scroll_position, 2); 135 }, "scroll-marker 2 selected just after mid point of item1"); 136 137 promise_test(async(t) => { 138 // Scrolling to left edge of item2, scroll-marker 2 should 139 // be selected. 140 const scroll_position = item0.offsetWidth + item1.offsetWidth; 141 await testActiveMarker(t, scroll_position, 2); 142 }, "scroll-marker 2 selected just at left edge of item2"); 143 </script> 144 </body> 145 146 </html>