test-001.html (9593B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM Test: A_05_03_01</title> 5 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> 6 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#retargeting-focus-events"> 7 <meta name="assert" content="Retargeting focus events:The focus, DOMFocusIn, blur, and DOMFocusOut events must be treated in the same way as events with a relatedTarget, where the corresponding node that is losing focus as a result of target gaining focus or the node that is gaining focus, and thus causing the blurring of target acts as the related target"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="../../../../html/resources/common.js"></script> 11 <script src="../../../resources/shadow-dom-utils.js"></script> 12 </head> 13 <body> 14 <div id="log"></div> 15 <script> 16 //blur and focus events are not bubbling. So this test tests only DOMFocusIn and DOMFocusOut 17 //which do bubble 18 19 //test DOMFocusOut event 20 var A_05_03_01_T01 = async_test('A_05_03_01_T01'); 21 22 A_05_03_01_T01.step(unit(function (ctx) { 23 24 var d = newRenderedHTMLDocument(ctx); 25 26 var host = d.createElement('div'); 27 host.setAttribute('style', 'height:50%; width:100%'); 28 host.setAttribute('id', 'host'); 29 d.body.appendChild(host); 30 31 //Shadow root to play with 32 var s = host.attachShadow({mode: 'open'}); 33 34 var inp1 = d.createElement('input'); 35 inp1.setAttribute('id', 'inp1'); 36 inp1.setAttribute('type', 'checkbox'); 37 s.appendChild(inp1); 38 39 var inp2 = d.createElement('input'); 40 inp2.setAttribute('id', 'inp2'); 41 inp2.setAttribute('type', 'checkbox'); 42 d.body.appendChild(inp2); 43 44 s.addEventListener('DOMFocusOut', A_05_03_01_T01.step_func(function(event) { 45 assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadow tree: Wrong target'); 46 }), false); 47 48 d.body.addEventListener('DOMFocusOut', A_05_03_01_T01.step_func(function(event) { 49 assert_equals(event.target.getAttribute('id'), 'host', 'Inside shadow tree: Wrong target'); 50 }), false); 51 52 inp1.focus(); 53 inp2.focus(); 54 55 A_05_03_01_T01.done(); 56 })); 57 58 59 //test DOMFocusIn event 60 var A_05_03_01_T02 = async_test('A_05_03_01_T02'); 61 62 A_05_03_01_T02.step(unit(function (ctx) { 63 64 var d = newRenderedHTMLDocument(ctx); 65 66 var host = d.createElement('div'); 67 host.setAttribute('style', 'height:50%; width:100%'); 68 host.setAttribute('id', 'host'); 69 d.body.appendChild(host); 70 71 //Shadow root to play with 72 var s = host.attachShadow({mode: 'open'}); 73 74 var inp1 = d.createElement('input'); 75 inp1.setAttribute('id', 'inp1'); 76 inp1.setAttribute('type', 'checkbox'); 77 s.appendChild(inp1); 78 79 var inp2 = d.createElement('input'); 80 inp2.setAttribute('id', 'inp2'); 81 inp2.setAttribute('type', 'checkbox'); 82 d.body.appendChild(inp2); 83 84 inp2.focus(); 85 86 s.addEventListener('DOMFocusIn', A_05_03_01_T02.step_func(function(event) { 87 assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadoe tree: Wrong target'); 88 }), false); 89 90 d.body.addEventListener('DOMFocusIn', A_05_03_01_T02.step_func(function(event) { 91 assert_equals(event.target.getAttribute('id'), 'host', 'Outside shadow tree: Wrong target'); 92 }), false); 93 94 inp1.focus(); 95 96 A_05_03_01_T02.done(); 97 })); 98 99 100 //gaining and loosing focus elements are in the same tree. 101 //DOMFocusIn event should be stopped at shadow boundary 102 var A_05_03_01_T03 = async_test('A_05_03_01_T03'); 103 104 105 A_05_03_01_T03.step(unit(function (ctx) { 106 107 var d = newRenderedHTMLDocument(ctx); 108 109 var host = d.createElement('div'); 110 host.setAttribute('style', 'height:50%; width:100%'); 111 host.setAttribute('id', 'host'); 112 d.body.appendChild(host); 113 114 //Shadow root to play with 115 var s = host.attachShadow({mode: 'open'}); 116 117 var inp1 = d.createElement('input'); 118 inp1.setAttribute('id', 'inp1'); 119 inp1.setAttribute('type', 'checkbox'); 120 s.appendChild(inp1); 121 122 var inp2 = d.createElement('input'); 123 inp2.setAttribute('id', 'inp2'); 124 inp2.setAttribute('type', 'checkbox'); 125 s.appendChild(inp2); 126 127 inp1.focus(); 128 129 d.body.addEventListener('DOMFocusIn', A_05_03_01_T03.step_func(function(event) { 130 assert_true(false, 'Event should be stopped at Shadow boundary'); 131 }), false); 132 133 inp2.focus(); 134 135 A_05_03_01_T03.done(); 136 })); 137 138 139 140 141 //gaining and loosing focus elements are in the same tree. 142 //DOMFocusOut event should be stopped at shadow boundary 143 var A_05_03_01_T04 = async_test('A_05_03_01_T04'); 144 145 A_05_03_01_T04.step(unit(function (ctx) { 146 147 var d = newRenderedHTMLDocument(ctx); 148 149 var host = d.createElement('div'); 150 host.setAttribute('style', 'height:50%; width:100%'); 151 host.setAttribute('id', 'host'); 152 d.body.appendChild(host); 153 154 //Shadow root to play with 155 var s = host.attachShadow({mode: 'open'}); 156 157 var inp1 = d.createElement('input'); 158 inp1.setAttribute('id', 'inp1'); 159 inp1.setAttribute('type', 'checkbox'); 160 s.appendChild(inp1); 161 162 var inp2 = d.createElement('input'); 163 inp2.setAttribute('id', 'inp2'); 164 inp2.setAttribute('type', 'checkbox'); 165 s.appendChild(inp2); 166 167 inp1.focus(); 168 169 d.body.addEventListener('DOMFocusOut', A_05_03_01_T04.step_func(function(event) { 170 assert_true(false, 'Event should be stopped at Shadow boundary'); 171 }), false); 172 173 inp2.focus(); 174 175 A_05_03_01_T04.done(); 176 })); 177 178 179 180 181 //Retargeting shouldn't occur for DOM tree nodes distributed 182 //among insertion point. Check DOMFocusOut 183 var A_05_03_01_T05 = async_test('A_05_03_01_T05'); 184 185 A_05_03_01_T05.step(unit(function (ctx) { 186 187 var d = newRenderedHTMLDocument(ctx); 188 189 var host = d.createElement('div'); 190 host.setAttribute('id', 'host'); 191 d.body.appendChild(host); 192 193 var inp1 = d.createElement('input'); 194 inp1.setAttribute('id', 'inp1'); 195 inp1.setAttribute('type', 'checkbox'); 196 inp1.setAttribute('slot', 'slot1'); 197 host.appendChild(inp1); 198 199 var inp2 = d.createElement('input'); 200 inp2.setAttribute('id', 'inp2'); 201 inp2.setAttribute('type', 'checkbox'); 202 inp2.setAttribute('slot', 'slot2'); 203 host.appendChild(inp2); 204 205 var inp3 = d.createElement('input'); 206 inp3.setAttribute('id', 'inp3'); 207 inp3.setAttribute('type', 'checkbox'); 208 inp3.setAttribute('slot', 'slot1'); 209 host.appendChild(inp3); 210 211 212 //Shadow root to play with 213 var s = host.attachShadow({mode: 'open'}); 214 215 var shadowDiv = document.createElement('div'); 216 shadowDiv.innerHTML = '<slot name="slot1"></slot>'; 217 s.appendChild(shadowDiv); 218 219 //element outside the shadow tree 220 var inp4 = d.createElement('input'); 221 inp4.setAttribute('id', 'inp4'); 222 inp4.setAttribute('type', 'checkbox'); 223 inp4.setAttribute('slot', 'slot1'); 224 d.body.appendChild(inp4); 225 226 inp1.focus(); 227 228 s.addEventListener('DOMFocusOut', A_05_03_01_T05.step_func(function(event) { 229 assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadow tree: ' + 230 'Event for nodes, distributed ' + 231 'agains insertion points shouldn\'t be retargeted'); 232 }), false); 233 234 235 d.body.addEventListener('DOMFocusOut', A_05_03_01_T05.step_func(function(event) { 236 assert_equals(event.target.getAttribute('id'), 'inp1', 'Outside shadow tree: ' + 237 'Event for nodes, distributed ' + 238 'agains insertion points shouldn\'t be retargeted'); 239 }), false); 240 241 inp4.focus(); 242 243 A_05_03_01_T05.done(); 244 })); 245 246 247 //Retargeting shouldn't occur for DOM tree nodes distributed 248 //among insertion points. Check DOMFocusIn 249 var A_05_03_01_T06 = async_test('A_05_03_01_T06'); 250 251 A_05_03_01_T06.step(unit(function (ctx) { 252 253 var d = newRenderedHTMLDocument(ctx); 254 255 var host = d.createElement('div'); 256 host.setAttribute('id', 'host'); 257 d.body.appendChild(host); 258 259 var inp1 = d.createElement('input'); 260 inp1.setAttribute('id', 'inp1'); 261 inp1.setAttribute('type', 'checkbox'); 262 inp1.setAttribute('slot', 'slot1'); 263 host.appendChild(inp1); 264 265 var inp2 = d.createElement('input'); 266 inp2.setAttribute('id', 'inp2'); 267 inp2.setAttribute('type', 'checkbox'); 268 inp2.setAttribute('slot', 'slot2'); 269 host.appendChild(inp2); 270 271 var inp3 = d.createElement('input'); 272 inp3.setAttribute('id', 'inp3'); 273 inp3.setAttribute('type', 'checkbox'); 274 inp3.setAttribute('slot', 'slot1'); 275 host.appendChild(inp3); 276 277 278 //Shadow root to play with 279 var s = host.attachShadow({mode: 'open'}); 280 281 var shadowDiv = document.createElement('div'); 282 shadowDiv.innerHTML = '<slot name="slot1"></slot>'; 283 s.appendChild(shadowDiv); 284 285 //element outside the shadow tree 286 var inp4 = d.createElement('input'); 287 inp4.setAttribute('id', 'inp4'); 288 inp4.setAttribute('type', 'checkbox'); 289 inp4.setAttribute('slot', 'slot1'); 290 d.body.appendChild(inp4); 291 292 inp4.focus(); 293 294 s.addEventListener('DOMFocusIn', A_05_03_01_T06.step_func(function(event) { 295 assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadow tree: ' + 296 'Event for nodes, distributed ' + 297 'agains insertion points shouldn\'t be retargeted'); 298 }), false); 299 300 301 d.body.addEventListener('DOMFocusIn', A_05_03_01_T05.step_func(function(event) { 302 assert_equals(event.target.getAttribute('id'), 'inp1', 'Outside shadow tree: ' + 303 'Event for nodes, distributed ' + 304 'agains insertion points shouldn\'t be retargeted'); 305 }), false); 306 307 inp1.focus(); 308 309 A_05_03_01_T06.done(); 310 })); 311 </script> 312 </body> 313 </html>