scroll-event-fired-to-iframe.html (3650B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Scroll event should behave correctly for Element.ScrollX and Element.ScrollLeft</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-window-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 16 function promiseForFrameLoad(frame) { 17 return new Promise(async (resolve) => { 18 frame.addEventListener("load", () => resolve(frame), { once: true }); 19 }); 20 } 21 22 async function promiseForSetupTargetFrame() { 23 const target = document.createElement("iframe"); 24 target.src = "../resources/large-dimension-document.sub.html"; 25 target.width = "200"; 26 target.height = "200"; 27 28 var container = document.getElementById("container"); 29 container.innerHTML = ""; 30 container.appendChild(target); 31 32 return promiseForFrameLoad(target); 33 } 34 35 promise_test(async (t) => { 36 var frame = await promiseForSetupTargetFrame(); 37 var target = frame.contentWindow; 38 39 assert_equals(target.scrollX, 0); 40 var promiseForScrollX = waitForEvent("scroll", t, target); 41 target.scrollTo({left: 10}); 42 await promiseForScrollX; 43 assert_equals(target.scrollX, 10); 44 45 assert_equals(target.scrollY, 0); 46 var promiseForScrollY = waitForEvent("scroll", t, target); 47 target.scrollTo({top: 10}); 48 await promiseForScrollY; 49 assert_equals(target.scrollY, 10); 50 51 }, "scrollX and scrollY should fire scroll event."); 52 53 promise_test(async (t) => { 54 var frame = await promiseForSetupTargetFrame(); 55 var target = frame.contentWindow; 56 57 target.addEventListener("scroll", () => assert_unreached("Any scroll event should not be observed")); 58 59 assert_equals(target.scrollX, 0); 60 target.scrollTo({left: 0}); 61 62 assert_equals(target.scrollY, 0); 63 target.scrollTo({top: 0}); 64 65 // Ensure all scroll event is flushed 66 await waitForNextFrame(); 67 await waitForNextFrame(); 68 }, "scrollX and scrollY being set with the same value."); 69 70 promise_test(async (t) => { 71 var frame = await promiseForSetupTargetFrame(); 72 var target = frame.contentWindow; 73 74 target.addEventListener("scroll", () => assert_unreached("Any scroll event should not be observed")); 75 76 target.scrollTo({left: -100}); 77 target.scrollTo({top: -100}); 78 79 // Ensure all scroll event is flushed 80 await waitForNextFrame(); 81 await waitForNextFrame(); 82 }, "scrollX and scrollY being set with invalid scroll Scroll."); 83 84 promise_test(async (t) => { 85 var frame = await promiseForSetupTargetFrame(); 86 var target = frame.contentWindow; 87 var frameDocEl = frame.contentDocument.documentElement; 88 89 assert_equals(target.scrollX, 0); 90 var promiseForScrollX = waitForEvent("scroll", t, target); 91 target.scrollTo({left: frameDocEl.scrollWidth}); 92 await promiseForScrollX; 93 assert_greater_than(target.scrollX, 0); 94 95 assert_equals(target.scrollY, 0); 96 var promiseForScrollY = waitForEvent("scroll", t, target); 97 target.scrollTo({ 98 top: frameDocEl.scrollHeight, 99 left: target.scrollX 100 }); 101 await promiseForScrollY; 102 assert_greater_than(target.scrollY, 0); 103 104 target.addEventListener("scroll", () => assert_unreached("Any scroll event should not be observed")); 105 106 target.scrollTo({ 107 left: target.scrollX + 10, 108 top: target.scrollY + 10, 109 }); 110 111 // Ensure all scroll event is flushed 112 await waitForNextFrame(); 113 await waitForNextFrame(); 114 }, "scrollX and scrollY when scrolling above maximum Scroll."); 115 116 </script>