src/third_party/WebKit/LayoutTests/fast/dom/shadow/focus-navigation-with-multiple-shadow-roots.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="resources/shadow-dom.js"></script>
   6 </head>
   7 <body>
   8 <p>This tests that pressing Tab key should traverse into shadow DOM subtrees, and pressing Shift-Tab should reverse the order.</p>
   9 <pre id="console"></pre>
  10 <script>
  11
  12 function prepareDOMTree(parent)
  13 {
  14     parent.appendChild(
  15         createDOM('div', {'id': 'top-div'},
  16                   createDOM('input', {'id': 'A', 'tabindex': 0}),
  17                   createDOM('div', {'id': 'host', 'tabindex': 0},
  18                             createShadowRoot(
  19                                 createDOM('input', {'id': 'oldest--A', 'tabindex': 0}),
  20                                 createDOM('content', {'select': '#light-child-A'}),
  21                                 createDOM('input', {'id': 'oldest--B', 'tabindex': 0})),
  22                             createShadowRoot(
  23                                 createDOM('input', {'id': 'older-A', 'tabindex': 0}),
  24                                 createDOM('content', {'select': '#light-child-B'}),
  25                                 createDOM('input', {'id': 'older-B', 'tabindex': 0})),
  26                             createShadowRoot(
  27                                 createDOM('input', {'id': 'younger-A', 'tabindex': 0}),
  28                                 createDOM('shadow', {}),
  29                                 createDOM('input', {'id': 'younger-B', 'tabindex': 0})),
  30                             createDOM('input', {'id': 'light-child-A', 'tabindex': 0}),
  31                             createDOM('input', {'id': 'light-child-B', 'tabindex': 0})),
  32                   createDOM('input', {'id': 'B', 'tabindex': 0})));
  33     parent.offsetLeft;
  34 }
  35
  36 function test() {
  37     if (window.testRunner)
  38         testRunner.dumpAsText();
  39
  40     if (!window.eventSender) {
  41         testFailed('');
  42         return;
  43     }
  44
  45     prepareDOMTree(document.body);
  46
  47     var elementsInFocusNavigationOrder = [
  48         'A',
  49         'host',
  50         'host///younger-A',
  51         'host//older-A',
  52         'host//older-B',
  53         'host///younger-B',
  54         'B',
  55     ];
  56
  57     testFocusNavigationFowrad(elementsInFocusNavigationOrder);
  58     elementsInFocusNavigationOrder.reverse();
  59     testFocusNavigationBackward(elementsInFocusNavigationOrder);
  60
  61     debug('Test finished.');
  62 }
  63
  64 test();
  65
  66 </script>
  67 </body>
  68 </html>