Chromium Code Reviews Chromium Code Reviews
Issue 917613004:
Add isTabStop attribute to Element (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| 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 expected_nav = [ | |
|
hayato
2015/02/20 08:46:30
Nit: We should avoid using snake case for variable
kochi
2015/02/20 09:43:05
Done.
Renamed to expectedOrder and replaced all i
| |
| 56 'input-before', | |
| 57 'button-focusable', | |
| 58 'input-focusable', | |
| 59 'input-after' | |
| 60 ]; | |
| 61 | |
| 62 testFocusNavigationFowrad(expected_nav); | |
| 63 expected_nav.reverse(); | |
| 64 testFocusNavigationBackward(expected_nav); | |
| 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 var expected_nav = [ | |
|
hayato
2015/02/20 08:46:31
|expected_nav| is declared twice. You should remov
kochi
2015/02/20 09:43:05
Done.
| |
| 74 'input-before', | |
| 75 // These will be skipped with isTabStop = false. | |
| 76 // 'button-focusable', | |
| 77 // 'input-focusable', | |
| 78 'input-after' | |
| 79 ]; | |
| 80 | |
| 81 testFocusNavigationFowrad(expected_nav); | |
| 82 expected_nav.reverse(); | |
| 83 testFocusNavigationBackward(expected_nav); | |
| 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 expected_nav = [ | |
| 97 'button-before', | |
| 98 'button-host', | |
| 99 'button-host/button-inner', | |
| 100 'button-after' | |
| 101 ]; | |
| 102 | |
| 103 testFocusNavigationFowrad(expected_nav); | |
| 104 expected_nav.reverse(); | |
| 105 testFocusNavigationBackward(expected_nav); | |
| 106 | |
| 107 debug("Testing isTabStop property on button with isTabStop = false"); | |
| 108 button_host.isTabStop = false; | |
| 109 | |
| 110 var expected_nav = [ | |
| 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(expected_nav); | |
| 118 expected_nav.reverse(); | |
| 119 testFocusNavigationBackward(expected_nav); | |
| 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 expected_nav = [ | |
| 131 'anchor-before', | |
| 132 'anchor-host/anchor-inner', | |
| 133 'anchor-after' | |
| 134 ]; | |
| 135 | |
| 136 testFocusNavigationFowrad(expected_nav); | |
| 137 expected_nav.reverse(); | |
| 138 testFocusNavigationBackward(expected_nav); | |
| 139 | |
| 140 debug("Testing isTabStop property on anchor with href"); | |
| 141 | |
| 142 anchor_host.setAttribute('href', '#'); | |
| 143 anchor_host.offsetTop; | |
|
hayato
2015/02/20 08:46:31
Why do we need this? Looks weird.
kochi
2015/02/20 09:43:05
Removed.
This was inserted while I was debugging,
| |
| 144 shouldBe('anchor_host.isTabStop', 'true'); | |
| 145 | |
| 146 var expected_nav = [ | |
| 147 'anchor-before', | |
| 148 'anchor-host', | |
| 149 'anchor-host/anchor-inner', | |
| 150 'anchor-after' | |
| 151 ]; | |
| 152 | |
| 153 testFocusNavigationFowrad(expected_nav); | |
| 154 expected_nav.reverse(); | |
| 155 testFocusNavigationBackward(expected_nav); | |
| 156 | |
| 157 debug("Testing isTabStop property on anchor with href but isTabStop = false" ); | |
| 158 | |
| 159 anchor_host.isTabStop = false; | |
| 160 | |
| 161 var expected_nav = [ | |
| 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(expected_nav); | |
| 169 expected_nav.reverse(); | |
| 170 testFocusNavigationBackward(expected_nav); | |
| 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 |
