rniwa@webkit.org | 9b38812 | 2017-01-04 03:39:39 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <body> |
| 4 | <p>Tests for moving focus by pressing tab key across label and legend elements.<br> |
| 5 | To manually test, press tab key seven times then shift+tab six times.<br> |
| 6 | It should traverse focusable elements in the ascending order from 1 to 7 and then in the descending order back to 1.</p> |
| 7 | </p> |
| 8 | <input id="startingNode"> |
| 9 | <div id="test-content"> |
| 10 | <label title="FAIL - a non-focusable label with an input should not be focused"> |
| 11 | <input title="1. An input element inside a non-focusable label element">hello |
| 12 | </label> |
| 13 | <label tabindex="0" title="2. A label element with an input element"> |
| 14 | <input title="3. An input elment inside a focusable label element">world</label> |
| 15 | <label tabindex="0" title="4. A label element with just text">webkit</label> |
| 16 | <label title="FAIL - an label element without tabindex should not be focused">rocks</label> |
| 17 | <fieldset tabindex="0" title="5. A fieldset element with tabindex"> |
| 18 | <legend tabindex="0" title="6. A focusable legend element inside a fieldset element">foo</legend> |
| 19 | <input title="7. An input element inside a fieldset element"> |
| 20 | </fieldset> |
| 21 | </div> |
| 22 | <style> :focus { background: red; } </style> |
| 23 | <pre id="result"></pre> |
| 24 | <script> |
| 25 | |
| 26 | function moveFocusForward(focusCount) |
| 27 | { |
| 28 | setTimeout(function () { |
| 29 | if (!focusCount) |
| 30 | return moveFocusBackward(7); |
| 31 | eventSender.keyDown('\t'); |
| 32 | setTimeout(function () { |
| 33 | moveFocusForward(focusCount - 1); |
| 34 | }, 1); |
| 35 | }, 1); |
| 36 | } |
| 37 | |
| 38 | function moveFocusBackward(focusCount) |
| 39 | { |
| 40 | setTimeout(function () { |
| 41 | if (!focusCount) { |
| 42 | testContent.style.display = 'none'; |
| 43 | testRunner.notifyDone(); |
| 44 | return; |
| 45 | } |
| 46 | eventSender.keyDown('\t', ['shiftKey']); |
| 47 | setTimeout(function () { |
| 48 | moveFocusBackward(focusCount - 1); |
| 49 | }, 1); |
| 50 | }, 1); |
| 51 | } |
| 52 | |
| 53 | let testContent = document.getElementById('test-content'); |
| 54 | |
| 55 | window.onload = () => { |
| 56 | document.getElementById('startingNode').focus(); |
| 57 | if (window.eventSender) { |
| 58 | testRunner.dumpAsText(); |
| 59 | testRunner.waitUntilDone(); |
| 60 | } |
| 61 | moveFocusForward(7); |
| 62 | } |
| 63 | |
| 64 | testContent.querySelectorAll('*').forEach((element) => { |
| 65 | element.onfocus = function () { |
| 66 | document.getElementById('result').textContent += (element.title || 'FAIL - focused an unexpected element') + '\n'; |
| 67 | } |
| 68 | }); |
| 69 | |
| 70 | </script> |
| 71 | </body> |
| 72 | </html> |