OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/testharness.js"></script> |
| 3 <script src="../../../resources/testharnessreport.js"></script> |
| 4 <script src="resources/shadow-dom.js"></script> |
| 5 <div id="container"> |
| 6 <!-- The following DOM tree came from the picture in the spec: |
| 7 http://w3c.github.io/webcomponents/spec/shadow/#event-paths-example --> |
| 8 <div id="SPEC-EXAMPLE"> |
| 9 <template> |
| 10 <div id="A"> |
| 11 <div id="B"> |
| 12 <div id="C"> |
| 13 <div id="D"></div> |
| 14 </div> |
| 15 <template id="E"> |
| 16 <div id="F"> |
| 17 <div id="G"> |
| 18 <div id="H"> |
| 19 <content id="I"></content> |
| 20 <template id="J"> |
| 21 <div id="K"> |
| 22 <div id="L"> |
| 23 <content id="M"></content> |
| 24 </div> |
| 25 <template id="N"> |
| 26 <div id="O"> |
| 27 <content id="P"></content> |
| 28 <template id="Q"> |
| 29 <content id="R"></conten
t> |
| 30 </template> |
| 31 </div> |
| 32 </template> |
| 33 </div> |
| 34 </template> |
| 35 </div> |
| 36 </div> |
| 37 <template id="S"> |
| 38 <div id="T"> |
| 39 <content id="U"></content> |
| 40 </div> |
| 41 </template> |
| 42 </div> |
| 43 </template> |
| 44 <template id="V"> |
| 45 <div id="W"> |
| 46 <shadow id="X"></shadow> |
| 47 </div> |
| 48 </template> |
| 49 </div> |
| 50 </div> |
| 51 </template> |
| 52 </div> |
| 53 |
| 54 <!-- re-distribution happens through shadow insertion points *and* content i
nsertion points |
| 55 https://www.w3.org/Bugs/Public/show_bug.cgi?id=23887#c180 --> |
| 56 <div id="REDIST-SIP-CIP"> |
| 57 <template> |
| 58 <div id="shadow-host"> |
| 59 <template id="oldest"> |
| 60 <div id="a"></div> |
| 61 </template> |
| 62 <template id="youngest"> |
| 63 <div id="shadow-host-b"> |
| 64 <shadow id="shadow"></shadow> |
| 65 <template id="shadow-root-of-shadow-host-b"> |
| 66 <content id="content"></content> |
| 67 </template> |
| 68 </div> |
| 69 </template> |
| 70 </div> |
| 71 </template> |
| 72 </div> |
| 73 </div> |
| 74 <script> |
| 75 convertTemplatesToShadowRootsWithin(container); |
| 76 var tests = [ |
| 77 ["SPEC-EXAMPLE", "D", ["#D", "#C", "#M", "#L", "#R", "#Q", "#P", "#O", "#N",
"#K", "#J", "#I", "#H", "#G", "#U", "#T", "#S", "#F", "#E", "#X", "#W", "#V", "
#B", "#A"]], |
| 78 ["REDIST-SIP-CIP", "shadow-host/a", ["#a", "#content", "#shadow-root-of-shad
ow-host-b", "#shadow-host-b", "#youngest", "#shadow-host"]], |
| 79 //["REDIST-SIP-CIP", "shadow-host/a", ["#a", "#content", "#shadow-root-of-sh
adow-host-b", "#shadow", "#shadow-host-b", "#youngest", "#oldest", "#shadow-host
"]], |
| 80 ]; |
| 81 tests.forEach(function (args) { |
| 82 assertEventPath(args[0], args[1], args[2]); |
| 83 }); |
| 84 |
| 85 function assertEventPath(host, target, expected) { |
| 86 var test = async_test(host + ": target=" + target); |
| 87 |
| 88 target = host + "/" + target; |
| 89 var node = getNodeInTreeOfTrees(target); |
| 90 |
| 91 var listener = test.step_func(function (e) { |
| 92 var actual = event.path; |
| 93 var tail = ["[object ShadowRoot]", "#" + host, "#container", "[object HT
MLBodyElement]", "[object HTMLHtmlElement]", "[object HTMLDocument]", "[object W
indow]"]; |
| 94 assert_equals(dumpNodeList(actual.slice(-tail.length)), dumpNodeList(tai
l), "Tail of event.path on node " + dumpNode(e.currentTarget)); |
| 95 assert_equals(dumpNodeList(actual.slice(0, actual.length - tail.length))
, dumpNodeList(expected), "event.path on node " + dumpNode(e.currentTarget)); |
| 96 |
| 97 node.removeEventListener('click', listener); |
| 98 test.done(); |
| 99 }); |
| 100 |
| 101 test.step(function () { |
| 102 node.addEventListener('click', listener); |
| 103 |
| 104 var clickEvent = document.createEvent("MouseEvents"); |
| 105 clickEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, f
alse, false, false, false, 0, null); |
| 106 node.dispatchEvent(clickEvent); |
| 107 }); |
| 108 } |
| 109 </script> |
OLD | NEW |