Index: LayoutTests/fast/dom/shadow/event-path-algorithm.html |
diff --git a/LayoutTests/fast/dom/shadow/event-path-algorithm.html b/LayoutTests/fast/dom/shadow/event-path-algorithm.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..59ae337f972ad0805fc0cb748f491f1525604495 |
--- /dev/null |
+++ b/LayoutTests/fast/dom/shadow/event-path-algorithm.html |
@@ -0,0 +1,109 @@ |
+<!DOCTYPE html> |
+<script src="../../../resources/testharness.js"></script> |
+<script src="../../../resources/testharnessreport.js"></script> |
+<script src="resources/shadow-dom.js"></script> |
+<div id="container"> |
+ <!-- The following DOM tree came from the picture in the spec: |
+ http://w3c.github.io/webcomponents/spec/shadow/#event-paths-example --> |
+ <div id="SPEC-EXAMPLE"> |
+ <template> |
+ <div id="A"> |
+ <div id="B"> |
+ <div id="C"> |
+ <div id="D"></div> |
+ </div> |
+ <template id="E"> |
+ <div id="F"> |
+ <div id="G"> |
+ <div id="H"> |
+ <content id="I"></content> |
+ <template id="J"> |
+ <div id="K"> |
+ <div id="L"> |
+ <content id="M"></content> |
+ </div> |
+ <template id="N"> |
+ <div id="O"> |
+ <content id="P"></content> |
+ <template id="Q"> |
+ <content id="R"></content> |
+ </template> |
+ </div> |
+ </template> |
+ </div> |
+ </template> |
+ </div> |
+ </div> |
+ <template id="S"> |
+ <div id="T"> |
+ <content id="U"></content> |
+ </div> |
+ </template> |
+ </div> |
+ </template> |
+ <template id="V"> |
+ <div id="W"> |
+ <shadow id="X"></shadow> |
+ </div> |
+ </template> |
+ </div> |
+ </div> |
+ </template> |
+ </div> |
+ |
+ <!-- re-distribution happens through shadow insertion points *and* content insertion points |
+ https://www.w3.org/Bugs/Public/show_bug.cgi?id=23887#c180 --> |
+ <div id="REDIST-SIP-CIP"> |
+ <template> |
+ <div id="shadow-host"> |
+ <template id="oldest"> |
+ <div id="a"></div> |
+ </template> |
+ <template id="youngest"> |
+ <div id="shadow-host-b"> |
+ <shadow id="shadow"></shadow> |
+ <template id="shadow-root-of-shadow-host-b"> |
+ <content id="content"></content> |
+ </template> |
+ </div> |
+ </template> |
+ </div> |
+ </template> |
+ </div> |
+</div> |
+<script> |
+convertTemplatesToShadowRootsWithin(container); |
+var tests = [ |
+ ["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"]], |
+ ["REDIST-SIP-CIP", "shadow-host/a", ["#a", "#content", "#shadow-root-of-shadow-host-b", "#shadow-host-b", "#youngest", "#shadow-host"]], |
+ //["REDIST-SIP-CIP", "shadow-host/a", ["#a", "#content", "#shadow-root-of-shadow-host-b", "#shadow", "#shadow-host-b", "#youngest", "#oldest", "#shadow-host"]], |
+]; |
+tests.forEach(function (args) { |
+ assertEventPath(args[0], args[1], args[2]); |
+}); |
+ |
+function assertEventPath(host, target, expected) { |
+ var test = async_test(host + ": target=" + target); |
+ |
+ target = host + "/" + target; |
+ var node = getNodeInTreeOfTrees(target); |
+ |
+ var listener = test.step_func(function (e) { |
+ var actual = event.path; |
+ var tail = ["[object ShadowRoot]", "#" + host, "#container", "[object HTMLBodyElement]", "[object HTMLHtmlElement]", "[object HTMLDocument]", "[object Window]"]; |
+ assert_equals(dumpNodeList(actual.slice(-tail.length)), dumpNodeList(tail), "Tail of event.path on node " + dumpNode(e.currentTarget)); |
+ assert_equals(dumpNodeList(actual.slice(0, actual.length - tail.length)), dumpNodeList(expected), "event.path on node " + dumpNode(e.currentTarget)); |
+ |
+ node.removeEventListener('click', listener); |
+ test.done(); |
+ }); |
+ |
+ test.step(function () { |
+ node.addEventListener('click', listener); |
+ |
+ var clickEvent = document.createEvent("MouseEvents"); |
+ clickEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); |
+ node.dispatchEvent(clickEvent); |
+ }); |
+} |
+</script> |