| 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 tabStop 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 tabStop"); | |
| 54 | |
| 55 var expectedOrder = [ | |
| 56 'input-before', | |
| 57 'button-focusable', | |
| 58 'input-focusable', | |
| 59 'input-after' | |
| 60 ]; | |
| 61 | |
| 62 testFocusNavigationForward(expectedOrder); | |
| 63 expectedOrder.reverse(); | |
| 64 testFocusNavigationBackward(expectedOrder); | |
| 65 | |
| 66 debug("Normal tab order with tabStop=false"); | |
| 67 | |
| 68 button_focusable = document.getElementById("button-focusable"); | |
| 69 button_focusable.tabStop = false; | |
| 70 input_focusable = document.getElementById("input-focusable"); | |
| 71 input_focusable.tabStop = false; | |
| 72 | |
| 73 expectedOrder = [ | |
| 74 'input-before', | |
| 75 // These will be skipped with tabStop = false. | |
| 76 // 'button-focusable', | |
| 77 // 'input-focusable', | |
| 78 'input-after' | |
| 79 ]; | |
| 80 | |
| 81 testFocusNavigationForward(expectedOrder); | |
| 82 expectedOrder.reverse(); | |
| 83 testFocusNavigationBackward(expectedOrder); | |
| 84 } | |
| 85 | |
| 86 function testButton() { | |
| 87 debug("Testing tabStop 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.tabStop', 'true'); | |
| 95 | |
| 96 var expectedOrder = [ | |
| 97 'button-before', | |
| 98 'button-host', | |
| 99 'button-host/button-inner', | |
| 100 'button-after' | |
| 101 ]; | |
| 102 | |
| 103 testFocusNavigationForward(expectedOrder); | |
| 104 expectedOrder.reverse(); | |
| 105 testFocusNavigationBackward(expectedOrder); | |
| 106 | |
| 107 debug("Testing tabStop property on button with tabStop = false"); | |
| 108 button_host.tabStop = false; | |
| 109 | |
| 110 expectedOrder = [ | |
| 111 'button-before', | |
| 112 // 'button-host', // host should be skipped when tabStop=false | |
| 113 'button-host/button-inner', | |
| 114 'button-after' | |
| 115 ]; | |
| 116 | |
| 117 testFocusNavigationForward(expectedOrder); | |
| 118 expectedOrder.reverse(); | |
| 119 testFocusNavigationBackward(expectedOrder); | |
| 120 } | |
| 121 | |
| 122 function testAnchor() { | |
| 123 debug("Testing tabStop property on anchor without href"); | |
| 124 | |
| 125 prepareAnchorWithShadow(sandbox); | |
| 126 | |
| 127 // This is questionable, but true; <a> without href returns 0 for tabIndex. | |
| 128 anchor_host = document.getElementById("anchor-host"); | |
| 129 shouldBe('anchor_host.tabStop', 'true'); | |
| 130 | |
| 131 var expectedOrder = [ | |
| 132 'anchor-before', | |
| 133 'anchor-host/anchor-inner', | |
| 134 'anchor-after' | |
| 135 ]; | |
| 136 | |
| 137 testFocusNavigationForward(expectedOrder); | |
| 138 expectedOrder.reverse(); | |
| 139 testFocusNavigationBackward(expectedOrder); | |
| 140 | |
| 141 debug("Testing tabStop property on anchor with href"); | |
| 142 | |
| 143 anchor_host.setAttribute('href', '#'); | |
| 144 anchor_host.offsetTop; | |
| 145 shouldBe('anchor_host.tabStop', 'true'); | |
| 146 | |
| 147 expectedOrder = [ | |
| 148 'anchor-before', | |
| 149 'anchor-host', | |
| 150 'anchor-host/anchor-inner', | |
| 151 'anchor-after' | |
| 152 ]; | |
| 153 | |
| 154 testFocusNavigationForward(expectedOrder); | |
| 155 expectedOrder.reverse(); | |
| 156 testFocusNavigationBackward(expectedOrder); | |
| 157 | |
| 158 debug("Testing tabStop property on anchor with href but tabStop = false"); | |
| 159 | |
| 160 anchor_host.tabStop = false; | |
| 161 | |
| 162 expectedOrder = [ | |
| 163 'anchor-before', | |
| 164 // 'anchor-host', // host should be skipped when tabStop=false | |
| 165 'anchor-host/anchor-inner', | |
| 166 'anchor-after' | |
| 167 ]; | |
| 168 | |
| 169 testFocusNavigationForward(expectedOrder); | |
| 170 expectedOrder.reverse(); | |
| 171 testFocusNavigationBackward(expectedOrder); | |
| 172 } | |
| 173 | |
| 174 function run_tests() { | |
| 175 if (!window.eventSender) { | |
| 176 testFailed(''); | |
| 177 return; | |
| 178 } | |
| 179 | |
| 180 testRunner.overridePreference("WebKitTabToLinksPreferenceKey", true); | |
| 181 | |
| 182 testFocusableElementsWithIsTabStop(); | |
| 183 sandbox.innerHTML = ''; | |
| 184 | |
| 185 testButton(); | |
| 186 sandbox.innerHTML = ''; | |
| 187 | |
| 188 testAnchor(); | |
| 189 | |
| 190 debug('Test finished.'); | |
| 191 } | |
| 192 | |
| 193 run_tests(); | |
| 194 </script> | |
| 195 </body> | |
| 196 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
