| 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>
|
|
|