| <!DOCTYPE html> |
| <script src="../../../../resources/testharness.js"></script> |
| <script src="../../../../resources/testharnessreport.js"></script> |
| <script src="../../../../resources/gesture-util.js"></script> |
| <style type="text/css"> |
| ::-webkit-scrollbar { |
| width: 0px; |
| height: 0px; |
| } |
| |
| #greenbox { |
| width: 100px; |
| height: 100px; |
| background: green; |
| padding: 0px; |
| margin: 0px; |
| } |
| |
| #redbox { |
| width: 100px; |
| height: 100px; |
| background: red; |
| padding: 0px; |
| margin: 0px; |
| } |
| |
| #bluebox { |
| width: 100px; |
| height: 100px; |
| background: blue; |
| padding: 0px; |
| margin: 0px; |
| } |
| |
| #yellowbox { |
| width: 100px; |
| height: 100px; |
| background: yellow; |
| padding: 0px; |
| margin: 0px; |
| } |
| |
| #innerdiv { |
| width: 200px; |
| height: 200px; |
| overflow-y: scroll; |
| overflow-x: scroll; |
| } |
| |
| #outerdiv { |
| width: 250px; |
| height: 250px; |
| overflow-y: scroll; |
| overflow-x: scroll; |
| } |
| |
| #outermostdiv { |
| width: 300px; |
| height: 300px; |
| overflow-y: scroll; |
| overflow-x: scroll; |
| } |
| |
| td { |
| padding: 0px; |
| } |
| |
| </style> |
| |
| <body style="margin:0"> |
| <div id="outermostdiv"> |
| <table border="0" cellspacing="0px" > |
| <tr><td> |
| <div id="outerdiv"> |
| <table border="0" cellspacing="0px" > |
| <tr><td> |
| <div id="innerdiv"> |
| <table border="0" cellspacing="0px" > |
| <tr><td><div id="greenbox"></div></td></tr> |
| <tr><td><div id="redbox"></div></td></tr> |
| <tr><td><div id="greenbox"></div></td></tr> |
| <tr><td><div id="redbox"></div></td></tr> |
| </table> |
| </div> |
| </td></tr> |
| <tr><td> |
| <div id="bluebox"></div> |
| </td></tr> |
| </table> |
| </div> |
| </td></tr> |
| <tr><td> |
| <div id="yellowbox"></div> |
| </td></tr> |
| </table> |
| </div> |
| </body> |
| |
| <script type="text/javascript"> |
| var touchtarget; |
| var expectedGesturesTotal = 2; |
| var gesturesOccurred = 0; |
| var scrollAmountX = [0, 0]; |
| var scrollAmountY = [0, 0]; |
| var scrolledElement = document.getElementById("outermostdiv"); |
| var scrollEventsOccurred = 0; |
| var expectedScrollEventsOccurred = 1; |
| |
| var x =10; |
| var y = 72; |
| function firstGestureScroll() { |
| return smoothScroll(230, x, y, GestureSourceType.TOUCH_INPUT, "down", |
| SPEED_INSTANT); |
| } |
| |
| function secondGestureScroll() { |
| x = 12; |
| y = 40; |
| return smoothScroll(45, x, y, GestureSourceType.TOUCH_INPUT, "down", |
| SPEED_INSTANT); |
| } |
| |
| function innerDivScrollTop() { |
| return document.getElementById('innerdiv').scrollTop; |
| } |
| |
| promise_test (async () => { |
| touchtarget = document.getElementById("innerdiv"); |
| touchtarget.addEventListener("scroll", recordScroll); |
| |
| await firstGestureScroll(); |
| await conditionHolds(() => { return notScrolled(); }); |
| await secondGestureScroll(); |
| // wait for the inner to fully scroll, then wait for 100 rafs to make sure |
| // that the rest of the delta does not propagate to the outer most div. |
| await waitForAnimationEnd(innerDivScrollTop, 200, 20); |
| await conditionHolds(() => { return notScrolled(); }); |
| assert_equals(scrollEventsOccurred, expectedScrollEventsOccurred); |
| |
| }, 'This tests that a gesture scroll isn\'t propagated from an inner div to ' + |
| 'an outer div when the scrolled divs have no remaining scroll offset.'); |
| </script> |
