| <!doctype html> |
| <meta charset="utf-8"> |
| <meta name="variant" content="?caption-side=top"> |
| <meta name="variant" content="?caption-side=bottom"> |
| <title>Tab navigation around table with caption</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script> |
| "use strict"; |
| |
| const searchParams = new URLSearchParams(document.location.search); |
| const captionSide = searchParams.get("caption-side"); |
| |
| addEventListener("DOMContentLoaded", () => { |
| document.querySelector("table").style.captionSide = captionSide; |
| const tabKey = "\uE004"; |
| const shiftKey = "\uE008"; |
| const firstTabbable = document.querySelector("body > span"); |
| const lastTabbable = document.querySelector("table ~ span"); |
| const tabbableInCaption = document.querySelector("caption > span"); |
| const tabbableInCell = document.querySelector("td > span"); |
| for (const data of [ |
| {init: firstTabbable, prev: null, next: tabbableInCell }, |
| {init: tabbableInCaption, prev: tabbableInCell, next: lastTabbable }, |
| {init: tabbableInCell, prev: firstTabbable, next: tabbableInCaption }, |
| {init: lastTabbable, prev: tabbableInCaption, next: null}, |
| ]) { |
| if (data.prev) { |
| promise_test(async () => { |
| data.init.focus(); |
| await new test_driver.Actions().keyDown(shiftKey).keyDown(tabKey).keyUp(tabKey).keyUp(shiftKey).send(); |
| assert_equals(document.activeElement, data.prev); |
| }, `Shift+Tab on ${data.init.outerHTML} should move focus to ${data.prev.outerHTML}`); |
| } |
| if (data.next) { |
| promise_test(async () => { |
| data.init.focus(); |
| await new test_driver.Actions().keyDown(tabKey).keyUp(tabKey).send(); |
| assert_equals(document.activeElement, data.next); |
| }, `Tab on ${data.init.outerHTML} should move focus to ${data.next.outerHTML}`); |
| } |
| } |
| }); |
| </script> |
| <span tabindex="0">First tabbable span</span> |
| <table> |
| <tbody> |
| <tr> |
| <td><span tabindex="0">Tabbable in cell<span></td> |
| </tr> |
| </tbody> |
| <caption><span tabindex="0">Tabbable in caption</span></caption> |
| </table> |
| <span tabindex="0">Last tabbable span</span> |
