capturing-and-bubbling-event-listeners-across-shadow-trees.html

<!DOCTYPE html>

<html>

<head>

<title>Shadow DOM: Capturing event listeners should be invoked before bubbling event listeners</title>

<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="./resources/shadow-dom.js"></script>

<script>

function attachEventListeners(eventType, tree) {

    const eventLogs = [];

    const makeComposedPathResult = (event) => event.composedPath().map((node) => node.id)

    for (const id in tree) {

        const node = tree[id];

        node.addEventListener(eventType, event => eventLogs.push(

            ['bubbling', event.eventPhase, event.target.id, event.currentTarget.id, makeComposedPathResult(event)]), {capture: false});

        node.addEventListener(eventType, event => eventLogs.push(

            ['capturing', event.eventPhase, event.target.id, event.currentTarget.id, makeComposedPathResult(event)]), {capture: true});

    return eventLogs;

</script>

</head>

<body>

<div id="test1">

    <div id="parent">

        <div id="target"></div>

    </div>

</div>

<script>

test(() => {

    const tree = createTestTree(document.getElementById('test1'));

    const logs = attachEventListeners('my-event', tree);

    tree.target.dispatchEvent(new Event('my-event', { bubbles: true, composed: true }));

    const composedPath = ['target', 'parent', 'test1'];

    assert_object_equals(logs, [

        ['capturing', Event.CAPTURING_PHASE, 'target', 'test1', composedPath],

        ['capturing', Event.CAPTURING_PHASE, 'target', 'parent', composedPath],

        ['capturing', Event.AT_TARGET, 'target', 'target', composedPath],

        ['bubbling', Event.AT_TARGET, 'target', 'target', composedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'parent', composedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'test1', composedPath],

]);

}, 'Capturing event listeners should be invoked before bubbling event listeners on the target without shadow trees');

</script>

<div id="test2">

    <div id="host">

        <template id="shadowRoot" data-mode="closed">

            <div id="target"></div>

        </template>

    </div>

</div>

<script>

test(() => {

    const tree = createTestTree(document.getElementById('test2'));

    const logs = attachEventListeners('my-event', tree);

    tree.target.dispatchEvent(new Event('my-event', { bubbles: true, composed: true }));

    const innerComposedPath = ['target', 'shadowRoot', 'host', 'test2'];

    const outerComposedPath = ['host', 'test2'];

    assert_object_equals(logs, [

        ['capturing', Event.CAPTURING_PHASE, 'host', 'test2', outerComposedPath],

        ['capturing', Event.AT_TARGET, 'host', 'host', outerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'target', 'shadowRoot', innerComposedPath],

        ['capturing', Event.AT_TARGET, 'target', 'target', innerComposedPath],

        ['bubbling', Event.AT_TARGET, 'target', 'target', innerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'shadowRoot', innerComposedPath],

        ['bubbling', Event.AT_TARGET, 'host', 'host', outerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'host', 'test2', outerComposedPath],

]);

}, 'Capturing event listeners should be invoked before bubbling event listeners when an event is dispatched inside a shadow tree');

</script>

<div id="test3">

    <div id="outerHost">

        <template id="outerShadowRoot" data-mode="closed">

            <div id="innerHost">

                <template id="innerShadowRoot" data-mode="closed">

                    <div id="target"></div>

                </template>

            </div>

        </template>

    </div>

</div>

<script>

test(() => {

    const tree = createTestTree(document.getElementById('test3'));

    const logs = attachEventListeners('my-event', tree);

    tree.target.dispatchEvent(new Event('my-event', { bubbles: true, composed: true }));

    const innerShadowComposedPath = ['target', 'innerShadowRoot', 'innerHost', 'outerShadowRoot', 'outerHost', 'test3'];

    const outerShadowComposedPath = ['innerHost', 'outerShadowRoot', 'outerHost', 'test3'];

    const outerComposedPath = ['outerHost', 'test3'];

    assert_object_equals(logs, [

        ['capturing', Event.CAPTURING_PHASE, 'outerHost', 'test3', outerComposedPath],

        ['capturing', Event.AT_TARGET, 'outerHost', 'outerHost', outerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'innerHost', 'outerShadowRoot', outerShadowComposedPath],

        ['capturing', Event.AT_TARGET, 'innerHost', 'innerHost', outerShadowComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'target', 'innerShadowRoot', innerShadowComposedPath],

        ['capturing', Event.AT_TARGET, 'target', 'target', innerShadowComposedPath],

        ['bubbling', Event.AT_TARGET, 'target', 'target', innerShadowComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'innerShadowRoot', innerShadowComposedPath],

        ['bubbling', Event.AT_TARGET, 'innerHost', 'innerHost', outerShadowComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'innerHost', 'outerShadowRoot', outerShadowComposedPath],

        ['bubbling', Event.AT_TARGET, 'outerHost', 'outerHost', outerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'outerHost', 'test3', outerComposedPath],

]);

}, 'Capturing event listeners should be invoked before bubbling event listeners when an event is dispatched inside a doubly nested shadow tree');

</script>

<div id="test4">

    <div id="host">

        <template id="shadowRoot" data-mode="closed">

            <slot id="slot"></slot>

        </template>

        <div id="target"></div>

    </div>

</div>

<script>

test(() => {

    const tree = createTestTree(document.getElementById('test4'));

    const logs = attachEventListeners('my-event', tree);

    tree.target.dispatchEvent(new Event('my-event', { bubbles: true, composed: true }));

    const innerComposedPath = ['target', 'slot', 'shadowRoot', 'host', 'test4'];

    const outerComposedPath = ['target', 'host', 'test4'];

    assert_object_equals(logs, [

        ['capturing', Event.CAPTURING_PHASE, 'target', 'test4', outerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'target', 'host', outerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'target', 'shadowRoot', innerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'target', 'slot', innerComposedPath],

        ['capturing', Event.AT_TARGET, 'target', 'target', outerComposedPath],

        ['bubbling', Event.AT_TARGET, 'target', 'target', outerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'slot', innerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'shadowRoot', innerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'host', outerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'test4', outerComposedPath],

]);

}, 'Capturing event listeners should be invoked before bubbling event listeners when an event is dispatched via a slot');

</script>

<div id="test5">

    <div id="upperHost">

        <template id="upperShadowRoot" data-mode="closed">

            <slot id="upperSlot"></slot>

        </template>

        <div id="lowerHost">

            <template id="lowerShadowRoot" data-mode="closed">

                <div id="target"></div>

            </template>

        </div>

    </div>

</div>

<script>

test(() => {

    const tree = createTestTree(document.getElementById('test5'));

    const logs = attachEventListeners('my-event', tree);

    tree.target.dispatchEvent(new Event('my-event', { bubbles: true, composed: true }));

    const lowerComposedPath = ['target', 'lowerShadowRoot', 'lowerHost', 'upperHost', 'test5'];

    const upperComposedPath = ['lowerHost', 'upperSlot', 'upperShadowRoot', 'upperHost', 'test5'];

    const outerComposedPath = ['lowerHost', 'upperHost', 'test5'];

    assert_object_equals(logs, [

        ['capturing', Event.CAPTURING_PHASE, 'lowerHost', 'test5', outerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'lowerHost', 'upperHost', outerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'lowerHost', 'upperShadowRoot', upperComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'lowerHost', 'upperSlot', upperComposedPath],

        ['capturing', Event.AT_TARGET, 'lowerHost', 'lowerHost', outerComposedPath],

        ['capturing', Event.CAPTURING_PHASE, 'target', 'lowerShadowRoot', lowerComposedPath],

        ['capturing', Event.AT_TARGET, 'target', 'target', lowerComposedPath],

        ['bubbling', Event.AT_TARGET, 'target', 'target', lowerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'target', 'lowerShadowRoot', lowerComposedPath],

        ['bubbling', Event.AT_TARGET, 'lowerHost', 'lowerHost', outerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'lowerHost', 'upperSlot', upperComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'lowerHost', 'upperShadowRoot', upperComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'lowerHost', 'upperHost', outerComposedPath],

        ['bubbling', Event.BUBBLING_PHASE, 'lowerHost', 'test5', outerComposedPath],

]);

}, 'Capturing event listeners should be invoked before bubbling event listeners when an event is dispatched inside a shadow tree which passes through another shadow tree');

</script>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: