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_cihtml, body { 111cb0ef41Sopenharmony_ci margin: 0 121cb0ef41Sopenharmony_ci} 131cb0ef41Sopenharmony_ci 141cb0ef41Sopenharmony_cibody { 151cb0ef41Sopenharmony_ci height: 3000px; 161cb0ef41Sopenharmony_ci width: 3000px; 171cb0ef41Sopenharmony_ci} 181cb0ef41Sopenharmony_ci 191cb0ef41Sopenharmony_ci#targetDiv { 201cb0ef41Sopenharmony_ci width: 200px; 211cb0ef41Sopenharmony_ci height: 200px; 221cb0ef41Sopenharmony_ci overflow: scroll; 231cb0ef41Sopenharmony_ci} 241cb0ef41Sopenharmony_ci 251cb0ef41Sopenharmony_ci#innerDiv { 261cb0ef41Sopenharmony_ci width: 400px; 271cb0ef41Sopenharmony_ci height: 400px; 281cb0ef41Sopenharmony_ci} 291cb0ef41Sopenharmony_ci</style> 301cb0ef41Sopenharmony_ci 311cb0ef41Sopenharmony_ci<body onload=runTest() onscrollend="failOnScrollEnd(event)"> 321cb0ef41Sopenharmony_ci<div id="targetDiv" onscrollend="onElementScrollEnd(event)"> 331cb0ef41Sopenharmony_ci <div id="innerDiv"> 341cb0ef41Sopenharmony_ci </div> 351cb0ef41Sopenharmony_ci</div> 361cb0ef41Sopenharmony_ci</body> 371cb0ef41Sopenharmony_ci<script> 381cb0ef41Sopenharmony_cilet element_scrollend_arrived = false; 391cb0ef41Sopenharmony_ci 401cb0ef41Sopenharmony_cifunction onElementScrollEnd(event) { 411cb0ef41Sopenharmony_ci assert_false(event.cancelable); 421cb0ef41Sopenharmony_ci assert_false(event.bubbles); 431cb0ef41Sopenharmony_ci element_scrollend_arrived = true; 441cb0ef41Sopenharmony_ci} 451cb0ef41Sopenharmony_ci 461cb0ef41Sopenharmony_cifunction failOnScrollEnd(event) { 471cb0ef41Sopenharmony_ci assert_true(false, "Scrollend should not be called on: " + event.target); 481cb0ef41Sopenharmony_ci} 491cb0ef41Sopenharmony_ci 501cb0ef41Sopenharmony_cifunction runTest() { 511cb0ef41Sopenharmony_ci let target_div = document.getElementById("targetDiv"); 521cb0ef41Sopenharmony_ci 531cb0ef41Sopenharmony_ci promise_test (async (t) => { 541cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 551cb0ef41Sopenharmony_ci 561cb0ef41Sopenharmony_ci target_div.scrollTo({top: 200, left: 200}); 571cb0ef41Sopenharmony_ci await waitFor(() => { return element_scrollend_arrived; }, 581cb0ef41Sopenharmony_ci target_div.tagName + " did not receive scrollend event."); 591cb0ef41Sopenharmony_ci assert_equals(target_div.scrollLeft, 200, target_div.tagName + " scrollLeft"); 601cb0ef41Sopenharmony_ci assert_equals(target_div.scrollTop, 200, target_div.tagName + " scrollTop"); 611cb0ef41Sopenharmony_ci }, "Tests scrollend event is handled by event handler content attribute."); 621cb0ef41Sopenharmony_ci 631cb0ef41Sopenharmony_ci promise_test (async (t) => { 641cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 651cb0ef41Sopenharmony_ci 661cb0ef41Sopenharmony_ci document.scrollingElement.scrollTo({top: 200, left: 200}); 671cb0ef41Sopenharmony_ci // The document body onscrollend event handler content attribute will fail 681cb0ef41Sopenharmony_ci // here, if it is fired. 691cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 701cb0ef41Sopenharmony_ci assert_equals(document.scrollingElement.scrollLeft, 200, 711cb0ef41Sopenharmony_ci "Document scrolled on horizontal axis"); 721cb0ef41Sopenharmony_ci assert_equals(document.scrollingElement.scrollTop, 200, 731cb0ef41Sopenharmony_ci "Document scrolled on vertical axis"); 741cb0ef41Sopenharmony_ci }, "Tests scrollend event is not fired to document body event handler content attribute."); 751cb0ef41Sopenharmony_ci 761cb0ef41Sopenharmony_ci promise_test (async (t) => { 771cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 781cb0ef41Sopenharmony_ci 791cb0ef41Sopenharmony_ci // Reset the scroll position. 801cb0ef41Sopenharmony_ci document.scrollingElement.scrollTo({top: 0, left: 0}); 811cb0ef41Sopenharmony_ci 821cb0ef41Sopenharmony_ci let scrollend_event = new Promise(resolve => document.onscrollend = resolve); 831cb0ef41Sopenharmony_ci document.scrollingElement.scrollTo({top: 200, left: 200}); 841cb0ef41Sopenharmony_ci await scrollend_event; 851cb0ef41Sopenharmony_ci 861cb0ef41Sopenharmony_ci assert_equals(document.scrollingElement.scrollTop, 200, 871cb0ef41Sopenharmony_ci "Document scrolled on horizontal axis"); 881cb0ef41Sopenharmony_ci assert_equals(document.scrollingElement.scrollLeft, 200, 891cb0ef41Sopenharmony_ci "Document scrolled on vertical axis"); 901cb0ef41Sopenharmony_ci }, "Tests scrollend event is fired to document event handler property"); 911cb0ef41Sopenharmony_ci 921cb0ef41Sopenharmony_ci promise_test (async (t) => { 931cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 941cb0ef41Sopenharmony_ci 951cb0ef41Sopenharmony_ci // Reset the scroll position. 961cb0ef41Sopenharmony_ci target_div.scrollTo({top: 0, left: 0}); 971cb0ef41Sopenharmony_ci 981cb0ef41Sopenharmony_ci let scrollend_event = new Promise(resolve => target_div.onscrollend = resolve); 991cb0ef41Sopenharmony_ci target_div.scrollTo({top: 200, left: 200}); 1001cb0ef41Sopenharmony_ci await scrollend_event; 1011cb0ef41Sopenharmony_ci 1021cb0ef41Sopenharmony_ci assert_equals(target_div.scrollLeft, 200, 1031cb0ef41Sopenharmony_ci target_div.tagName + " scrolled on horizontal axis"); 1041cb0ef41Sopenharmony_ci assert_equals(target_div.scrollLeft, 200, 1051cb0ef41Sopenharmony_ci target_div.tagName + " scrolled on vertical axis"); 1061cb0ef41Sopenharmony_ci }, "Tests scrollend event is fired to element event handler property"); 1071cb0ef41Sopenharmony_ci} 1081cb0ef41Sopenharmony_ci</script> 109