11cb0ef41Sopenharmony_ci<!DOCTYPE html> 21cb0ef41Sopenharmony_ci<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 31cb0ef41Sopenharmony_ci<script src="/resources/testharness.js"></script> 41cb0ef41Sopenharmony_ci<script src="/resources/testharnessreport.js"></script> 51cb0ef41Sopenharmony_ci<script src="/resources/testdriver.js"></script> 61cb0ef41Sopenharmony_ci<script src="/resources/testdriver-actions.js"></script> 71cb0ef41Sopenharmony_ci<script src="/resources/testdriver-vendor.js"></script> 81cb0ef41Sopenharmony_ci<script src="scroll_support.js"></script> 91cb0ef41Sopenharmony_ci<style> 101cb0ef41Sopenharmony_cidiv { 111cb0ef41Sopenharmony_ci position: absolute; 121cb0ef41Sopenharmony_ci} 131cb0ef41Sopenharmony_ci#scroller { 141cb0ef41Sopenharmony_ci width: 500px; 151cb0ef41Sopenharmony_ci height: 500px; 161cb0ef41Sopenharmony_ci overflow: scroll; 171cb0ef41Sopenharmony_ci scroll-snap-type: both mandatory; 181cb0ef41Sopenharmony_ci border: solid black 5px; 191cb0ef41Sopenharmony_ci} 201cb0ef41Sopenharmony_ci#space { 211cb0ef41Sopenharmony_ci width: 2000px; 221cb0ef41Sopenharmony_ci height: 2000px; 231cb0ef41Sopenharmony_ci} 241cb0ef41Sopenharmony_ci.target { 251cb0ef41Sopenharmony_ci width: 200px; 261cb0ef41Sopenharmony_ci height: 200px; 271cb0ef41Sopenharmony_ci scroll-snap-align: start; 281cb0ef41Sopenharmony_ci background-color: blue; 291cb0ef41Sopenharmony_ci} 301cb0ef41Sopenharmony_ci</style> 311cb0ef41Sopenharmony_ci 321cb0ef41Sopenharmony_ci<body style="margin:0" onload=runTests()> 331cb0ef41Sopenharmony_ci <div id="scroller"> 341cb0ef41Sopenharmony_ci <div id="space"></div> 351cb0ef41Sopenharmony_ci <div class="target" style="left: 0px; top: 0px;"></div> 361cb0ef41Sopenharmony_ci <div class="target" style="left: 80px; top: 80px;"></div> 371cb0ef41Sopenharmony_ci <div class="target" style="left: 200px; top: 200px;"></div> 381cb0ef41Sopenharmony_ci </div> 391cb0ef41Sopenharmony_ci</body> 401cb0ef41Sopenharmony_ci 411cb0ef41Sopenharmony_ci<script> 421cb0ef41Sopenharmony_civar scroller = document.getElementById("scroller"); 431cb0ef41Sopenharmony_civar space = document.getElementById("space"); 441cb0ef41Sopenharmony_ciconst MAX_FRAME_COUNT = 700; 451cb0ef41Sopenharmony_ciconst MAX_UNCHANGED_FRAME = 20; 461cb0ef41Sopenharmony_ci 471cb0ef41Sopenharmony_cifunction scrollTop() { 481cb0ef41Sopenharmony_ci return scroller.scrollTop; 491cb0ef41Sopenharmony_ci} 501cb0ef41Sopenharmony_ci 511cb0ef41Sopenharmony_civar scroll_arrived_after_scroll_end = false; 521cb0ef41Sopenharmony_civar scroll_end_arrived = false; 531cb0ef41Sopenharmony_ciscroller.addEventListener("scroll", () => { 541cb0ef41Sopenharmony_ci if (scroll_end_arrived) 551cb0ef41Sopenharmony_ci scroll_arrived_after_scroll_end = true; 561cb0ef41Sopenharmony_ci}); 571cb0ef41Sopenharmony_ciscroller.addEventListener("scrollend", () => { 581cb0ef41Sopenharmony_ci scroll_end_arrived = true; 591cb0ef41Sopenharmony_ci}); 601cb0ef41Sopenharmony_ci 611cb0ef41Sopenharmony_cifunction runTests() { 621cb0ef41Sopenharmony_ci promise_test (async () => { 631cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 641cb0ef41Sopenharmony_ci await touchScrollInTarget(100, scroller, 'down'); 651cb0ef41Sopenharmony_ci // Wait for the scroll snap animation to finish. 661cb0ef41Sopenharmony_ci await waitForAnimationEnd(scrollTop); 671cb0ef41Sopenharmony_ci await waitFor(() => { return scroll_end_arrived; }); 681cb0ef41Sopenharmony_ci // Verify that scroll snap animation has finished before firing scrollend event. 691cb0ef41Sopenharmony_ci assert_false(scroll_arrived_after_scroll_end); 701cb0ef41Sopenharmony_ci }, "Tests that scrollend is fired after scroll snap animation completion."); 711cb0ef41Sopenharmony_ci 721cb0ef41Sopenharmony_ci promise_test (async () => { 731cb0ef41Sopenharmony_ci // Reset scroll state. 741cb0ef41Sopenharmony_ci scroller.scrollTo(0, 0); 751cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 761cb0ef41Sopenharmony_ci scroll_end_arrived = false; 771cb0ef41Sopenharmony_ci scroll_arrived_after_scroll_end = false; 781cb0ef41Sopenharmony_ci 791cb0ef41Sopenharmony_ci await touchFlingInTarget(50, scroller, 'down'); 801cb0ef41Sopenharmony_ci // Wait for the scroll snap animation to finish. 811cb0ef41Sopenharmony_ci await waitForAnimationEnd(scrollTop); 821cb0ef41Sopenharmony_ci await waitFor(() => { return scroll_end_arrived; }); 831cb0ef41Sopenharmony_ci // Verify that scroll snap animation has finished before firing scrollend event. 841cb0ef41Sopenharmony_ci assert_false(scroll_arrived_after_scroll_end); 851cb0ef41Sopenharmony_ci }, "Tests that scrollend is fired after fling snap animation completion."); 861cb0ef41Sopenharmony_ci} 871cb0ef41Sopenharmony_ci</script> 88