| <!DOCTYPE html> |
| <html> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <head> |
| <script src="../../resources/ui-helper.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| input { |
| font-size: 20px; |
| } |
| |
| #container { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <input type="text" value="Click me"> |
| <div id="container"> |
| <textarea></textarea> |
| </div> |
| <script> |
| jsTestIsAsync = true; |
| didFinishActivatingElement = false; |
| input = document.querySelector("input[type='text']"); |
| textarea = document.querySelector("textarea"); |
| container = document.getElementById("container"); |
| |
| input.addEventListener("focus", async () => { |
| getComputedStyle(container).display; // This is necessary in order to reproduce the bug. |
| container.style.display = "block"; |
| textarea.focus(); |
| |
| shouldBe("document.activeElement", "textarea"); |
| container.remove(); |
| input.remove(); |
| |
| await new Promise(resolve => shouldBecomeEqual("didFinishActivatingElement", "true", resolve)); |
| finishJSTest(); |
| }); |
| |
| addEventListener("load", async () => { |
| description("This test verifies that programmatically focusing a textarea in a newly displayed container changes the active element. To test manually, tap or click below."); |
| if (window.testRunner) |
| await UIHelper.activateElement(input); |
| didFinishActivatingElement = true; |
| }); |
| </script> |
| </body> |
| </html> |
