281 lines
9.9 KiB
HTML
281 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>Shadow DOM: Event path and Event.composedPath()</title>
|
|
<meta name="author" title="Hayato Ito" href="mailto:hayato@google.com">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/shadow-dom.js"></script>
|
|
|
|
<div id="test1">
|
|
<div id="d1">
|
|
<div id="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test1);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'd1', 'test1'];
|
|
assert_event_path_equals(log,
|
|
[['target', 'target', null, path],
|
|
['d1', 'target', null, path],
|
|
['test1', 'target', null, path]]);
|
|
}, 'Event Path without ShadowRoots.');
|
|
</script>
|
|
|
|
<div id="test2">
|
|
<div id="host">
|
|
<template id="sr" data-mode="open">
|
|
<div id="target"></div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test2);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'sr', 'host', 'test2'];
|
|
assert_event_path_equals(log,
|
|
[['target', 'target', null, path],
|
|
['sr', 'target', null, path],
|
|
['host', 'host', null, path],
|
|
['test2', 'host', null, path]]);
|
|
}, 'Event Path with an open ShadowRoot.');
|
|
</script>
|
|
|
|
<div id="test3">
|
|
<div id="host">
|
|
<template id="sr" data-mode="closed">
|
|
<div id="target"></div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test3);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target','sr', 'host', 'test3'];
|
|
let path1 = ['host', 'test3'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path],
|
|
['sr', 'target', null, path],
|
|
['host', 'host', null, path1],
|
|
['test3', 'host', null, path1]]);
|
|
}, 'Event Path with a closed ShadowRoot.');
|
|
</script>
|
|
|
|
<div id="test4">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="open">
|
|
<div id="host2">
|
|
<template id="sr2" data-mode="open">
|
|
<div id="target"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test4);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test4'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path],
|
|
['sr2', 'target', null, path],
|
|
['host2', 'host2', null, path],
|
|
['sr1', 'host2', null, path],
|
|
['host1', 'host1', null, path],
|
|
['test4', 'host1', null, path]]);
|
|
}, 'Event Path with nested ShadowRoots: open > open.');
|
|
</script>
|
|
|
|
<div id="test5">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="open">
|
|
<div id="host2">
|
|
<template id="sr2" data-mode="closed">
|
|
<div id="target"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test5);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test5'];
|
|
let path1 = ['host2', 'sr1', 'host1', 'test5'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path],
|
|
['sr2', 'target', null, path],
|
|
['host2', 'host2', null, path1],
|
|
['sr1', 'host2', null, path1],
|
|
['host1', 'host1', null, path1],
|
|
['test5', 'host1', null, path1]]);
|
|
}, 'Event Path with nested ShadowRoots: open > closed.');
|
|
</script>
|
|
|
|
<div id="test6">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="closed">
|
|
<div id="host2">
|
|
<template id="sr2" data-mode="open">
|
|
<div id="target"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test6);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test6'];
|
|
let path1 = ['host1', 'test6'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path],
|
|
['sr2', 'target', null, path],
|
|
['host2', 'host2', null, path],
|
|
['sr1', 'host2', null, path],
|
|
['host1', 'host1', null, path1],
|
|
['test6', 'host1', null, path1]]);
|
|
}, 'Event Path with nested ShadowRoots: closed > open.');
|
|
</script>
|
|
|
|
<div id="test7">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="closed">
|
|
<div id="host2">
|
|
<template id="sr2" data-mode="closed">
|
|
<div id="target"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test7);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'sr2', 'host2', 'sr1', 'host1', 'test7'];
|
|
let path1 = ['host2', 'sr1', 'host1', 'test7'];
|
|
let path2 = ['host1', 'test7'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path],
|
|
['sr2', 'target', null, path],
|
|
['host2', 'host2', null, path1],
|
|
['sr1', 'host2', null, path1],
|
|
['host1', 'host1', null, path2],
|
|
['test7', 'host1', null, path2]]);
|
|
}, 'Event Path with nested ShadowRoots: closed > closed.');
|
|
</script>
|
|
|
|
<div id="test8">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="open">
|
|
<slot id="slot"></slot>
|
|
</template>
|
|
<div id="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test8);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target','slot', 'sr1', 'host1', 'test8'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path],
|
|
['slot', 'target', null, path],
|
|
['sr1', 'target', null, path],
|
|
['host1', 'target', null, path],
|
|
['test8', 'target', null, path]]);
|
|
}, 'Event Path with a slot in an open Shadow Root.');
|
|
</script>
|
|
|
|
<div id="test9">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="closed">
|
|
<slot id="slot"></slot>
|
|
</template>
|
|
<div id="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test9);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'slot', 'sr1', 'host1', 'test9'];
|
|
let path1 = ['target', 'host1', 'test9'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path1],
|
|
['slot', 'target', null, path],
|
|
['sr1', 'target', null, path],
|
|
['host1', 'target', null, path1],
|
|
['test9', 'target', null, path1]]);
|
|
}, 'Event Path with a slot in a closed Shadow Root.');
|
|
</script>
|
|
|
|
<div id="test10">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="open">
|
|
<div id="host2">
|
|
<template id="sr2" data-mode="open">
|
|
<slot id="slot2"></slot>
|
|
</template>
|
|
<slot id="slot1"></slot>
|
|
</div>
|
|
</template>
|
|
<div id="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test10);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target','slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test10'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path],
|
|
['slot1', 'target', null, path],
|
|
['slot2', 'target', null, path],
|
|
['sr2', 'target', null, path],
|
|
['host2', 'target', null, path],
|
|
['sr1', 'target', null, path],
|
|
['host1', 'target', null, path],
|
|
['test10', 'target', null, path]]);
|
|
}, 'Event Path with slots in nested ShadowRoots: open > open.');
|
|
</script>
|
|
|
|
<div id="test11">
|
|
<div id="host1">
|
|
<template id="sr1" data-mode="closed">
|
|
<div id="host2">
|
|
<template id="sr2" data-mode="closed">
|
|
<slot id="slot2"></slot>
|
|
</template>
|
|
<slot id="slot1"></slot>
|
|
</div>
|
|
</template>
|
|
<div id="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let n = createTestTree(test11);
|
|
let log = dispatchEventWithLog(n, n.target, new Event('my-event', { bubbles: true, composed: true }));
|
|
let path = ['target', 'slot1', 'slot2', 'sr2', 'host2', 'sr1', 'host1', 'test11'];
|
|
let path1 = ['target', 'slot1', 'host2', 'sr1', 'host1', 'test11'];
|
|
let path2 = ['target', 'host1', 'test11'];
|
|
assert_event_path_equals(log, [['target', 'target', null, path2],
|
|
['slot1', 'target', null, path1],
|
|
['slot2', 'target', null, path],
|
|
['sr2', 'target', null, path],
|
|
['host2', 'target', null, path1],
|
|
['sr1', 'target', null, path1],
|
|
['host1', 'target', null, path2],
|
|
['test11', 'target', null, path2]]);
|
|
}, 'Event Path with slots in nested ShadowRoots: closed > closed.');
|
|
</script>
|