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_ci#rootDiv { 111cb0ef41Sopenharmony_ci width: 500px; 121cb0ef41Sopenharmony_ci height: 500px; 131cb0ef41Sopenharmony_ci} 141cb0ef41Sopenharmony_ci 151cb0ef41Sopenharmony_ci#targetDiv { 161cb0ef41Sopenharmony_ci width: 200px; 171cb0ef41Sopenharmony_ci height: 200px; 181cb0ef41Sopenharmony_ci overflow: scroll; 191cb0ef41Sopenharmony_ci} 201cb0ef41Sopenharmony_ci 211cb0ef41Sopenharmony_ci#innerDiv { 221cb0ef41Sopenharmony_ci width: 500px; 231cb0ef41Sopenharmony_ci height: 4000px; 241cb0ef41Sopenharmony_ci} 251cb0ef41Sopenharmony_ci</style> 261cb0ef41Sopenharmony_ci 271cb0ef41Sopenharmony_ci<body style="margin:0" onload=runTest()> 281cb0ef41Sopenharmony_ci</body> 291cb0ef41Sopenharmony_ci 301cb0ef41Sopenharmony_ci<script> 311cb0ef41Sopenharmony_cilet scrollend_arrived = false; 321cb0ef41Sopenharmony_ci 331cb0ef41Sopenharmony_ciasync function setupHtmlAndScrollAndRemoveElement(element_to_remove_id) { 341cb0ef41Sopenharmony_ci document.body.innerHTML=` 351cb0ef41Sopenharmony_ci <div id="rootDiv"> 361cb0ef41Sopenharmony_ci <div id="targetDiv"> 371cb0ef41Sopenharmony_ci <div id="innerDiv"> 381cb0ef41Sopenharmony_ci </div> 391cb0ef41Sopenharmony_ci </div> 401cb0ef41Sopenharmony_ci </div> 411cb0ef41Sopenharmony_ci `; 421cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 431cb0ef41Sopenharmony_ci 441cb0ef41Sopenharmony_ci const target_div = document.getElementById('targetDiv'); 451cb0ef41Sopenharmony_ci const element_to_remove = document.getElementById(element_to_remove_id); 461cb0ef41Sopenharmony_ci let reached_half_scroll = false; 471cb0ef41Sopenharmony_ci scrollend_arrived = false; 481cb0ef41Sopenharmony_ci 491cb0ef41Sopenharmony_ci target_div.addEventListener("scrollend", () => { 501cb0ef41Sopenharmony_ci scrollend_arrived = true; 511cb0ef41Sopenharmony_ci }); 521cb0ef41Sopenharmony_ci 531cb0ef41Sopenharmony_ci target_div.onscroll = () => { 541cb0ef41Sopenharmony_ci // Remove the element after reached half of the scroll offset, 551cb0ef41Sopenharmony_ci if(target_div.scrollTop >= 1000) { 561cb0ef41Sopenharmony_ci reached_half_scroll = true; 571cb0ef41Sopenharmony_ci element_to_remove.remove(); 581cb0ef41Sopenharmony_ci } 591cb0ef41Sopenharmony_ci }; 601cb0ef41Sopenharmony_ci 611cb0ef41Sopenharmony_ci target_div.scrollTo({top:2000, left:0, behavior:"smooth"}); 621cb0ef41Sopenharmony_ci await waitFor(() => {return reached_half_scroll; }, 631cb0ef41Sopenharmony_ci "target_div never reached scroll offset of 1000"); 641cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 651cb0ef41Sopenharmony_ci} 661cb0ef41Sopenharmony_ci 671cb0ef41Sopenharmony_cifunction runTest() { 681cb0ef41Sopenharmony_ci promise_test (async (t) => { 691cb0ef41Sopenharmony_ci await setupHtmlAndScrollAndRemoveElement("rootDiv"); 701cb0ef41Sopenharmony_ci await conditionHolds(() => { return !scrollend_arrived; }); 711cb0ef41Sopenharmony_ci }, "No scrollend is received after removing parent div"); 721cb0ef41Sopenharmony_ci 731cb0ef41Sopenharmony_ci promise_test (async (t) => { 741cb0ef41Sopenharmony_ci await setupHtmlAndScrollAndRemoveElement("targetDiv"); 751cb0ef41Sopenharmony_ci await conditionHolds(() => { return !scrollend_arrived; }); 761cb0ef41Sopenharmony_ci }, "No scrollend is received after removing scrolling element"); 771cb0ef41Sopenharmony_ci 781cb0ef41Sopenharmony_ci promise_test (async (t) => { 791cb0ef41Sopenharmony_ci await setupHtmlAndScrollAndRemoveElement("innerDiv"); 801cb0ef41Sopenharmony_ci await waitFor(() => { return scrollend_arrived; }, 811cb0ef41Sopenharmony_ci 'target_div did not receive scrollend event after vertical scroll.'); 821cb0ef41Sopenharmony_ci }, "scrollend is received after removing descendant div"); 831cb0ef41Sopenharmony_ci} 841cb0ef41Sopenharmony_ci</script> 85