scroll-event-fired-to-element.html (3210B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Scroll event should behave correctly for Element.offsetTop and Element.offsetLeft</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <script src="scroll_support.js"></script> 7 <link rel="author" title="Jo Steven Novaryo" href="mailto:jo.steven.novaryo@huawei.com"> 8 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface"> 9 <link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-events"> 10 <div id=log></div> 11 <div id="container"> 12 </div> 13 <script> 14 15 function setupTarget() { 16 var container = document.getElementById("container"); 17 container.innerHTML = ""; 18 19 var target = document.createElement("div"); 20 var overflowing_child = document.createElement("div"); 21 22 target.style = "overflow:scroll; height: 100px; width: 100px; scrollbar-width: none"; 23 overflowing_child.style = "height: 200px; width: 200px;"; 24 target.appendChild(overflowing_child); 25 container.appendChild(target); 26 return target; 27 } 28 29 promise_test(async (t) => { 30 var target = setupTarget(); 31 32 assert_equals(target.scrollTop, 0); 33 var promiseForScrollTop = waitForEvent("scroll", t, target); 34 target.scrollTop = 10; 35 await promiseForScrollTop; 36 assert_equals(target.scrollTop, 10); 37 38 assert_equals(target.scrollLeft, 0); 39 var promiseForScrollLeft = waitForEvent("scroll", t, target); 40 target.scrollLeft = 10; 41 await promiseForScrollLeft; 42 assert_equals(target.scrollLeft, 10); 43 44 }, "scrollTop and scrollLeft should fire scroll event."); 45 46 promise_test(async (t) => { 47 var target = setupTarget(); 48 49 target.addEventListener("scroll", () => assert_unreached("Any scroll event should not be observed")); 50 51 assert_equals(target.scrollTop, 0); 52 target.scrollTop = 0; 53 54 assert_equals(target.scrollLeft, 0); 55 target.scrollLeft = 0; 56 57 // Ensure all scroll event is flushed 58 await waitForNextFrame(); 59 await waitForNextFrame(); 60 }, "scrollTop and scrollLeft being set with the same value."); 61 62 promise_test(async (t) => { 63 var target = setupTarget(); 64 65 target.addEventListener("scroll", () => assert_unreached("Any scroll event should not be observed")); 66 67 target.scrollTop = -100; 68 target.scrollLeft = -100; 69 70 // Ensure all scroll event is flushed 71 await waitForNextFrame(); 72 await waitForNextFrame(); 73 }, "scrollTop and scrollLeft being set with invalid scroll offset."); 74 75 promise_test(async (t) => { 76 var target = setupTarget(); 77 78 assert_equals(target.scrollTop, 0); 79 var promiseForScrollTop = waitForEvent("scroll", t, target); 80 target.scrollTop = 1000; 81 await promiseForScrollTop; 82 assert_equals(target.scrollTop, 100); 83 84 assert_equals(target.scrollLeft, 0); 85 var promiseForScrollLeft = waitForEvent("scroll", t, target); 86 target.scrollLeft = 1000; 87 await promiseForScrollLeft; 88 assert_equals(target.scrollLeft, 100); 89 90 target.addEventListener("scroll", () => assert_unreached("Any scroll event should not be observed")); 91 92 target.scrollTop = 1000; 93 target.scrollLeft = 1000; 94 95 // Ensure all scroll event is flushed 96 await waitForNextFrame(); 97 await waitForNextFrame(); 98 }, "scrollTop and scrollLeft when scrolling above maximum offset."); 99 100 </script>