Split iOS tests for hit testing in iframes
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / hit-testing-iframe-006.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>Hit testing 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 waitPromise(delay)
14       {
15           return new Promise((resolve) => { setTimeout(resolve, delay); });
16       }
17
18       async function runTest() {
19           if (!window.testRunner || !testRunner.runUIScript)
20               return;
21
22           // This verifies that a click event is consumed by an element inside the frame, after a user scroll.
23           var p = document.getElementById("clickElementInsideFrameAfterUserScroll").getBoundingClientRect();
24           await touchAndDragFromPointToPoint(p.left + 7, p.top + 7, p.left + 7, p.top - 150);
25           await liftUpAtPoint(p.left + 7, p.top - 150);
26           await waitPromise(1500); // Wait for scrolling to stabilize and for scrollbars to disappear.
27           await tapAtPoint(p.left + 7 + 10, p.bottom - 7);
28           await waitPromise(100);
29
30           testRunner.notifyDone();
31        }
32     </script>
33     <style>
34         iframe {
35             position: absolute;
36             height: 90px;
37             width: 90px;
38             overflow: none;
39             margin: 0;
40             border: 0;
41             padding: 5px;
42         }
43     </style>
44   </head>
45   <body>
46     <p>This test passes if you see a green rectangle.</p>
47     <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
48       <iframe id="clickElementInsideFrameAfterUserScroll" style="left: 0px; top: 0px;" scrolling="yes" onclick="this.style.background='red'" srcdoc="
49           <body style='margin: 0; width: 200px; height: 200px; background: green;'>
50              <div style='position: absolute; width: 75px; height: 75px; background: red;'></div>
51               <div style='position: absolute; left: 0px; top: 150px; width: 50px; height: 50px; background: red;'
52                    onclick='this.style.background=&quot;green&quot;'></div>
53           </body>" onload="runTest()">
54       </iframe>
55     </div>
56 </body>
57 </html>