Add tests mixing programmatic and user frame scrolling on iOS
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / mixing-user-and-programmatic-scroll-006.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>Mixing user and programmatic scroll of iframe</title>
5     <meta name="viewport" content="width=device-width, initial-scale=1">
6     <script src="../../../resources/basic-gestures.js"></script>
7     <script type="text/javascript">
8       if (window.testRunner)
9           testRunner.waitUntilDone();
10       if (window.internals)
11           internals.settings.setAsyncFrameScrollingEnabled(true);
12
13       function getFrameData(id)
14       {
15           var result = {};
16           var f = document.getElementById(id);
17           result.w = f.contentWindow.window;
18           var frameBox = f.getBoundingClientRect();
19           result.x = frameBox.left + frameBox.width / 2;
20           result.y = frameBox.top + frameBox.height / 2;
21           return result;
22       }
23
24       function waitPromise(delay)
25       {
26           return new Promise((resolve) => { setTimeout(resolve, delay); });
27       }
28
29       async function runTest() {
30           if (!window.testRunner || !testRunner.runUIScript)
31               return;
32
33           // This verifies hit testing after user and programmatic scroll.
34           d = getFrameData("programmaticYAndUserXAndHitTesting");
35           d.w.scrollBy(0, 100);
36           await touchAndDragFromPointToPoint(d.x, d.y, d.x - 150, d.y);
37           await liftUpAtPoint(d.x - 150, d.y);
38           await waitPromise(1500); // Wait for scrolling to stabilize and for scrollbar to disappear.
39           await tapAtPoint(d.x, d.y);
40
41           testRunner.notifyDone();
42        }
43     </script>
44     <style>
45         iframe {
46             position: absolute;
47             background: linear-gradient(135deg, red, orange);
48             border: 0;
49             height: 100px;
50             width: 100px;
51             overflow: none;
52         }
53     </style>
54   </head>
55   <body>
56     <p>This test passes if you see a green rectangle.</p>
57     <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
58         <iframe id="programmaticYAndUserXAndHitTesting" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
59             <body style='margin: 0; width: 200px; height: 200px'>
60                 <div style='left: 100px; top: 100px; position: absolute; width: 100px; height: 100px; background: red;' onclick='this.style.background=&quot;green&quot;'></div>
61             </body>" onload="runTest()">
62         </iframe>
63     </div>
64 </body>
65 </html>