scroll-marker-active-unreached-target.html (3371B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Test: test that the scroll-marker of a target whose target position 7 has not been reached only gets selected when it is within half a scroll 8 port's distance from the current scroll offset</title> 9 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#example-d2ca6884"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="support/scroll-marker-support.js"></script> 15 <script src="/dom/events/scrolling/scroll_support.js"></script> 16 </head> 17 18 <body> 19 <style> 20 .wrapper { 21 display: grid; 22 justify-content: center; 23 position: relative; 24 } 25 26 .carousel { 27 width: 600px; 28 height: 512px; 29 overflow-x: scroll; 30 scroll-snap-type: x mandatory; 31 list-style-type: none; 32 scroll-behavior: smooth; 33 border: solid 2px grey; 34 padding-left: 0px; 35 white-space: nowrap; 36 position: relative; 37 38 &>.item { 39 height: 80%; 40 width: 120px; 41 border: 1px solid; 42 place-content: center; 43 background-color: white; 44 margin-right: 1200px; 45 display: inline-block; 46 47 &::scroll-marker { 48 content: ' '; 49 width: 35px; 50 height: 35px; 51 border: 3px solid gray; 52 border-radius: 50%; 53 margin: 3px; 54 background-color:red; 55 } 56 57 &::scroll-marker:target-current { 58 background-color: green; 59 } 60 } 61 62 scroll-marker-group: after; 63 &::scroll-marker-group { 64 height: 45px; 65 display: flex; 66 align-items: center; 67 justify-content: center; 68 border: solid 1px black; 69 border-radius: 30px; 70 } 71 } 72 73 </style> 74 <div id="wrapper" class="wrapper"> 75 <div class="carousel" id="carousel"> 76 <div class="item" id="item1" tabindex=0>1</div> 77 <div class="item" id="item2" tabindex=0>2</div> 78 </div> 79 </div> 80 <script> 81 RED = "rgb(255, 0, 0)"; 82 GREEN = "rgb(0, 128, 0)"; 83 84 promise_test(async (t) => { 85 await waitForCompositorCommit(); 86 const items = carousel.querySelectorAll(".item"); 87 88 assert_equals(carousel.scrollLeft, 0, "carousel is not scrolled"); 89 verifySelectedMarker(0, items, GREEN, RED); 90 91 // Scroll a bit, but not enough to bring item2 into view. Item1 should 92 // still be selected. 93 let pos = item2.offsetLeft - carousel.clientWidth - 10; 94 await waitForScrollReset(t, carousel, pos); 95 verifySelectedMarker(0, items, GREEN, RED); 96 97 // Scroll a bit more; bring item2 into view but only into the second half 98 // of the scroll port. Item1 should still be selected. 99 pos = item2.offsetLeft - carousel.clientWidth + item2.offsetWidth; 100 await waitForScrollReset(t, carousel, pos); 101 verifySelectedMarker(0, items, GREEN, RED); 102 103 // Scroll to place item2 within the half a scroll port's width from the 104 // current scroll offset. Item2 should now be selected. 105 pos += carousel.clientWidth / 2; 106 await waitForScrollReset(t, carousel, pos); 107 verifySelectedMarker(1, items, GREEN, RED); 108 }, "target whose target position is not yet reached only get selected " + 109 "when its less than half a scroll port away."); 110 </script> 111 </body> 112 113 </html>