| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <p>This tests that pressing Tab key should traverse into shadow DOM subtrees, and pressing Shift-Tab should reverse the order.</p> |
| <div id="sandbox"></div> |
| <pre id="console"></pre> |
| <script> |
| |
| function testWithDistributedNodes() |
| { |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild( |
| createDOM('div', {'id': 'top-div'}, |
| createDOM('input', {'id': 'input-1', 'tabindex': 1}), |
| createDOM('div', {'id': 'shadowhost', 'tabindex': 1}, |
| createShadowRoot( |
| createDOM('content', {'select': '#distributed-node-1'}), |
| createDOM('input', {'id': 'input-2', 'tabindex': 1}), |
| createDOM('content', {'select': '#distributed-node-2'})), |
| createDOM('input', {'id': 'distributed-node-2', 'tabindex': 1}), |
| createDOM('input', {'id': 'distributed-node-1', 'tabindex': 1})), |
| createDOM('input', {'id': 'input-3', 'tabindex': 1}))); |
| sandbox.offsetLeft; |
| |
| var elementsInFocusNavigationOrder = ['input-1', 'shadowhost', 'distributed-node-1', 'shadowhost/input-2', 'distributed-node-2', 'input-3']; |
| testFocusNavigationFowrad(elementsInFocusNavigationOrder); |
| elementsInFocusNavigationOrder.reverse() |
| testFocusNavigationBackward(elementsInFocusNavigationOrder) |
| } |
| |
| function testDetailsSummary() |
| { |
| debug('details/summary elements use Shadow DOM and distributed nodes internally.') |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild( |
| createDOM('div', {'id': 'top-div'}, |
| createDOM('input', {'id': 'input-1'}), |
| createDOM('details', {'id': 'details-1'}, |
| createDOM('summary', {'id': 'summary-1'})), |
| createDOM('input', {'id': 'input-2'}))); |
| sandbox.offsetLeft; |
| |
| var elementsInFocusNavigationOrder = ['input-1', 'summary-1', 'input-2']; |
| testFocusNavigationFowrad(elementsInFocusNavigationOrder); |
| elementsInFocusNavigationOrder.reverse() |
| testFocusNavigationBackward(elementsInFocusNavigationOrder); |
| } |
| |
| |
| function test() { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| if (!window.eventSender) { |
| testFailed(''); |
| return; |
| } |
| |
| testWithDistributedNodes() |
| testDetailsSummary(); |
| |
| debug('Test finished.'); |
| } |
| |
| test(); |
| |
| </script> |
| </body> |
| </html> |
