ba66e3148f71eddaac0f9285d532c09142df2e9c
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / hit-testing-iframe.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 frameBox(id)
14       {
15           return document.getElementById(id).getBoundingClientRect();
16       }
17
18       function waitPromise(delay)
19       {
20           return new Promise((resolve) => { setTimeout(resolve, delay); });
21       }
22
23       async function runTest() {
24          if (!window.testRunner || !testRunner.runUIScript)
25              return;
26
27          // This verifies whether the iframe handles clicks inside or ouside its content box.
28          var p = frameBox("clickInContentBox");
29          await tapAtPoint(p.left + 7, p.top + 7);
30          p = frameBox("clickInPaddingBoxOutOfContentBox");
31          await tapAtPoint(p.left + 3, p.top + 3);
32
33          // This verifies that a click event is consumed by the element on top the frame.
34          p = frameBox("clickElementAboveFrame");
35          await tapAtPoint(p.left + 50, p.top + 50);
36
37          // This verifies that a click event is consumed by an element inside the frame.
38          p = frameBox("clickElementInsideFrame");
39          await tapAtPoint(p.left + 7 + 10, p.top + 7 + 10);
40
41          // This verifies that a click event is consumed by an element inside the frame, after a user scroll.
42          p = frameBox("clickElementInsideFrameAfterUserScroll");
43          await touchAndDragFromPointToPoint(p.left + 7, p.top + 7, p.left + 7, p.top - 150);
44          await liftUpAtPoint(p.left + 7, p.top - 150);
45          await waitPromise(1500); // Wait for scrolling to stabilize and for scrollbars to disappear.
46          await tapAtPoint(p.left + 7 + 10, p.bottom - 7);
47          await waitPromise(100);
48
49          testRunner.notifyDone();
50        }
51
52        var frameToLoadCount = 5;
53        function newFrameLoaded() {
54            frameToLoadCount--;
55            if (frameToLoadCount == 0)
56                runTest();
57        }
58     </script>
59     <style>
60         iframe {
61             position: absolute;
62             height: 90px;
63             width: 90px;
64             overflow: none;
65             margin: 0;
66             border: 0;
67             padding: 5px;
68         }
69     </style>
70   </head>
71   <body>
72     <p>This test passes if you see a green rectangle.</p>
73     <div style="position: absolute; top: 3em; width: 300px; height: 200px; background: green;">
74       <iframe id="clickInContentBox" style="left: 0px; top: 0px;" scrolling="yes" onclick="this.style.background='red'" srcdoc="
75           <body style='margin: 0; width: 200px; height: 200px'>
76               <div style='position: absolute; width: 100px; height: 100px; background: red;'
77                    onclick='this.style.background=&quot;green&quot;'></div>
78           </body>" onload="newFrameLoaded()">
79       </iframe>
80       <iframe id="clickInPaddingBoxOutOfContentBox" style="left: 100px; top: 0px; background: red;" onclick="this.style.background='green'" scrolling="yes" srcdoc="
81           <body style='margin: 0; width: 200px; height: 200px'>
82               <div style='position: absolute; width: 100px; height: 100px; background: green;'
83                    onclick='this.style.background=&quot;red&quot;'></div>
84           </body>" onload="newFrameLoaded()">
85       </iframe>
86       <iframe id="clickElementAboveFrame" style="left: 200px; top: 0px;" scrolling="yes" onclick="this.style.background='red'" srcdoc="
87           <body style='margin: 0; width: 200px; height: 200px; background: green;'>
88               <div style='position: absolute; width: 100px; height: 100px; background: green;'
89                    onclick='this.style.background=&quot;red&quot;'></div>
90           </body>" onload="newFrameLoaded()">
91       </iframe>
92       <div style="position: absolute; width: 50px; height: 50px; left: 225px; top: 25px; background: red" onclick="this.style.background='green';"></div>
93       <iframe id="clickElementInsideFrame" style="left: 0px; top: 100px;" scrolling="yes" onclick="this.style.background='red'" srcdoc="
94           <body style='margin: 0; width: 200px; height: 200px; background: green;'>
95               <div style='position: absolute; left: 10px; top: 10px; width: 50px; height: 50px; background: red;'
96                    onclick='this.style.background=&quot;green&quot;'></div>
97           </body>" onload="newFrameLoaded()">
98       </iframe>
99       <iframe id="clickElementInsideFrameAfterUserScroll" style="left: 100px; top: 100px;" scrolling="yes" onclick="this.style.background='red'" srcdoc="
100           <body style='margin: 0; width: 200px; height: 200px; background: green;'>
101              <div style='position: absolute; width: 75px; height: 75px; background: red;'></div>
102               <div style='position: absolute; left: 0px; top: 150px; width: 50px; height: 50px; background: red;'
103                    onclick='this.style.background=&quot;green&quot;'></div>
104           </body>" onload="newFrameLoaded()">
105       </iframe>
106     </div>
107 </body>
108 </html>