webkitpy: Implement device type specific expected results (Part 2)
[WebKit-https.git] / LayoutTests / platform / ipad / fast / forms / unfocus-inside-fixed-hittest.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
2
3 <html>
4 <head>
5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6     <style>
7         body {
8             height: 1500px;
9         }
10         #container {
11             position: fixed;
12             top: 10px;
13             left: 10px;
14             bottom: 30px;
15             right: 10px;
16             background-color: rgba(0, 0, 0, 0.5);
17             padding: 10px;
18             box-sizing: border-box;
19             border: 5px solid black;
20         }
21         
22         select {
23             display: block;
24             margin: 500px 200px 20px 20px;
25         }
26         
27         button {
28             display: block;
29         }
30         
31     </style>
32     <script src="../../../../fast/forms/ios/resources/zooming-test-utils.js"></script>
33     <script src="../../../../resources/basic-gestures.js"></script>
34     <script>
35         if (window.testRunner)
36             testRunner.waitUntilDone();
37
38         function getScrollDownUIScript(x, y)
39         {
40             return `
41                 (function() {
42                     uiController.didEndScrollingCallback = function() {
43                         uiController.uiScriptComplete();
44                     };
45
46                     uiController.scrollToOffset(${x}, ${y});
47                 })();`
48         }
49
50         function getTapOnSelectUIScript(x, y)
51         {
52             return `
53                 (function() {
54                     uiController.didStartFormControlInteractionCallback = function() {
55                         uiController.selectFormAccessoryPickerRow(5);
56                     };
57
58                     uiController.didEndFormControlInteractionCallback = function() {
59                         uiController.uiScriptComplete();
60                     };
61
62                     uiController.singleTapAtPoint(${x}, ${y}, function() {
63                     });
64                 })();`
65         }
66
67         var clicked = false;
68         var timeoutID;
69         function buttonClicked()
70         {
71             window.clearTimeout(timeoutID);
72             if (!clicked) {
73                 clicked = true;
74                 document.getElementById('result').textContent = 'PASS: hit testing found #target after select interaction';
75                 if (window.testRunner)
76                     testRunner.notifyDone();
77             }
78         }
79
80         async function tryTapOnButton()
81         {
82             var point = getPointInsideElement(document.getElementById('target'), 10, 10);
83             await tapAtPoint(point.x, point.y);
84
85             // We have to keep retrying, because the dimming view behind the popover animates out,
86             // and we currently have no callback when that animation completes.
87             if (!clicked)
88                 timeoutID = window.setTimeout(tryTapOnButton, 100);
89         }
90
91         function doTest()
92         {
93             if (!window.testRunner)
94                 return;
95             testRunner.waitUntilDone();
96             testRunner.dumpAsText();
97
98             testRunner.runUIScript(getScrollDownUIScript(0, 500), function() {
99                 var selectElement = document.getElementsByTagName('select')[0];
100                 var point = getPointInsideElement(selectElement, 10, 10);
101                 testRunner.runUIScript(getTapOnSelectUIScript(point.x, point.y), function() {
102                     document.getElementById('select-value').textContent = selectElement.value;
103                     tryTapOnButton();
104                 });
105             });
106         }
107         
108         window.addEventListener('load', doTest, false);
109         
110     </script>
111 </head>
112 <body>
113     <p>This is the top</p>
114     <div id="container">
115         <button id="target" onclick="buttonClicked()">Click Me</button>
116         <select>
117             <option>January</option>
118             <option>February</option>
119             <option>March</option>
120             <option>April</option>
121             <option>May</option>
122             <option>June</option>
123             <option>July</option>
124             <option>August</option>
125             <option>September</option>
126         </select>
127         <span id="select-value">Value goes here</span>
128         <div id="result">FAIL: should have hit-tested and found #target element</div>
129     </div>
130     
131 </div>
132 </body>
133 </html>