| <!DOCTYPE html> |
| <html> |
| <body> |
| <p>Tests for moving focus across details element. |
| The existence of shadow tree on details element should not affect the focus sequential navigation ordering.<br> |
| To manually test, press tab key five times and then shift+tab five times. |
| It should traverse focusable elements in the increasing numerical order and then in the reverse order.</p> |
| <div id="test-content"> |
| <div id="first" tabindex="1" onfocus="log(this)">1. Focusable element with tabindex=1</div> |
| <details open> |
| <div tabindex="6" onfocus="log(this)">6. Focusable element in details with tabindex=6</div> |
| <summary><div tabindex="4" onfocus="log(this)">4. Focusable element in summary with tabindex=4</div></summary> |
| <div tabindex="2" onfocus="log(this)">2. Focusable element in details with tabindex=2</div> |
| </details> |
| <details open> |
| <div tabindex="5" onfocus="log(this)">5. Focusable element in details with tabindex=5</div> |
| <div tabindex="3" onfocus="log(this)">3. Focusable element in details with tabindex=3</div> |
| </details> |
| </div> |
| <pre></pre> |
| <script> |
| |
| function log(element) { |
| document.querySelector('pre').textContent += element.textContent + '\n'; |
| } |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| document.getElementById('first').focus(); |
| |
| if (window.eventSender) { |
| eventSender.keyDown('\t'); |
| eventSender.keyDown('\t'); |
| eventSender.keyDown('\t'); |
| eventSender.keyDown('\t'); |
| eventSender.keyDown('\t'); |
| |
| eventSender.keyDown('\t', ['shiftKey']); |
| eventSender.keyDown('\t', ['shiftKey']); |
| eventSender.keyDown('\t', ['shiftKey']); |
| eventSender.keyDown('\t', ['shiftKey']); |
| eventSender.keyDown('\t', ['shiftKey']); |
| document.getElementById('test-content').style.display = 'none'; |
| } |
| |
| </script> |
| </body> |
| </html> |
