Add tests mixing programmatic and user frame scrolling on iOS
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / mixing-user-and-programmatic-scroll-004.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 user scroll followed by programmatic scroll in the same direction.
34           d = getFrameData("userXAndProgrammaticX");
35           await touchAndDragFromPointToPoint(d.x, d.y, d.x - 100, d.y);
36           await liftUpAtPoint(d.x - 100, d.y);
37           await waitPromise(1000); // Wait for scrolling to stabilize.
38           d.w.scrollBy(150, 0);
39
40           testRunner.notifyDone();
41        }
42     </script>
43     <style>
44         iframe {
45             position: absolute;
46             background: linear-gradient(135deg, red, orange);
47             border: 0;
48             height: 100px;
49             width: 100px;
50             overflow: none;
51         }
52     </style>
53   </head>
54   <body>
55     <p>This test passes if you see a green rectangle.</p>
56     <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
57         <iframe id="userXAndProgrammaticX" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
58             <body style='margin: 0; width: 300px; height: 200px'>
59                 <div style='left: 200px; top: 0px; position: absolute; width: 100px; height: 100px; background: green;'></div>
60             </body>" onload="runTest()">
61         </iframe>
62     </div>
63 </body>
64 </html>