| <html> |
| <style> |
| /* Use a font with characters of fixed width to make it easier to test |
| selection gestures precisely. */ |
| @font-face { |
| font-family: 'Ahem'; |
| src: local('Ahem'), |
| url('../../font/Ahem.ttf'); |
| } |
| div, input { |
| font-size: 15px; |
| font-family: "Ahem"; |
| } |
| /* Add space to separate the touch selection targets. */ |
| .padded { |
| margin-bottom: 30px; |
| } |
| </style> |
| <body> |
| <div>Dummy Padding Text</div> |
| <div id='textDiv' class='padded'>Some text we can select</div> |
| |
| <div>Dummy Padding Text</div> |
| <input id='textfield' class='padded' type="text" value="Some editable text"> |
| |
| <div>Dummy Padding Text</div> |
| <input id='emptyTextfield' class='padded' type="text" value=""> |
| </body> |
| <script> |
| |
| function focus_textfield() { |
| document.getElementById('textfield').focus(); |
| // Focusing the textfiled selects its text. Collapse selection to a cursor. |
| window.getSelection().collapseToStart(); |
| } |
| |
| // Returns the top left point of an element, excluding border and padding. |
| function get_top_left(element) { |
| var rect = element.getBoundingClientRect(); |
| var cs = getComputedStyle(element); |
| var point = { |
| x: rect.left + parseFloat(cs.borderLeft) + parseFloat(cs.paddingLeft), |
| y: rect.top + parseFloat(cs.borderTop) + parseFloat(cs.paddingTop) |
| }; |
| return JSON.stringify(point); |
| } |
| |
| function get_top_left_of_text() { |
| return get_top_left(document.getElementById('textDiv')); |
| } |
| |
| function get_top_left_of_textfield() { |
| return get_top_left(document.getElementById('textfield')); |
| } |
| |
| function get_top_left_of_empty_textfield() { |
| return get_top_left(document.getElementById('emptyTextfield')); |
| } |
| |
| </script> |
| |
| </html> |
