| 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 isTabStop property on focusable elements
</p> |
| 9 <pre id="console"></pre> |
| 10 <div id="sandbox"></div> |
| 11 <script> |
| 12 function prepareFocusableElements(parent) { |
| 13 parent.appendChild( |
| 14 createDOM('div', {'id': 'container'}, |
| 15 createDOM('input', {'id': 'input-before'}), |
| 16 createDOM('button', {'id': 'button-focusable'}), |
| 17 createDOM('input', {'id': 'input-focusable'}), |
| 18 createDOM('input', {'id': 'input-after'}))); |
| 19 parent.offsetTop; |
| 20 } |
| 21 |
| 22 function prepareButtonWithShadow(parent) { |
| 23 parent.appendChild( |
| 24 createDOM('div', {'id': 'button-container'}, |
| 25 createDOM('input', {'id': 'button-before'}), |
| 26 createDOM('button', {'id': 'button-host'}, |
| 27 createShadowRoot( |
| 28 createDOM('input', {'id': 'button-inner'}))), |
| 29 createDOM('input', {'id': 'button-after'}))); |
| 30 parent.offsetTop; |
| 31 } |
| 32 |
| 33 function prepareAnchorWithShadow(parent) { |
| 34 parent.appendChild( |
| 35 createDOM('div', {'id': 'anchor-container'}, |
| 36 createDOM('input', {'id': 'anchor-before'}), |
| 37 createDOM('a', {'id': 'anchor-host'}, |
| 38 createShadowRoot( |
| 39 createDOM('input', {'id': 'anchor-inner'}))), |
| 40 createDOM('input', {'id': 'anchor-after'}))); |
| 41 |
| 42 parent.offsetTop; |
| 43 } |
| 44 |
| 45 var button_host; |
| 46 var anchor_host; |
| 47 |
| 48 function testFocusableElementsWithIsTabStop() { |
| 49 debug("Testing tab focus navigation order on focusable nodes"); |
| 50 |
| 51 prepareFocusableElements(sandbox); |
| 52 |
| 53 debug("Normal tab order without isTabStop"); |
| 54 |
| 55 var expectedOrder = [ |
| 56 'input-before', |
| 57 'button-focusable', |
| 58 'input-focusable', |
| 59 'input-after' |
| 60 ]; |
| 61 |
| 62 testFocusNavigationFowrad(expectedOrder); |
| 63 expectedOrder.reverse(); |
| 64 testFocusNavigationBackward(expectedOrder); |
| 65 |
| 66 debug("Normal tab order with isTabStop=false"); |
| 67 |
| 68 button_focusable = document.getElementById("button-focusable"); |
| 69 button_focusable.isTabStop = false; |
| 70 input_focusable = document.getElementById("input-focusable"); |
| 71 input_focusable.isTabStop = false; |
| 72 |
| 73 expectedOrder = [ |
| 74 'input-before', |
| 75 // These will be skipped with isTabStop = false. |
| 76 // 'button-focusable', |
| 77 // 'input-focusable', |
| 78 'input-after' |
| 79 ]; |
| 80 |
| 81 testFocusNavigationFowrad(expectedOrder); |
| 82 expectedOrder.reverse(); |
| 83 testFocusNavigationBackward(expectedOrder); |
| 84 } |
| 85 |
| 86 function testButton() { |
| 87 debug("Testing isTabStop property on button"); |
| 88 |
| 89 prepareButtonWithShadow(sandbox); |
| 90 |
| 91 debug("Normal tab order without tabindex"); |
| 92 |
| 93 button_host = document.getElementById("button-host"); |
| 94 shouldBe('button_host.isTabStop', 'true'); |
| 95 |
| 96 var expectedOrder = [ |
| 97 'button-before', |
| 98 'button-host', |
| 99 'button-host/button-inner', |
| 100 'button-after' |
| 101 ]; |
| 102 |
| 103 testFocusNavigationFowrad(expectedOrder); |
| 104 expectedOrder.reverse(); |
| 105 testFocusNavigationBackward(expectedOrder); |
| 106 |
| 107 debug("Testing isTabStop property on button with isTabStop = false"); |
| 108 button_host.isTabStop = false; |
| 109 |
| 110 expectedOrder = [ |
| 111 'button-before', |
| 112 // 'button-host', // host should be skipped when isTabStop=false |
| 113 'button-host/button-inner', |
| 114 'button-after' |
| 115 ]; |
| 116 |
| 117 testFocusNavigationFowrad(expectedOrder); |
| 118 expectedOrder.reverse(); |
| 119 testFocusNavigationBackward(expectedOrder); |
| 120 } |
| 121 |
| 122 function testAnchor() { |
| 123 debug("Testing isTabStop property on anchor without href"); |
| 124 |
| 125 prepareAnchorWithShadow(sandbox); |
| 126 |
| 127 anchor_host = document.getElementById("anchor-host"); |
| 128 shouldBe('anchor_host.isTabStop', 'false'); |
| 129 |
| 130 var expectedOrder = [ |
| 131 'anchor-before', |
| 132 'anchor-host/anchor-inner', |
| 133 'anchor-after' |
| 134 ]; |
| 135 |
| 136 testFocusNavigationFowrad(expectedOrder); |
| 137 expectedOrder.reverse(); |
| 138 testFocusNavigationBackward(expectedOrder); |
| 139 |
| 140 debug("Testing isTabStop property on anchor with href"); |
| 141 |
| 142 anchor_host.setAttribute('href', '#'); |
| 143 anchor_host.offsetTop; |
| 144 shouldBe('anchor_host.isTabStop', 'true'); |
| 145 |
| 146 expectedOrder = [ |
| 147 'anchor-before', |
| 148 'anchor-host', |
| 149 'anchor-host/anchor-inner', |
| 150 'anchor-after' |
| 151 ]; |
| 152 |
| 153 testFocusNavigationFowrad(expectedOrder); |
| 154 expectedOrder.reverse(); |
| 155 testFocusNavigationBackward(expectedOrder); |
| 156 |
| 157 debug("Testing isTabStop property on anchor with href but isTabStop = false"
); |
| 158 |
| 159 anchor_host.isTabStop = false; |
| 160 |
| 161 expectedOrder = [ |
| 162 'anchor-before', |
| 163 // 'anchor-host', // host should be skipped when isTabStop=false |
| 164 'anchor-host/anchor-inner', |
| 165 'anchor-after' |
| 166 ]; |
| 167 |
| 168 testFocusNavigationFowrad(expectedOrder); |
| 169 expectedOrder.reverse(); |
| 170 testFocusNavigationBackward(expectedOrder); |
| 171 } |
| 172 |
| 173 function run_tests() { |
| 174 if (window.testRunner) |
| 175 testRunner.dumpAsText(); |
| 176 |
| 177 if (!window.eventSender) { |
| 178 testFailed(''); |
| 179 return; |
| 180 } |
| 181 |
| 182 testRunner.overridePreference("WebKitTabToLinksPreferenceKey", true); |
| 183 |
| 184 testFocusableElementsWithIsTabStop(); |
| 185 sandbox.innerHTML = ''; |
| 186 |
| 187 testButton(); |
| 188 sandbox.innerHTML = ''; |
| 189 |
| 190 testAnchor(); |
| 191 |
| 192 debug('Test finished.'); |
| 193 } |
| 194 |
| 195 run_tests(); |
| 196 </script> |
| 197 </body> |
| 198 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 917613004:
Add isTabStop attribute to Element (Closed)
Base URL: svn://svn.chromium.org/blink/trunk