Add tests mixing programmatic and user frame scrolling on iOS
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / mixing-user-and-programmatic-scroll-002.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 programmatic scroll followed by orthogonal user scroll.
34           d = getFrameData("programmaticXAndUserY");
35           d.w.scrollBy(100, 0);
36           await touchAndDragFromPointToPoint(d.x, d.y, d.x, d.y - 150);
37           await liftUpAtPoint(d.x, d.y - 150);
38           await waitPromise(1000); // Wait for scrolling to stabilize.
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="programmaticXAndUserY" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
58             <body style='margin: 0; width: 200px; height: 200px'>
59                 <div style='left: 100px; top: 100px; position: absolute; width: 100px; height: 100px; background: green;'></div>
60             </body>" onload="runTest()">
61         </iframe>
62     </div>
63 </body>
64 </html>