| OLD | NEW |
|---|
| (Empty) |
| 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 TAB focus navigation with delegatesFocus flag on shadow hosts</p> | |
| 9 <pre id="console"></pre> | |
| 10 <div id="sandbox"></div> | |
| 11 <script> | |
| 12 function prepareDOMTree(parent, mode, tabindex, delegatesFocus) { | |
| 13 parent.innerHTML = ''; | |
| 14 parent.appendChild( | |
| 15 createDOM('div', {'id': 'testform'}, | |
| 16 createDOM('input', {'id': 'input-before'}), | |
| 17 createDOM('div', {'id': 'host-div'}, | |
| 18 createShadowRoot( | |
| 19 {'mode': mode, | |
| 20 'delegatesFocus': delegatesFocus}, | |
| 21 createDOM('input', {'id': 'inner-input'}))), | |
| 22 createDOM('input', {'id': 'input-after'}))); | |
| 23 | |
| 24 if (tabindex !== null) | |
| 25 parent.querySelector('#host-div').tabIndex = tabindex; | |
| 26 | |
| 27 parent.offsetTop; | |
| 28 } | |
| 29 | |
| 30 var hostDiv; | |
| 31 var sandbox = document.getElementById('sandbox'); | |
| 32 | |
| 33 function test1(mode) { | |
| 34 debug('(1/8) Testing tab navigation order without tabindex and delegatesFocu
s=false'); | |
| 35 prepareDOMTree(sandbox, mode, null, false); | |
| 36 hostDiv = document.getElementById('host-div'); | |
| 37 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); | |
| 38 shouldBe('hostDiv.tabIndex', '-1'); | |
| 39 | |
| 40 expectedOrder = [ | |
| 41 'input-before', | |
| 42 'host-div/inner-input', | |
| 43 'input-after' | |
| 44 ]; | |
| 45 | |
| 46 testFocusNavigationForward(expectedOrder); | |
| 47 expectedOrder.reverse(); | |
| 48 testFocusNavigationBackward(expectedOrder); | |
| 49 } | |
| 50 | |
| 51 function test2(mode) { | |
| 52 debug('(2/8) Testing tab navigation order without tabindex and delegatesFocu
s=true'); | |
| 53 prepareDOMTree(sandbox, mode, null, true); | |
| 54 hostDiv = document.getElementById('host-div'); | |
| 55 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); | |
| 56 shouldBe('hostDiv.tabIndex', '0'); | |
| 57 | |
| 58 var expectedOrder = [ | |
| 59 'input-before', | |
| 60 'host-div/inner-input', | |
| 61 'input-after' | |
| 62 ]; | |
| 63 | |
| 64 testFocusNavigationForward(expectedOrder); | |
| 65 expectedOrder.reverse(); | |
| 66 testFocusNavigationBackward(expectedOrder); | |
| 67 } | |
| 68 | |
| 69 function test3(mode) { | |
| 70 debug('(3/8) Testing tab navigation order with tabindex=0 and delegatesFocus
=false'); | |
| 71 prepareDOMTree(sandbox, mode, 0, false); | |
| 72 hostDiv = document.getElementById('host-div'); | |
| 73 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); | |
| 74 shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '0'); | |
| 75 | |
| 76 expectedOrder = [ | |
| 77 'input-before', | |
| 78 'host-div', | |
| 79 'host-div/inner-input', | |
| 80 'input-after' | |
| 81 ]; | |
| 82 | |
| 83 testFocusNavigationForward(expectedOrder); | |
| 84 expectedOrder.reverse(); | |
| 85 testFocusNavigationBackward(expectedOrder); | |
| 86 } | |
| 87 | |
| 88 function test4(mode) { | |
| 89 debug('(4/8)Testing tab navigation order with tabindex=0 and delegatesFocus=
true'); | |
| 90 prepareDOMTree(sandbox, mode, 0, true); | |
| 91 hostDiv = document.getElementById('host-div'); | |
| 92 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); | |
| 93 shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '0'); | |
| 94 | |
| 95 expectedOrder = [ | |
| 96 'input-before', | |
| 97 // 'host-div', // should skip host when delegatesFocus=true | |
| 98 'host-div/inner-input', | |
| 99 'input-after' | |
| 100 ]; | |
| 101 | |
| 102 testFocusNavigationForward(expectedOrder); | |
| 103 expectedOrder.reverse(); | |
| 104 testFocusNavigationBackward(expectedOrder); | |
| 105 } | |
| 106 | |
| 107 function test5(mode) { | |
| 108 debug('(5/8) Testing tab navigation order with tabindex=-1 and delegatesFocu
s=false'); | |
| 109 prepareDOMTree(sandbox, mode, -1, false); | |
| 110 hostDiv = document.getElementById('host-div'); | |
| 111 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); | |
| 112 shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '-1'); | |
| 113 | |
| 114 expectedOrder = [ | |
| 115 'input-before', | |
| 116 'host-div/inner-input', | |
| 117 'input-after' | |
| 118 ]; | |
| 119 | |
| 120 testFocusNavigationForward(expectedOrder); | |
| 121 expectedOrder.reverse(); | |
| 122 testFocusNavigationBackward(expectedOrder); | |
| 123 } | |
| 124 | |
| 125 function test6(mode) { | |
| 126 debug('(6/8) Testing tab navigation order with tabindex=-1 and delegatesFocu
s=true'); | |
| 127 prepareDOMTree(sandbox, mode, -1, true); | |
| 128 hostDiv = document.getElementById('host-div'); | |
| 129 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); | |
| 130 shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '-1'); | |
| 131 | |
| 132 expectedOrder = [ | |
| 133 'input-before', | |
| 134 // 'host-div/inner-input', // The whole shadow tree should be skipped | |
| 135 'input-after' | |
| 136 ]; | |
| 137 | |
| 138 testFocusNavigationForward(expectedOrder); | |
| 139 expectedOrder.reverse(); | |
| 140 testFocusNavigationBackward(expectedOrder); | |
| 141 } | |
| 142 | |
| 143 function test7(mode) { | |
| 144 debug('(7/8) Testing tab navigation order with tabindex=1 and delegatesFocus
=false'); | |
| 145 prepareDOMTree(sandbox, mode, 1, false); | |
| 146 hostDiv = document.getElementById('host-div'); | |
| 147 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'false'); | |
| 148 shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '1'); | |
| 149 | |
| 150 expectedOrder = [ | |
| 151 'input-before', | |
| 152 'input-after', | |
| 153 'host-div', | |
| 154 'host-div/inner-input' | |
| 155 ]; | |
| 156 | |
| 157 testFocusNavigationForward(expectedOrder); | |
| 158 expectedOrder.reverse(); | |
| 159 testFocusNavigationBackward(expectedOrder); | |
| 160 } | |
| 161 | |
| 162 function test8(mode) { | |
| 163 debug('(8/8) Testing tab navigation order with tabindex=1 and delegatesFocus
=true'); | |
| 164 prepareDOMTree(sandbox, mode, 1, true); | |
| 165 hostDiv = document.getElementById('host-div'); | |
| 166 shouldBe('window.internals.shadowRoot(hostDiv).delegatesFocus', 'true'); | |
| 167 shouldBeEqualToString('hostDiv.getAttribute("tabindex")', '1'); | |
| 168 | |
| 169 expectedOrder = [ | |
| 170 'input-before', | |
| 171 'input-after', | |
| 172 // 'host-div', // should skip host when delegatesFocus=true | |
| 173 'host-div/inner-input' | |
| 174 ]; | |
| 175 | |
| 176 testFocusNavigationForward(expectedOrder); | |
| 177 expectedOrder.reverse(); | |
| 178 testFocusNavigationBackward(expectedOrder); | |
| 179 } | |
| 180 | |
| 181 function test() { | |
| 182 debug('Testing shadow host with possible combinations of mode, tabindex and
delegatesFocus'); | |
| 183 | |
| 184 test1('open'); | |
| 185 test2('open'); | |
| 186 test3('open'); | |
| 187 test4('open'); | |
| 188 test5('open'); | |
| 189 test6('open'); | |
| 190 test7('open'); | |
| 191 test8('open'); | |
| 192 | |
| 193 test1('closed'); | |
| 194 test2('closed'); | |
| 195 test3('closed'); | |
| 196 test4('closed'); | |
| 197 test5('closed'); | |
| 198 test6('closed'); | |
| 199 test7('closed'); | |
| 200 test8('closed'); | |
| 201 } | |
| 202 | |
| 203 function run_tests() { | |
| 204 if (!window.eventSender) { | |
| 205 testFailed(''); | |
| 206 return; | |
| 207 } | |
| 208 | |
| 209 test(); | |
| 210 | |
| 211 debug('Test finished.'); | |
| 212 } | |
| 213 | |
| 214 run_tests(); | |
| 215 </script> | |
| 216 </body> | |
| 217 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1774113002:
Move Shadow DOM V1 tests from fast/dom/shadow to shadow-dom (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master