targeted-scroll-marker-selection-with-transition.tentative.html (4558B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Test: selection of scroll-markers for targeted scrolls (with transitions mid-scroll)</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="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: 1600px; 25 height: 512px; 26 overflow-x: scroll; 27 scroll-snap-type: x mandatory; 28 list-style-type: none; 29 scroll-behavior: smooth; 30 border: solid 2px grey; 31 padding-top: 10%; 32 text-align: center; 33 counter-set: markeridx -1; 34 35 &>.item { 36 scroll-snap-align: center; 37 height: 80%; 38 width: 318px; 39 border: 1px solid; 40 place-content: center; 41 42 &::scroll-marker { 43 content: counter(markeridx); 44 counter-increment: markeridx; 45 align-content: center; 46 text-align: center; 47 width: 35px; 48 height: 35px; 49 border: 3px solid gray; 50 border-radius: 50%; 51 margin: 3px; 52 background-color: red; 53 } 54 55 &::scroll-marker:target-current { 56 background-color: green; 57 } 58 } 59 60 .item.active>p { 61 font-size: 2em; 62 } 63 .item>p { 64 transition: font-size 1s ; 65 } 66 67 scroll-marker-group: after; 68 69 &::scroll-marker-group { 70 height: 45px; 71 display: flex; 72 align-items: center; 73 justify-content: center; 74 border: solid 1px black; 75 border-radius: 30px; 76 } 77 } 78 </style> 79 <div class="wrapper" id="wrapper"> 80 <div class="carousel" id="carousel"> 81 <div class="item" id="item0" tabindex=0><p>0</p></div> 82 <div class="item" id="item1" tabindex=0><p>1</p></div> 83 <div class="item" id="item2" tabindex=0><p>2</p></div> 84 <div class="item" id="item3" tabindex=0><p>3</p></div> 85 <div class="item" id="item4" tabindex=0><p>4</p></div> 86 <div class="item" id="item5" tabindex=0><p>5</p></div> 87 <div class="item" id="item6" tabindex=0><p>6</p></div> 88 <div class="item" id="item7" tabindex=0><p>7</p></div> 89 <div class="item" id="item8" tabindex=0><p>8</p></div> 90 <div class="item" id="item9" tabindex=0><p>9</p></div> 91 <div class="item" id="item10" tabindex=0><p>10</p></div> 92 <div class="item" id="item11" tabindex=0><p>11</p></div> 93 <div class="item" id="item12" tabindex=0><p>12</p></div> 94 <div class="item" id="item13" tabindex=0><p>13</p></div> 95 <div class="item" id="item14" tabindex=0><p>14</p></div> 96 <div class="item" id="item15" tabindex=0><p>15</p></div> 97 </div> 98 </div> 99 <script> 100 101 const carousel = document.getElementById("carousel"); 102 const items = document.querySelectorAll(".item"); 103 const wrapper = document.getElementById("wrapper"); 104 105 RED = "rgb(255, 0, 0)"; 106 GREEN = "rgb(0, 128, 0)"; 107 108 const max_scroll_offset = carousel.scrollWidth - carousel.clientWidth; 109 async function testTargetedHasActiveMarker(test, element, expected_idx) { 110 // Start from somewhere in the middle, ensuring that scrolling to the 111 // extremes generates scrollend events. 112 await waitForScrollReset(test, carousel, max_scroll_offset / 2); 113 const color = 114 getComputedStyle(items[expected_idx], "::scroll-marker").backgroundColor; 115 assert_not_equals(color, GREEN, 116 `Target item ${expected_idx} is not selected yet.`); 117 const scrollend_promise = waitForScrollendEventNoTimeout(carousel); 118 element.classList.add("active"); 119 element.scrollIntoView({behavior: "smooth"}); 120 await scrollend_promise; 121 verifySelectedMarker(expected_idx, items, GREEN, RED); 122 element.classList.remove("active"); 123 } 124 125 promise_test(async(t) => { 126 const target_item = items[1]; 127 await testTargetedHasActiveMarker(t, target_item, 1); 128 }, "scroll-marker of target (idx 1) of scrollIntoView is selected"); 129 130 promise_test(async(t) => { 131 const target_item = items[14]; 132 await testTargetedHasActiveMarker(t, target_item, 14); 133 }, "scroll-marker of target (idx 14) of scrollIntoView is selected"); 134 </script> 135 </body> 136 137 </html>