| <!DOCTYPE html> |
| <html> |
| <body> |
| <script src="../../resources/ui-helper.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| <div id="contentEditableElement" contenteditable>An element with contenteditable attribute</div> |
| <section id="elementWithTabIndexAndClickHandler" onclick="false" tabindex="0">An element with click event handler and tabindex attribute</section> |
| <main id="elementWithTabIndex" tabindex="0">An element with tabindex attribute</main> |
| <style> |
| div:focus { |
| background: #9cf; |
| } |
| </style> |
| <script> |
| |
| description('This tests tapping or clicking on an element with tabindex would focus the element.<br>' |
| + 'To manually test, tap or click on each element below. Each element should be focused'); |
| jsTestIsAsync = true; |
| |
| async function runTests() { |
| await UIHelper.activateElementAndWaitForInputSession(contentEditableElement); |
| shouldBe('"Activated contentEditableElement"; document.activeElement', 'contentEditableElement'); |
| |
| await UIHelper.activateAt(elementWithTabIndexAndClickHandler.offsetLeft + 5, elementWithTabIndexAndClickHandler.offsetTop + 5); |
| shouldBe('"Activated elementWithTabIndexAndClickHandler"; document.activeElement', 'elementWithTabIndexAndClickHandler'); |
| |
| await UIHelper.waitForKeyboardToHide(); |
| |
| await UIHelper.activateAt(elementWithTabIndex.offsetLeft + 5, elementWithTabIndex.offsetTop + 5); |
| shouldBe('"Activated elementWithTabIndex"; document.activeElement', 'elementWithTabIndex'); |
| } |
| |
| UIHelper.wait(runTests()); |
| |
| </script> |
| </body> |
| </html> |
