11cb0ef41Sopenharmony_ci<!DOCTYPE HTML> 21cb0ef41Sopenharmony_ci<script src="/resources/testharness.js"></script> 31cb0ef41Sopenharmony_ci<script src="/resources/testharnessreport.js"></script> 41cb0ef41Sopenharmony_ci<script src="/resources/testdriver.js"></script> 51cb0ef41Sopenharmony_ci<script src="/resources/testdriver-actions.js"></script> 61cb0ef41Sopenharmony_ci<script src="/resources/testdriver-vendor.js"></script> 71cb0ef41Sopenharmony_ci<script src="scroll_support.js"></script> 81cb0ef41Sopenharmony_ci<style> 91cb0ef41Sopenharmony_ci#targetDiv { 101cb0ef41Sopenharmony_ci width: 500px; 111cb0ef41Sopenharmony_ci height: 500px; 121cb0ef41Sopenharmony_ci background: red; 131cb0ef41Sopenharmony_ci} 141cb0ef41Sopenharmony_cihtml, body { 151cb0ef41Sopenharmony_ci /* Prevent any built-in browser overscroll features from consuming the scroll 161cb0ef41Sopenharmony_ci * deltas */ 171cb0ef41Sopenharmony_ci overscroll-behavior: none; 181cb0ef41Sopenharmony_ci} 191cb0ef41Sopenharmony_ci 201cb0ef41Sopenharmony_ci</style> 211cb0ef41Sopenharmony_ci 221cb0ef41Sopenharmony_ci<body style="margin:0;" onload=runTest()> 231cb0ef41Sopenharmony_ci<div id="targetDiv"> 241cb0ef41Sopenharmony_ci</div> 251cb0ef41Sopenharmony_ci</body> 261cb0ef41Sopenharmony_ci 271cb0ef41Sopenharmony_ci<script> 281cb0ef41Sopenharmony_civar target_div = document.getElementById('targetDiv'); 291cb0ef41Sopenharmony_civar overscrolled_x_deltas = []; 301cb0ef41Sopenharmony_civar overscrolled_y_deltas = []; 311cb0ef41Sopenharmony_civar scrollend_received = false; 321cb0ef41Sopenharmony_ci 331cb0ef41Sopenharmony_cifunction onOverscroll(event) { 341cb0ef41Sopenharmony_ci overscrolled_x_deltas.push(event.deltaX); 351cb0ef41Sopenharmony_ci overscrolled_y_deltas.push(event.deltaY); 361cb0ef41Sopenharmony_ci} 371cb0ef41Sopenharmony_ci 381cb0ef41Sopenharmony_cifunction onScrollend(event) { 391cb0ef41Sopenharmony_ci scrollend_received = true; 401cb0ef41Sopenharmony_ci} 411cb0ef41Sopenharmony_ci 421cb0ef41Sopenharmony_cidocument.addEventListener("overscroll", onOverscroll); 431cb0ef41Sopenharmony_cidocument.addEventListener("scrollend", onScrollend); 441cb0ef41Sopenharmony_ci 451cb0ef41Sopenharmony_cifunction runTest() { 461cb0ef41Sopenharmony_ci promise_test (async (t) => { 471cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 481cb0ef41Sopenharmony_ci 491cb0ef41Sopenharmony_ci // Scroll up on target div and wait for the doc to get overscroll event. 501cb0ef41Sopenharmony_ci await touchScrollInTarget(300, target_div, 'up'); 511cb0ef41Sopenharmony_ci await waitFor(() => { return scrollend_received; }, 521cb0ef41Sopenharmony_ci 'Document did not receive scrollend event.'); 531cb0ef41Sopenharmony_ci 541cb0ef41Sopenharmony_ci // Even though we request 300 pixels of scroll, the API above doesn't 551cb0ef41Sopenharmony_ci // guarantee how much scroll delta will be generated - different browsers 561cb0ef41Sopenharmony_ci // can consume different amounts for "touch slop" (for example). Ensure the 571cb0ef41Sopenharmony_ci // overscroll reaches at least 100 pixels which is a fairly conservative 581cb0ef41Sopenharmony_ci // value. 591cb0ef41Sopenharmony_ci assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling."); 601cb0ef41Sopenharmony_ci assert_equals(overscrolled_x_deltas.filter(function(x){ return x!=0; }).length, 0, "The deltaX attribute must be 0 when there is no scrolling in x direction."); 611cb0ef41Sopenharmony_ci assert_less_than_equal(Math.max(...overscrolled_y_deltas), 0, "The deltaY attribute must be <= 0 when there is overscrolling in up direction."); 621cb0ef41Sopenharmony_ci assert_less_than_equal(Math.min(...overscrolled_y_deltas),-100, "The deltaY attribute must be the number of pixels overscrolled."); 631cb0ef41Sopenharmony_ci 641cb0ef41Sopenharmony_ci await waitForCompositorCommit(); 651cb0ef41Sopenharmony_ci overscrolled_x_deltas = []; 661cb0ef41Sopenharmony_ci overscrolled_y_deltas = []; 671cb0ef41Sopenharmony_ci scrollend_received = false; 681cb0ef41Sopenharmony_ci 691cb0ef41Sopenharmony_ci // Scroll left on target div and wait for the doc to get overscroll event. 701cb0ef41Sopenharmony_ci await touchScrollInTarget(300, target_div, 'left'); 711cb0ef41Sopenharmony_ci await waitFor(() => { return scrollend_received; }, 721cb0ef41Sopenharmony_ci 'Document did not receive scrollend event.'); 731cb0ef41Sopenharmony_ci 741cb0ef41Sopenharmony_ci // TODO(bokan): It looks like Chrome inappropriately filters some scroll 751cb0ef41Sopenharmony_ci // events despite |overscroll-behavior| being set to none. The overscroll 761cb0ef41Sopenharmony_ci // amount here has been loosened but this should be fixed in Chrome. 771cb0ef41Sopenharmony_ci // https://crbug.com/1112183. 781cb0ef41Sopenharmony_ci assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling."); 791cb0ef41Sopenharmony_ci assert_equals(overscrolled_y_deltas.filter(function(x){ return x!=0; }).length, 0, "The deltaY attribute must be 0 when there is no scrolling in y direction."); 801cb0ef41Sopenharmony_ci assert_less_than_equal(Math.max(...overscrolled_x_deltas), 0, "The deltaX attribute must be <= 0 when there is overscrolling in left direction."); 811cb0ef41Sopenharmony_ci assert_less_than_equal(Math.min(...overscrolled_x_deltas),-50, "The deltaX attribute must be the number of pixels overscrolled."); 821cb0ef41Sopenharmony_ci 831cb0ef41Sopenharmony_ci }, 'Tests that the document gets overscroll event with right deltaX/Y attributes.'); 841cb0ef41Sopenharmony_ci} 851cb0ef41Sopenharmony_ci</script> 86