test-003.html (3067B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shadow DOM Test: A_05_05_03</title> 5 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> 6 <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#event-path-trimming"> 7 <meta name="assert" content="Event Path Trimming: In cases where both relatedTarget and target of a trusted event are part of the same shadow tree, the conforming UAs must stop events at the shadow root to avoid the appearance of spurious mouseover and mouseout events firing from the same node."> 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 var A_05_05_03_T01 = async_test('A_05_05_03_T01'); 17 18 A_05_05_03_T01.step(unit(function (ctx) { 19 20 var d = newRenderedHTMLDocument(ctx); 21 22 var host = d.createElement('div'); 23 host.setAttribute('id', 'host'); 24 d.body.appendChild(host); 25 26 //Shadow root to play with 27 var s = host.attachShadow({mode: 'open'}); 28 s.id = 'shadow'; 29 30 var input1 = d.createElement('input'); 31 input1.setAttribute('id', 'input1'); 32 s.appendChild(input1); 33 34 var input2 = d.createElement('input'); 35 input2.setAttribute('id', 'input2'); 36 s.appendChild(input2); 37 38 input1.addEventListener('focusin', A_05_05_03_T01.step_func(function(event) { 39 assert_equals(event.composed, true); 40 assert_equals(event.composedPath().length, 7); 41 assert_equals(event.composedPath()[0].id, 'input1'); 42 assert_equals(event.composedPath()[1].id, 'shadow'); 43 assert_equals(event.composedPath()[2].id, 'host'); 44 assert_equals(event.composedPath()[3].tagName, 'BODY'); 45 assert_equals(event.composedPath()[4].tagName, 'HTML'); 46 assert_equals(event.composedPath()[5], d); 47 assert_equals(event.composedPath()[6], ctx.iframes[0].contentWindow); 48 }), false); 49 50 input1.addEventListener('focusout', A_05_05_03_T01.step_func(function(event) { 51 assert_equals(event.composed, true); 52 }), false); 53 54 input2.addEventListener('focusin', A_05_05_03_T01.step_func(function(event) { 55 assert_equals(event.composedPath().length, 2); 56 assert_equals(event.composedPath()[0].id, 'input2'); 57 assert_equals(event.composedPath()[1].id, 'shadow'); 58 A_05_05_03_T01.done(); 59 }), false); 60 61 // Expected event path for #input1: 62 // <input>, #shadow-root, <div>, <body>, <html>, #document, window 63 input1.focus(); 64 65 // Causes a "focusin" event, from #input1 to #input2 66 // In this case, original relatedTarget is #input1, and original target 67 // is #input2. 68 // It should be viewed outside the shadow as "target == relatedTarget" 69 // after event retargeting, therefore, event.composedPath() above the shadow 70 // host will be trimmed. 71 // Expected event path for #input2: 72 // <input>, #shadow-root 73 input2.focus(); 74 })); 75 </script> 76 </body> 77 </html>