OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <!-- |
| 3 Distributed under both the W3C Test Suite License [1] and the W3C |
| 4 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the |
| 5 policies and contribution forms [3]. |
| 6 |
| 7 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license |
| 8 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license |
| 9 [3] http://www.w3.org/2004/10/27-testcases |
| 10 --> |
| 11 <html> |
| 12 <head> |
| 13 <title>Shadow DOM Test: A_07_02_04</title> |
| 14 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> |
| 15 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#focus-n
avigation"> |
| 16 <meta name="assert" content="User Interaction: For sequential focus navigation,
the shadow DOM navigation order sequence must be inserted into the document navi
gation order immediately after the shadow host, if the shadow host is focusable;
"> |
| 17 <script src="../../../../../resources/testharness.js"></script> |
| 18 <script src="../../../../../resources/testharnessreport.js"></script> |
| 19 <script src="../../testcommon.js"></script> |
| 20 <link rel="stylesheet" href="../../../../../resources/testharness.css"> |
| 21 </head> |
| 22 <body> |
| 23 <div id="log"></div> |
| 24 <script> |
| 25 var A_07_02_04_T01 = async_test('A_07_02_04_T01'); |
| 26 |
| 27 A_07_02_04_T01.step(unit(function (ctx) { |
| 28 |
| 29 var counter = 0; |
| 30 |
| 31 var invoked = []; |
| 32 |
| 33 var d = newRenderedHTMLDocument(ctx); |
| 34 |
| 35 var chb1 = d.createElement('input'); |
| 36 chb1.setAttribute('type', 'checkbox'); |
| 37 // TODO according CSS3 nav-index is a replacement for tabindex |
| 38 //chb1.setAttribute('nav-index', '4'); |
| 39 chb1.setAttribute('tabindex', '1'); |
| 40 chb1.setAttribute('id', 'chb1'); |
| 41 chb1.addEventListener('focus', A_07_02_04_T01.step_func(function(event)
{ |
| 42 assert_equals(counter++, 0, 'Point 1: wrong focus navigation ord
er'); |
| 43 invoked[1] = true; |
| 44 }), false); |
| 45 invoked[1] = false; |
| 46 d.body.appendChild(chb1); |
| 47 |
| 48 var host = d.createElement('div'); |
| 49 //make shadow host focusable |
| 50 host.setAttribute('tabindex', '3'); |
| 51 d.body.appendChild(host); |
| 52 var s = host.createShadowRoot(); |
| 53 |
| 54 var inp1 = d.createElement('input'); |
| 55 inp1.setAttribute('type', 'text'); |
| 56 inp1.setAttribute('id', 'shInp1'); |
| 57 //inp1.setAttribute('nav-index', '3'); |
| 58 inp1.setAttribute('tabindex', '2'); |
| 59 inp1.setAttribute('value', 'Input 1'); |
| 60 inp1.addEventListener('focus', A_07_02_04_T01.step_func(function(event)
{ |
| 61 assert_equals(counter++, 3, 'Point 2: wrong focus navigation ord
er'); |
| 62 invoked[2] = true; |
| 63 }), false); |
| 64 invoked[2] = false; |
| 65 s.appendChild(inp1); |
| 66 |
| 67 var inp2 = d.createElement('input'); |
| 68 inp2.setAttribute('type', 'text'); |
| 69 inp2.setAttribute('id', 'shInp2'); |
| 70 //inp2.setAttribute('nav-index', '2'); |
| 71 inp2.setAttribute('tabindex', '1'); |
| 72 inp2.setAttribute('value', 'Input 2'); |
| 73 inp2.addEventListener('focus', A_07_02_04_T01.step_func(function(event)
{ |
| 74 assert_equals(counter++, 2, 'Point 3: wrong focus navigation ord
er'); |
| 75 invoked[3] = true; |
| 76 }), false); |
| 77 invoked[3] = false; |
| 78 s.appendChild(inp2); |
| 79 |
| 80 var chb2 = d.createElement('input'); |
| 81 chb2.setAttribute('type', 'checkbox'); |
| 82 chb2.setAttribute('id', 'chb2'); |
| 83 //chb2.setAttribute('nav-index', '1'); |
| 84 chb2.setAttribute('tabindex', '2'); |
| 85 chb2.addEventListener('focus', A_07_02_04_T01.step_func(function(event)
{ |
| 86 assert_equals(counter++, 1, 'Point 4: wrong focus navigation ord
er'); |
| 87 invoked[4] = true; |
| 88 }), false); |
| 89 invoked[4] = false; |
| 90 d.body.appendChild(chb2); |
| 91 |
| 92 var chb3 = d.createElement('input'); |
| 93 chb3.setAttribute('type', 'checkbox'); |
| 94 chb3.setAttribute('id', 'chb3'); |
| 95 //chb3.setAttribute('nav-index', '5'); |
| 96 chb3.setAttribute('tabindex', '4'); |
| 97 chb3.addEventListener('focus', A_07_02_04_T01.step_func(function(event)
{ |
| 98 assert_equals(counter++, 4, 'Point 5: wrong focus navigation ord
er'); |
| 99 invoked[5] = true; |
| 100 }), false); |
| 101 invoked[5] = false; |
| 102 d.body.appendChild(chb3); |
| 103 |
| 104 chb1.focus(); |
| 105 |
| 106 //simulate TAB clicks. Expected order: chb1, chb2, inp2, inp1, chb3 |
| 107 fireKeyboardEvent(d, chb1, 'U+0009'); |
| 108 |
| 109 fireKeyboardEvent(d, chb2, 'U+0009'); |
| 110 |
| 111 fireKeyboardEvent(d, inp2, 'U+0009'); |
| 112 |
| 113 fireKeyboardEvent(d, inp1, 'U+0009'); |
| 114 |
| 115 fireKeyboardEvent(d, chb3, 'U+0009'); |
| 116 |
| 117 for (var i = 1; i < invoked.length; i++) { |
| 118 if (!invoked[i]) { |
| 119 assert_true(false, 'Piont ' + i + ' event listener was n
ot invoked'); |
| 120 } |
| 121 } |
| 122 |
| 123 A_07_02_04_T01.done(); |
| 124 })); |
| 125 |
| 126 |
| 127 |
| 128 // test nodes, distributed into insertion points |
| 129 var A_07_02_04_T02 = async_test('A_07_02_04_T02'); |
| 130 |
| 131 A_07_02_04_T02.step(unit(function (ctx) { |
| 132 |
| 133 var counter = 0; |
| 134 |
| 135 var invoked = []; |
| 136 |
| 137 var d = newRenderedHTMLDocument(ctx); |
| 138 |
| 139 var host = d.createElement('div'); |
| 140 host.setAttribute('tabindex', '3'); |
| 141 d.body.appendChild(host); |
| 142 |
| 143 var chb1 = d.createElement('input'); |
| 144 chb1.setAttribute('type', 'checkbox'); |
| 145 chb1.setAttribute('id', 'chb1'); |
| 146 chb1.setAttribute('tabindex', '1'); |
| 147 chb1.addEventListener('focus', A_07_02_04_T02.step_func(function(event)
{ |
| 148 assert_equals(counter++, 0, 'Point 1: wrong focus navigation ord
er'); |
| 149 invoked[1] = true; |
| 150 }), false); |
| 151 invoked[1] = false; |
| 152 d.body.appendChild(chb1); |
| 153 |
| 154 var chb2 = d.createElement('input'); |
| 155 chb2.setAttribute('type', 'checkbox'); |
| 156 chb2.setAttribute('id', 'chb2'); |
| 157 chb2.setAttribute('class', 'shadow'); |
| 158 chb2.setAttribute('tabindex', '3'); |
| 159 chb2.addEventListener('focus', A_07_02_04_T02.step_func(function(event)
{ |
| 160 assert_equals(counter++, 4, 'Point 2: wrong focus navigation ord
er'); |
| 161 invoked[2] = true; |
| 162 }), false); |
| 163 invoked[2] = false; |
| 164 host.appendChild(chb2); |
| 165 |
| 166 var chb3 = d.createElement('input'); |
| 167 chb3.setAttribute('type', 'checkbox'); |
| 168 chb3.setAttribute('id', 'chb3'); |
| 169 chb3.setAttribute('class', 'shadow'); |
| 170 chb3.setAttribute('tabindex', '2'); |
| 171 chb3.addEventListener('focus', A_07_02_04_T02.step_func(function(event)
{ |
| 172 assert_equals(counter++, 1, 'Point 3: wrong focus navigation ord
er'); |
| 173 invoked[3] = true; |
| 174 }), false); |
| 175 invoked[3] = false; |
| 176 host.appendChild(chb3); |
| 177 |
| 178 var s = host.createShadowRoot(); |
| 179 |
| 180 var div = d.createElement('div'); |
| 181 div.innerHTML = '<content select=".shadow"></content>'; |
| 182 s.appendChild(div); |
| 183 |
| 184 var inp1 = d.createElement('input'); |
| 185 inp1.setAttribute('type', 'text'); |
| 186 inp1.setAttribute('id', 'shInp1'); |
| 187 inp1.setAttribute('value', 'Input 1'); |
| 188 inp1.setAttribute('tabindex', '4'); |
| 189 inp1.addEventListener('focus', A_07_02_04_T02.step_func(function(event)
{ |
| 190 assert_equals(counter++, 3, 'Point 4: wrong focus navigation ord
er'); |
| 191 invoked[4] = true; |
| 192 }), false); |
| 193 invoked[4] = false; |
| 194 s.appendChild(inp1); |
| 195 |
| 196 var inp2 = d.createElement('input'); |
| 197 inp2.setAttribute('type', 'text'); |
| 198 inp2.setAttribute('id', 'shInp2'); |
| 199 inp2.setAttribute('value', 'Input 2'); |
| 200 inp2.setAttribute('tabindex', '4'); |
| 201 inp2.addEventListener('focus', A_07_02_04_T02.step_func(function(event)
{ |
| 202 assert_equals(counter++, 5, 'Point 5: wrong focus navigation ord
er'); |
| 203 invoked[5] = true; |
| 204 }), false); |
| 205 invoked[5] = false; |
| 206 d.body.appendChild(inp2); |
| 207 |
| 208 var chb4 = d.createElement('input'); |
| 209 chb4.setAttribute('type', 'checkbox'); |
| 210 chb4.setAttribute('id', 'chb4'); |
| 211 chb4.setAttribute('tabindex', '2'); |
| 212 chb4.addEventListener('focus', A_07_02_04_T02.step_func(function(event)
{ |
| 213 assert_equals(counter++, 2, 'Point 6: wrong focus navigation ord
er'); |
| 214 invoked[6] = true; |
| 215 }), false); |
| 216 invoked[6] = false; |
| 217 d.body.appendChild(chb4); |
| 218 |
| 219 chb1.focus(); |
| 220 |
| 221 //simulate TAB clicks |
| 222 //Expected order: chb1, chb3, chb4, chb2, inp1, inp2 |
| 223 fireKeyboardEvent(d, chb1, 'U+0009'); |
| 224 fireKeyboardEvent(d, chb3, 'U+0009'); |
| 225 fireKeyboardEvent(d, chb4, 'U+0009'); |
| 226 fireKeyboardEvent(d, chb2, 'U+0009'); |
| 227 fireKeyboardEvent(d, inp1, 'U+0009'); |
| 228 fireKeyboardEvent(d, inp2, 'U+0009'); |
| 229 |
| 230 |
| 231 |
| 232 for (var i = 1; i < invoked.length; i++) { |
| 233 if (!invoked[i]) { |
| 234 assert_true(false, 'Point ' + i + ' event listener was n
ot invoked'); |
| 235 } |
| 236 } |
| 237 |
| 238 A_07_02_04_T02.done(); |
| 239 })); |
| 240 |
| 241 |
| 242 |
| 243 // Shadow root is the first in nav order |
| 244 var A_07_02_04_T03 = async_test('A_07_02_04_T03'); |
| 245 |
| 246 A_07_02_04_T03.step(unit(function (ctx) { |
| 247 |
| 248 var counter = 0; |
| 249 |
| 250 var invoked = []; |
| 251 |
| 252 var d = newRenderedHTMLDocument(ctx); |
| 253 |
| 254 var chb1 = d.createElement('input'); |
| 255 chb1.setAttribute('type', 'checkbox'); |
| 256 chb1.setAttribute('tabindex', '3'); |
| 257 chb1.setAttribute('id', 'chb1'); |
| 258 chb1.addEventListener('focus', A_07_02_04_T03.step_func(function(event)
{ |
| 259 assert_equals(counter++, 4, 'Point 1: wrong focus navigation ord
er'); |
| 260 invoked[1] = true; |
| 261 }), false); |
| 262 invoked[1] = false; |
| 263 d.body.appendChild(chb1); |
| 264 |
| 265 var host = d.createElement('div'); |
| 266 host.setAttribute('tabindex', '1'); |
| 267 d.body.appendChild(host); |
| 268 var s = host.createShadowRoot(); |
| 269 |
| 270 var inp1 = d.createElement('input'); |
| 271 inp1.setAttribute('type', 'text'); |
| 272 inp1.setAttribute('id', 'shInp1'); |
| 273 inp1.setAttribute('tabindex', '2'); |
| 274 inp1.setAttribute('value', 'Input 1'); |
| 275 inp1.addEventListener('focus', A_07_02_04_T03.step_func(function(event)
{ |
| 276 assert_equals(counter++, 1, 'Point 2: wrong focus navigation ord
er'); |
| 277 invoked[2] = true; |
| 278 }), false); |
| 279 invoked[2] = false; |
| 280 s.appendChild(inp1); |
| 281 |
| 282 var inp2 = d.createElement('input'); |
| 283 inp2.setAttribute('type', 'text'); |
| 284 inp2.setAttribute('id', 'shInp2'); |
| 285 inp2.setAttribute('tabindex', '1'); |
| 286 inp2.setAttribute('value', 'Input 2'); |
| 287 inp2.addEventListener('focus', A_07_02_04_T03.step_func(function(event)
{ |
| 288 assert_equals(counter++, 0, 'Point 3: wrong focus navigation ord
er'); |
| 289 invoked[3] = true; |
| 290 }), false); |
| 291 invoked[3] = false; |
| 292 s.appendChild(inp2); |
| 293 |
| 294 var chb2 = d.createElement('input'); |
| 295 chb2.setAttribute('type', 'checkbox'); |
| 296 chb2.setAttribute('id', 'chb2'); |
| 297 chb2.setAttribute('tabindex', '3'); |
| 298 chb2.addEventListener('focus', A_07_02_04_T03.step_func(function(event)
{ |
| 299 assert_equals(counter++, 2, 'Point 4: wrong focus navigation ord
er'); |
| 300 invoked[4] = true; |
| 301 }), false); |
| 302 invoked[4] = false; |
| 303 s.appendChild(chb2); |
| 304 |
| 305 var chb3 = d.createElement('input'); |
| 306 chb3.setAttribute('type', 'checkbox'); |
| 307 chb3.setAttribute('id', 'chb3'); |
| 308 chb3.setAttribute('tabindex', '2'); |
| 309 chb3.addEventListener('focus', A_07_02_04_T03.step_func(function(event)
{ |
| 310 assert_equals(counter++, 3, 'Point 5: wrong focus navigation ord
er'); |
| 311 invoked[5] = true; |
| 312 }), false); |
| 313 invoked[5] = false; |
| 314 d.body.appendChild(chb3); |
| 315 |
| 316 host.focus(); |
| 317 |
| 318 //simulate TAB clicks. Expected order: inp2, inp1, chb2, chb3, chb1 |
| 319 fireKeyboardEvent(d, inp2, 'U+0009'); |
| 320 fireKeyboardEvent(d, inp1, 'U+0009'); |
| 321 fireKeyboardEvent(d, chb2, 'U+0009'); |
| 322 fireKeyboardEvent(d, chb3, 'U+0009'); |
| 323 fireKeyboardEvent(d, chb1, 'U+0009'); |
| 324 |
| 325 for (var i = 1; i < invoked.length; i++) { |
| 326 if (!invoked[i]) { |
| 327 assert_true(false, 'Piont ' + i + ' event listener was n
ot invoked'); |
| 328 } |
| 329 } |
| 330 |
| 331 A_07_02_04_T03.done(); |
| 332 })); |
| 333 |
| 334 |
| 335 //Shadow root is the last in nav order |
| 336 var A_07_02_04_T04 = async_test('A_07_02_04_T04'); |
| 337 |
| 338 A_07_02_04_T04.step(unit(function (ctx) { |
| 339 |
| 340 var counter = 0; |
| 341 |
| 342 var invoked = []; |
| 343 |
| 344 var d = newRenderedHTMLDocument(ctx); |
| 345 |
| 346 var chb1 = d.createElement('input'); |
| 347 chb1.setAttribute('type', 'checkbox'); |
| 348 chb1.setAttribute('tabindex', '1'); |
| 349 chb1.setAttribute('id', 'chb1'); |
| 350 chb1.addEventListener('focus', A_07_02_04_T04.step_func(function(event)
{ |
| 351 assert_equals(counter++, 0, 'Point 1: wrong focus navigation ord
er'); |
| 352 invoked[1] = true; |
| 353 }), false); |
| 354 invoked[1] = false; |
| 355 d.body.appendChild(chb1); |
| 356 |
| 357 var host = d.createElement('div'); |
| 358 host.setAttribute('tabindex', '3'); |
| 359 d.body.appendChild(host); |
| 360 var s = host.createShadowRoot(); |
| 361 |
| 362 var inp1 = d.createElement('input'); |
| 363 inp1.setAttribute('type', 'text'); |
| 364 inp1.setAttribute('id', 'shInp1'); |
| 365 inp1.setAttribute('tabindex', '2'); |
| 366 inp1.setAttribute('value', 'Input 1'); |
| 367 inp1.addEventListener('focus', A_07_02_04_T04.step_func(function(event)
{ |
| 368 assert_equals(counter++, 3, 'Point 2: wrong focus navigation ord
er'); |
| 369 invoked[2] = true; |
| 370 }), false); |
| 371 invoked[2] = false; |
| 372 s.appendChild(inp1); |
| 373 |
| 374 var inp2 = d.createElement('input'); |
| 375 inp2.setAttribute('type', 'text'); |
| 376 inp2.setAttribute('id', 'shInp2'); |
| 377 inp2.setAttribute('tabindex', '1'); |
| 378 inp2.setAttribute('value', 'Input 2'); |
| 379 inp2.addEventListener('focus', A_07_02_04_T04.step_func(function(event)
{ |
| 380 assert_equals(counter++, 2, 'Point 3: wrong focus navigation ord
er'); |
| 381 invoked[3] = true; |
| 382 }), false); |
| 383 invoked[3] = false; |
| 384 s.appendChild(inp2); |
| 385 |
| 386 var chb2 = d.createElement('input'); |
| 387 chb2.setAttribute('type', 'checkbox'); |
| 388 chb2.setAttribute('id', 'chb2'); |
| 389 chb2.setAttribute('tabindex', '3'); |
| 390 chb2.addEventListener('focus', A_07_02_04_T04.step_func(function(event)
{ |
| 391 assert_equals(counter++, 4, 'Point 4: wrong focus navigation ord
er'); |
| 392 invoked[4] = true; |
| 393 }), false); |
| 394 invoked[4] = false; |
| 395 s.appendChild(chb2); |
| 396 |
| 397 var chb3 = d.createElement('input'); |
| 398 chb3.setAttribute('type', 'checkbox'); |
| 399 chb3.setAttribute('id', 'chb3'); |
| 400 chb3.setAttribute('tabindex', '2'); |
| 401 chb3.addEventListener('focus', A_07_02_04_T04.step_func(function(event)
{ |
| 402 assert_equals(counter++, 1, 'Point 5: wrong focus navigation ord
er'); |
| 403 invoked[5] = true; |
| 404 }), false); |
| 405 invoked[5] = false; |
| 406 d.body.appendChild(chb3); |
| 407 |
| 408 chb1.focus(); |
| 409 |
| 410 //simulate TAB clicks. Expected order: inp2, inp1, chb2, chb3, chb1 |
| 411 fireKeyboardEvent(d, chb1, 'U+0009'); |
| 412 fireKeyboardEvent(d, chb3, 'U+0009'); |
| 413 fireKeyboardEvent(d, inp2, 'U+0009'); |
| 414 fireKeyboardEvent(d, inp1, 'U+0009'); |
| 415 fireKeyboardEvent(d, chb2, 'U+0009'); |
| 416 |
| 417 for (var i = 1; i < invoked.length; i++) { |
| 418 if (!invoked[i]) { |
| 419 assert_true(false, 'Piont ' + i + ' event listener was n
ot invoked'); |
| 420 } |
| 421 } |
| 422 |
| 423 A_07_02_04_T04.done(); |
| 424 })); |
| 425 </script> |
| 426 </body> |
| 427 </html> |
OLD | NEW |