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_03</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 in place of the shadow host as if the shadow host were assigned the
value of auto for determining its position and shadow host is not 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_03_T01 = async_test('A_07_02_03_T01'); |
| 26 |
| 27 A_07_02_03_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', '4'); |
| 40 chb1.setAttribute('id', 'chb1'); |
| 41 chb1.addEventListener('focus', A_07_02_03_T01.step_func(function(event)
{ |
| 42 assert_equals(counter++, 1, '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 d.body.appendChild(host); |
| 50 var s = host.createShadowRoot(); |
| 51 |
| 52 var inp1 = d.createElement('input'); |
| 53 inp1.setAttribute('type', 'text'); |
| 54 inp1.setAttribute('id', 'shInp1'); |
| 55 //inp1.setAttribute('nav-index', '3'); |
| 56 inp1.setAttribute('tabindex', '3'); |
| 57 inp1.setAttribute('value', 'Input 1'); |
| 58 inp1.addEventListener('focus', A_07_02_03_T01.step_func(function(event)
{ |
| 59 assert_equals(counter++, 4, 'Point 2: wrong focus navigation ord
er'); |
| 60 invoked[2] = true; |
| 61 }), false); |
| 62 invoked[2] = false; |
| 63 s.appendChild(inp1); |
| 64 |
| 65 var inp2 = d.createElement('input'); |
| 66 inp2.setAttribute('type', 'text'); |
| 67 inp2.setAttribute('id', 'shInp2'); |
| 68 //inp2.setAttribute('nav-index', '2'); |
| 69 inp2.setAttribute('tabindex', '2'); |
| 70 inp2.setAttribute('value', 'Input 2'); |
| 71 inp2.addEventListener('focus', A_07_02_03_T01.step_func(function(event)
{ |
| 72 assert_equals(counter++, 3, 'Point 3: wrong focus navigation ord
er'); |
| 73 invoked[3] = true; |
| 74 }), false); |
| 75 invoked[3] = false; |
| 76 s.appendChild(inp2); |
| 77 |
| 78 var chb2 = d.createElement('input'); |
| 79 chb2.setAttribute('type', 'checkbox'); |
| 80 chb2.setAttribute('id', 'chb2'); |
| 81 //chb2.setAttribute('nav-index', '1'); |
| 82 chb2.setAttribute('tabindex', '1'); |
| 83 chb2.addEventListener('focus', A_07_02_03_T01.step_func(function(event)
{ |
| 84 assert_equals(counter++, 0, 'Point 4: wrong focus navigation ord
er'); |
| 85 invoked[4] = true; |
| 86 }), false); |
| 87 invoked[4] = false; |
| 88 d.body.appendChild(chb2); |
| 89 |
| 90 var chb3 = d.createElement('input'); |
| 91 chb3.setAttribute('type', 'checkbox'); |
| 92 chb3.setAttribute('id', 'chb3'); |
| 93 //chb3.setAttribute('nav-index', '5'); |
| 94 chb3.setAttribute('tabindex', '5'); |
| 95 chb3.addEventListener('focus', A_07_02_03_T01.step_func(function(event)
{ |
| 96 assert_equals(counter++, 2, 'Point 5: wrong focus navigation ord
er'); |
| 97 invoked[5] = true; |
| 98 }), false); |
| 99 invoked[5] = false; |
| 100 d.body.appendChild(chb3); |
| 101 |
| 102 chb2.focus(); |
| 103 |
| 104 //simulate TAB clicks. Expected order: chb2, chb1, chb3, inp2, inp1 |
| 105 fireKeyboardEvent(d, chb2, 'U+0009'); |
| 106 |
| 107 fireKeyboardEvent(d, chb1, 'U+0009'); |
| 108 |
| 109 fireKeyboardEvent(d, chb3, 'U+0009'); |
| 110 |
| 111 fireKeyboardEvent(d, inp2, 'U+0009'); |
| 112 |
| 113 fireKeyboardEvent(d, inp1, 'U+0009'); |
| 114 |
| 115 for (var i = 1; i < invoked.length; i++) { |
| 116 if (!invoked[i]) { |
| 117 assert_true(false, 'Piont ' + i + ' event listener was n
ot invoked'); |
| 118 } |
| 119 } |
| 120 |
| 121 A_07_02_03_T01.done(); |
| 122 })); |
| 123 |
| 124 // test nodes, distributed into insertion points |
| 125 var A_07_02_03_T02 = async_test('A_07_02_03_T02'); |
| 126 |
| 127 A_07_02_03_T02.step(unit(function (ctx) { |
| 128 |
| 129 var counter = 0; |
| 130 |
| 131 var invoked = []; |
| 132 |
| 133 var d = newRenderedHTMLDocument(ctx); |
| 134 |
| 135 var host = d.createElement('div'); |
| 136 d.body.appendChild(host); |
| 137 |
| 138 var chb1 = d.createElement('input'); |
| 139 chb1.setAttribute('type', 'checkbox'); |
| 140 chb1.setAttribute('id', 'chb1'); |
| 141 chb1.setAttribute('tabindex', '1'); |
| 142 chb1.addEventListener('focus', A_07_02_03_T02.step_func(function(event)
{ |
| 143 assert_equals(counter++, 0, 'Point 1: wrong focus navigation ord
er'); |
| 144 invoked[1] = true; |
| 145 }), false); |
| 146 invoked[1] = false; |
| 147 d.body.appendChild(chb1); |
| 148 |
| 149 var chb2 = d.createElement('input'); |
| 150 chb2.setAttribute('type', 'checkbox'); |
| 151 chb2.setAttribute('id', 'chb2'); |
| 152 chb2.setAttribute('class', 'shadow'); |
| 153 chb2.setAttribute('tabindex', '3'); |
| 154 chb2.addEventListener('focus', A_07_02_03_T02.step_func(function(event)
{ |
| 155 assert_equals(counter++, 2, 'Point 2: wrong focus navigation ord
er'); |
| 156 invoked[2] = true; |
| 157 }), false); |
| 158 invoked[2] = false; |
| 159 host.appendChild(chb2); |
| 160 |
| 161 var chb3 = d.createElement('input'); |
| 162 chb3.setAttribute('type', 'checkbox'); |
| 163 chb3.setAttribute('id', 'chb3'); |
| 164 chb3.setAttribute('class', 'shadow'); |
| 165 chb3.setAttribute('tabindex', '2'); |
| 166 chb3.addEventListener('focus', A_07_02_03_T02.step_func(function(event)
{ |
| 167 assert_equals(counter++, 1, 'Point 3: wrong focus navigation ord
er'); |
| 168 invoked[3] = true; |
| 169 }), false); |
| 170 invoked[3] = false; |
| 171 host.appendChild(chb3); |
| 172 |
| 173 var s = host.createShadowRoot(); |
| 174 |
| 175 var div = d.createElement('div'); |
| 176 div.innerHTML = '<content select=".shadow"></content>'; |
| 177 s.appendChild(div); |
| 178 |
| 179 var inp1 = d.createElement('input'); |
| 180 inp1.setAttribute('type', 'text'); |
| 181 inp1.setAttribute('id', 'shInp1'); |
| 182 inp1.setAttribute('value', 'Input 1'); |
| 183 inp1.setAttribute('tabindex', '4'); |
| 184 inp1.addEventListener('focus', A_07_02_03_T02.step_func(function(event)
{ |
| 185 assert_equals(counter++, 4, 'Point 4: wrong focus navigation ord
er'); |
| 186 invoked[4] = true; |
| 187 }), false); |
| 188 invoked[4] = false; |
| 189 s.appendChild(inp1); |
| 190 |
| 191 var inp2 = d.createElement('input'); |
| 192 inp2.setAttribute('type', 'text'); |
| 193 inp2.setAttribute('id', 'shInp2'); |
| 194 inp2.setAttribute('value', 'Input 2'); |
| 195 inp2.setAttribute('tabindex', '5'); |
| 196 inp2.addEventListener('focus', A_07_02_03_T02.step_func(function(event)
{ |
| 197 assert_equals(counter++, 5, 'Point 5: wrong focus navigation ord
er'); |
| 198 invoked[5] = true; |
| 199 }), false); |
| 200 invoked[5] = false; |
| 201 s.appendChild(inp2); |
| 202 |
| 203 var chb4 = d.createElement('input'); |
| 204 chb4.setAttribute('type', 'checkbox'); |
| 205 chb4.setAttribute('id', 'chb4'); |
| 206 chb4.setAttribute('tabindex', '6'); |
| 207 chb4.addEventListener('focus', A_07_02_03_T02.step_func(function(event)
{ |
| 208 assert_equals(counter++, 3, 'Point 6: wrong focus navigation ord
er'); |
| 209 invoked[6] = true; |
| 210 }), false); |
| 211 invoked[6] = false; |
| 212 d.body.appendChild(chb4); |
| 213 |
| 214 chb1.focus(); |
| 215 |
| 216 //simulate TAB clicks |
| 217 //Expected order: chb1, chb3, chb2, chb4, inp1, inp2 |
| 218 fireKeyboardEvent(d, chb1, 'U+0009'); |
| 219 fireKeyboardEvent(d, chb3, 'U+0009'); |
| 220 fireKeyboardEvent(d, chb2, 'U+0009'); |
| 221 fireKeyboardEvent(d, chb4, 'U+0009'); |
| 222 fireKeyboardEvent(d, inp1, 'U+0009'); |
| 223 fireKeyboardEvent(d, inp2, 'U+0009'); |
| 224 |
| 225 |
| 226 |
| 227 for (var i = 1; i < invoked.length; i++) { |
| 228 if (!invoked[i]) { |
| 229 assert_true(false, 'Piont ' + i + ' event listener was n
ot invoked'); |
| 230 } |
| 231 } |
| 232 |
| 233 A_07_02_03_T02.done(); |
| 234 })); |
| 235 </script> |
| 236 </body> |
| 237 </html> |
OLD | NEW |