Make preserve and restore focus more likely to be symmetrical
[WebKit-https.git] / LayoutTests / fast / forms / ios / ipad / select-form-run-twice.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="../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, row)
51         {
52             return `
53                 (function() {
54                     uiController.didStartFormControlInteractionCallback = function() {
55                         uiController.selectFormAccessoryPickerRow(${row});
56                     };
57
58                     uiController.didEndFormControlInteractionCallback = function() {
59                         uiController.uiScriptComplete();
60                     };
61
62                     uiController.singleTapAtPoint(${x}, ${y}, function() {
63                     });
64                 })();`
65         }
66
67         function firstButtonClicked()
68         {
69             document.getElementById('nextStep').textContent = 'PASS: hit testing found #nextButton after first select interaction';
70             var selectElement = document.getElementsByTagName('select')[0];
71             var point = getPointInsideElement(selectElement, 10, 10);
72             testRunner.runUIScript(getTapOnSelectUIScript(point.x, point.y, 5), function() {
73                 document.getElementById('select-value2').textContent = selectElement.value;
74                     tryTapOnButton('finalTarget');
75             });
76         }
77     
78         function finalButtonClicked()
79         {
80             document.getElementById('result').textContent = 'PASS: hit testing found #finalTarget after select interaction';
81             if (window.testRunner)
82                 testRunner.notifyDone();
83         }
84
85         async function tryTapOnButton(target)
86         {
87             var point = getPointInsideElement(document.getElementById(target), 10, 10);
88             await tapAtPoint(point.x, point.y);
89             
90             // We have to keep retrying, because the dimming view behind the popover animates out,
91             // and we currently have no callback when that animation completes.
92             window.setTimeout(tryTapOnButton.bind(this, target), 100);
93         }
94
95         function doTest()
96         {
97             if (!window.testRunner)
98                 return;
99
100             testRunner.waitUntilDone();
101             testRunner.dumpAsText();
102
103             testRunner.runUIScript(getScrollDownUIScript(0, 500), function() {
104                 var selectElement = document.getElementsByTagName('select')[0];
105                 var point = getPointInsideElement(selectElement, 10, 10);
106                 testRunner.runUIScript(getTapOnSelectUIScript(point.x, point.y, 2), function() {
107                     document.getElementById('select-value').textContent = selectElement.value;
108                     tryTapOnButton('firstTarget');
109                 });
110             });
111         }
112         
113         window.addEventListener('load', doTest, false);
114     </script>
115 </head>
116 <body>
117     <p>This is the top</p>
118     <div id="container">
119         <button id="firstTarget" onclick="firstButtonClicked()">First Click</button>
120         <button id="finalTarget" onclick="finalButtonClicked()">Final Click</button>
121         <select>
122             <option>January</option>
123             <option>February</option>
124             <option>March</option>
125             <option>April</option>
126             <option>May</option>
127             <option>June</option>
128             <option>July</option>
129             <option>August</option>
130             <option>September</option>
131         </select>
132         <span id="select-value">Value goes here</span>
133         <span id="select-value2">2nd Value goes here</span>
134         <div id="nextStep">FAIL: should have hit-tested and found #target element</div>
135         <div id="result">FAIL: should have hit-tested and found #target element</div>
136     </div>
137     
138 </div>
139 </body>
140 </html>