| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| <script src="../fast/dom/shadow/resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <p>This tests TAB focus navigation with delegatesFocus flag on shadow hosts</p> |
| <pre id="console"></pre> |
| <div id="sandbox"></div> |
| <script> |
| function prepareDOMTree(parent, mode, tabindex, delegatesFocus) { |
| parent.innerHTML = ''; |
| parent.appendChild( |
| createDOM('div', {'id': 'testform'}, |
| createDOM('input', {'id': 'input-before'}), |
| createDOM('div', {'id': 'host-div'}, |
| createShadowRoot( |
| {'mode': mode, |
| 'delegatesFocus': delegatesFocus}, |
| createDOM('input', {'id': 'inner-input'}))), |
| createDOM('input', {'id': 'input-after'}))); |
| |
| if (tabindex !== null) |
| parent.querySelector('#host-div').tabIndex = tabindex; |
| |
| } |
| |
| var hostDiv; |
| var sandbox = document.getElementById('sandbox'); |
| |
| function test1(mode) { |
| debug('(1/8) Testing tab navigation order without tabindex and delegatesFocus=false'); |
| prepareDOMTree(sandbox, mode, null, false); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); |
| shouldBe('hostDiv.tabIndex', '-1'); |
| |
| expectedOrder = [ |
| 'input-before', |
| 'host-div/inner-input', |
| 'input-after' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test2(mode) { |
| debug('(2/8) Testing tab navigation order without tabindex and delegatesFocus=true'); |
| prepareDOMTree(sandbox, mode, null, true); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); |
| shouldBe('hostDiv.tabIndex', '0'); |
| |
| var expectedOrder = [ |
| 'input-before', |
| 'host-div/inner-input', |
| 'input-after' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test3(mode) { |
| debug('(3/8) Testing tab navigation order with tabindex=0 and delegatesFocus=false'); |
| prepareDOMTree(sandbox, mode, 0, false); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); |
| shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '0'); |
| |
| expectedOrder = [ |
| 'input-before', |
| 'host-div', |
| 'host-div/inner-input', |
| 'input-after' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test4(mode) { |
| debug('(4/8)Testing tab navigation order with tabindex=0 and delegatesFocus=true'); |
| prepareDOMTree(sandbox, mode, 0, true); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); |
| shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '0'); |
| |
| expectedOrder = [ |
| 'input-before', |
| // 'host-div', // should skip host when delegatesFocus=true |
| 'host-div/inner-input', |
| 'input-after' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test5(mode) { |
| debug('(5/8) Testing tab navigation order with tabindex=-1 and delegatesFocus=false'); |
| prepareDOMTree(sandbox, mode, -1, false); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); |
| shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '-1'); |
| |
| expectedOrder = [ |
| 'input-before', |
| 'input-after' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test6(mode) { |
| debug('(6/8) Testing tab navigation order with tabindex=-1 and delegatesFocus=true'); |
| prepareDOMTree(sandbox, mode, -1, true); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); |
| shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '-1'); |
| |
| expectedOrder = [ |
| 'input-before', |
| // 'host-div/inner-input', // The whole shadow tree should be skipped |
| 'input-after' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test7(mode) { |
| debug('(7/8) Testing tab navigation order with tabindex=1 and delegatesFocus=false'); |
| prepareDOMTree(sandbox, mode, 1, false); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); |
| shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '1'); |
| |
| expectedOrder = [ |
| 'input-before', |
| 'input-after', |
| 'host-div', |
| 'host-div/inner-input' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test8(mode) { |
| debug('(8/8) Testing tab navigation order with tabindex=1 and delegatesFocus=true'); |
| prepareDOMTree(sandbox, mode, 1, true); |
| hostDiv = document.getElementById('host-div'); |
| shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); |
| shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '1'); |
| |
| expectedOrder = [ |
| 'input-before', |
| 'input-after', |
| // 'host-div', // should skip host when delegatesFocus=true |
| 'host-div/inner-input' |
| ]; |
| |
| testFocusNavigationForward(expectedOrder); |
| expectedOrder.reverse(); |
| testFocusNavigationBackward(expectedOrder); |
| } |
| |
| function test() { |
| debug('Testing shadow host with possible combinations of mode, tabindex and delegatesFocus'); |
| |
| test1('open'); |
| test2('open'); |
| test3('open'); |
| test4('open'); |
| test5('open'); |
| test6('open'); |
| test7('open'); |
| test8('open'); |
| |
| test1('closed'); |
| test2('closed'); |
| test3('closed'); |
| test4('closed'); |
| test5('closed'); |
| test6('closed'); |
| test7('closed'); |
| test8('closed'); |
| } |
| |
| function run_tests() { |
| if (!window.eventSender) { |
| testFailed(''); |
| return; |
| } |
| |
| test(); |
| |
| debug('Test finished.'); |
| } |
| |
| run_tests(); |
| </script> |
| </body> |
| </html> |
