[iOS] Callout menu overlaps in-page controls when editing a comment in github.com...
[WebKit-https.git] / LayoutTests / editing / selection / ios / avoid-showing-callout-menu-over-controls.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
2 <html>
3 <head>
4 <script src="../../../resources/js-test.js"></script>
5 <script src="../../../resources/ui-helper.js"></script>
6 <meta name=viewport content="width=device-width, initial-scale=1">
7 <style>
8 body, html {
9     width: 100%;
10     height: 100%;
11     margin: 0;
12 }
13
14 iframe {
15     width: 320px;
16     height: 100px;
17 }
18
19 #controls {
20     margin-top: 20px;
21     margin-bottom: 10px;
22 }
23
24 input[type=button] {
25     height: 1em;
26 }
27 </style>
28 <script>
29 jsTestIsAsync = true;
30
31 async function runTest() {
32     description("Verifies that we don't show the system callout menu over controls. To test manually: focus the editable document in the iframe, select some text, and confirm that the callout bar is shown beneath the selection instead of above the selection.");
33
34     centerX = rect => rect.left + rect.width / 2;
35     centerY = rect => rect.top + rect.height / 2;
36
37     await UIHelper.activateAndWaitForInputSessionAt(160, 100);
38
39     const iframeDocument = document.querySelector("iframe").contentDocument;
40     iframeDocument.getSelection().selectAllChildren(iframeDocument.body);
41
42     grabberRect = {};
43     while (!grabberRect.width && !grabberRect.height)
44         grabberRect = await UIHelper.getSelectionEndGrabberViewRect();
45
46     await UIHelper.activateAt(centerX(grabberRect), centerY(grabberRect));
47     await UIHelper.waitForMenuToShow();
48     menuRect = await UIHelper.menuRect();
49
50     document.activeElement.blur();
51
52     shouldBe("centerY(grabberRect) < centerY(menuRect)", "true");
53     finishJSTest();
54 }
55
56 addEventListener("load", runTest);
57 </script>
58 </head>
59 <body>
60 <div id="controls">
61     <input type="button" value="1"></input>
62     <input type="button" value="2"></input>
63     <input type="button" value="3"></input>
64     <input type="button" value="4"></input>
65     <input type="button" value="5"></input>
66     <input type="button" value="6"></input>
67     <input type="button" value="7"></input>
68     <input type="button" value="8"></input>
69 </div>
70 <div>
71     <iframe srcdoc="<body contenteditable>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</body>"></iframe>
72 </div>
73 <p id="description"></p>
74 <p id="console"></p>
75 </body>
76 </html>