scrollend-event-fired-for-mandatory-snap-point-after-load.html (1914B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="scroll_support.js"></script> 12 <title>scrollend + mandatory scroll snap test</title> 13 14 <style> 15 #root { 16 width: 400px; 17 height: 400px; 18 overflow: auto; 19 scroll-snap-type: y mandatory; 20 border: 1px solid black; 21 --page-height: 400px; 22 } 23 24 #scroller { 25 height: 200px; 26 width: 200px; 27 overflow: auto; 28 border: 1px solid black; 29 --page-height: 200px; 30 } 31 32 .page { 33 height: var(--page-height); 34 scroll-snap-align: start; 35 } 36 37 .hidden { 38 display: none; 39 } 40 </style> 41 </head> 42 43 <body onload="runTests()"> 44 <div id="root" class="hidden"> 45 <h1>scrollend + mandatory scroll snap test</h1> 46 <div id="scroller"> 47 <div class="page"> 48 <p>Page 1</p> 49 </div> 50 <div class="page"> 51 <p>Page 2</p> 52 </div> 53 <div class="page"> 54 <p>Page 3</p> 55 </div> 56 </div> 57 58 <div class="page"> 59 <p>Page A</p> 60 </div> 61 <div class="page"> 62 <p>Page B</p> 63 </div> 64 <div class="page"> 65 <p>Page C</p> 66 </div> 67 </div> 68 69 <script> 70 function runTests() { 71 const root_div = document.getElementById("root"); 72 73 promise_test(async (t) => { 74 const targetScrollendPromise = createScrollendPromiseForTarget(t, root_div); 75 76 await waitForNextFrame(); 77 root_div.classList.remove("hidden"); 78 await waitForNextFrame(); 79 80 await targetScrollendPromise; 81 await verifyScrollStopped(t, root_div); 82 }, "scrollend event fired after load for mandatory snap point"); 83 } 84 </script> 85 </body> 86 87 </html>