| <!DOCTYPE HTML> |
| <meta charset="UTF-8"> |
| <title>CSS Toggles: focusability of elements with toggle-trigger</title> |
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> |
| <link rel="author" title="Google" href="http://www.google.com/"> |
| <link rel="help" href="https://tabatkins.github.io/css-toggle/#toggle-trigger-property"> |
| <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="support/toggle-helpers.js"></script> |
| |
| <div id="test"></div> |
| |
| <script> |
| |
| // From shadow-dom/focus/resources/shadow-utils.js |
| function navigateFocusForward() { |
| // TAB = '\ue004' |
| return test_driver.send_keys(document.body, "\ue004"); |
| } |
| |
| let container = document.getElementById("test"); |
| |
| promise_test(async test => { |
| container.innerHTML = ` |
| <input id="input" type="text"> |
| <div id="e1" style="toggle-root: tab"></div> |
| <div id="e2" style="toggle-trigger: tab"></div> |
| <div id="e3" style="toggle-trigger: tab"></div> |
| <div id="e4" style="toggle-trigger: nonexistent"></div> |
| `; |
| |
| let input = document.getElementById("input"); |
| let e1 = document.getElementById("e1"); |
| let e2 = document.getElementById("e2"); |
| let e3 = document.getElementById("e3"); |
| let e4 = document.getElementById("e4"); |
| |
| await wait_for_toggle_creation(e1); |
| input.focus(); |
| assert_equals(document.activeElement, input); |
| |
| await navigateFocusForward(); |
| assert_equals(document.activeElement, e2); |
| |
| await navigateFocusForward(); |
| assert_equals(document.activeElement, e3); |
| |
| await navigateFocusForward(); |
| assert_equals(document.activeElement, e4); |
| }, "elements with toggle-trigger are tabbable"); |
| |
| </script> |
