| <!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 iframe and shadow tree, and pressing Shift-Tab should reverse the order.</p> |
| <pre id="console"></pre> |
| <script> |
| function createTextInputElement(doc, id, tabIndex) { |
| var input = doc.createElement('input'); |
| input.type = 'text'; |
| input.id = id; |
| input.tabIndex = tabIndex; |
| return input; |
| } |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| var doc = document; |
| |
| doc.body.appendChild(createTextInputElement(doc, 'input-01', 1)); |
| doc.body.appendChild(createTextInputElement(doc, 'input-02', 0)); |
| |
| function addShadowHost(doc) { |
| var shadowHost = doc.createElement('p'); |
| shadowHost.id = 'host-01'; |
| shadowHost.tabIndex = -1; |
| var shadow = internals.ensureShadowRoot(shadowHost); |
| doc.body.appendChild(shadowHost); |
| shadow.appendChild(createTextInputElement(doc, 'input-03', 0)); |
| } |
| addShadowHost(doc); |
| |
| doc.body.appendChild(createTextInputElement(doc, 'input-04', 0)); |
| |
| function addIframe(doc) { |
| var iframe = doc.createElement('iframe'); |
| iframe.id = 'iframe'; |
| doc.body.appendChild(iframe); |
| doc = iframe.contentDocument; |
| |
| doc.body.appendChild(createTextInputElement(doc, 'input-05', 0)); |
| doc.body.appendChild(createTextInputElement(doc, 'input-06', 1)); |
| doc.body.appendChild(createTextInputElement(doc, 'input-07', -1)); |
| |
| function addShadowHost(doc) { |
| var shadowHost = doc.createElement('p'); |
| shadowHost.id = 'host-02'; |
| shadowHost.tabIndex = 1; |
| var shadow = internals.ensureShadowRoot(shadowHost); |
| doc.body.appendChild(shadowHost); |
| |
| shadow.appendChild(createTextInputElement(doc, 'input-08', 0)); |
| shadow.appendChild(createTextInputElement(doc, 'input-09', 1)); |
| shadow.appendChild(createTextInputElement(doc, 'input-10', -1)); |
| } |
| addShadowHost(doc); |
| |
| doc.body.appendChild(createTextInputElement(doc, 'input-11', 2)); |
| doc.body.appendChild(createTextInputElement(doc, 'input-12', 1)); |
| } |
| addIframe(doc); |
| |
| doc.body.appendChild(createTextInputElement(doc, 'input-13', 1)); |
| doc.body.appendChild(createTextInputElement(doc, 'input-14', 0)); |
| doc.body.appendChild(createTextInputElement(doc, 'input-15', 2)); |
| |
| testFocusNavigationFowrad([ |
| 'input-01', |
| 'input-13', |
| 'input-15', |
| 'input-02', |
| 'host-01/input-03', |
| 'input-04', |
| 'iframe/input-06', |
| 'iframe/host-02', |
| 'iframe/host-02/input-09', |
| 'iframe/host-02/input-08', |
| 'iframe/input-12', |
| 'iframe/input-11', |
| 'iframe/input-05', |
| 'input-14', |
| ]); |
| |
| testFocusNavigationBackward([ |
| 'input-14', |
| 'iframe/input-05', |
| 'iframe/input-11', |
| 'iframe/input-12', |
| 'iframe/host-02/input-08', |
| 'iframe/host-02/input-09', |
| 'iframe/host-02', |
| 'iframe/input-06', |
| 'input-04', |
| 'host-01/input-03', |
| 'input-02', |
| 'input-15', |
| 'input-13', |
| 'input-01', |
| ]); |
| |
| log('\nTest finished.'); |
| } |
| </script> |
| </body> |
| </html> |
