event-inside-shadow-tree.html

<!DOCTYPE html>

<html>

<head>

<title>Shadow DOM: Firing an event inside a shadow tree</title>

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

<meta name="assert" content="The event path calculation algorithm must be used to determine event path">

<link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#event-paths">

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

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

</head>

<body>

<div id="log"></div>

<script>

function dispatchEventWithLog(target, event) {

    var log = [];

    for (var node = target; node; node = node.parentNode || node.host) {

        node.addEventListener(event.type, (function (event) {

            log.push([this, event.target]);

        }).bind(node));

    target.dispatchEvent(event);

    return log;

function createShadowRootWithGrandChild(mode) {

    var host = document.createElement('div');

    var root = host.attachShadow({mode: mode});

    var parent = document.createElement('span');

    root.appendChild(parent);

    var target = document.createElement('b');

    parent.appendChild(target);

    return {target: target, parent: parent, root: root, host: host};

function testEventInDetachedShadowTree(mode) {

    test(function () {

        var shadow = createShadowRootWithGrandChild(mode);

        log = dispatchEventWithLog(shadow.target, new Event('foo', {composed: true, bubbles: true}));

        assert_equals(log.length, 4, 'EventPath must contain [target, parent, shadow root, shadow host]');

        assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target');

        assert_array_equals(log[1], [shadow.parent, shadow.target], 'EventPath[1] must be the parent of the target');

        assert_array_equals(log[2], [shadow.root, shadow.target], 'EventPath[2] must be the shadow root');

        assert_array_equals(log[3], [shadow.host, shadow.host], 'EventPath[3] must be the shadow host');

    }, 'Firing an event inside a grand child of a detached ' + mode + ' mode shadow tree');

testEventInDetachedShadowTree('open');

testEventInDetachedShadowTree('closed');

function testEventInShadowTreeInsideDocument(mode) {

    test(function () {

        var shadow = createShadowRootWithGrandChild(mode);

        document.body.appendChild(shadow.host);

        log = dispatchEventWithLog(shadow.target, new Event('foo', {composed: true, bubbles: true}));

        assert_equals(log.length, 7, 'EventPath must contain [target, parent, shadow root, shadow host, body, html, document]');

        assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target');

        assert_array_equals(log[1], [shadow.parent, shadow.target], 'EventPath[1] must be the parent of the target');

        assert_array_equals(log[2], [shadow.root, shadow.target], 'EventPath[2] must be the shadow root');

        assert_array_equals(log[3], [shadow.host, shadow.host], 'EventPath[3] must be the shadow host');

        assert_array_equals(log[4], [document.body, shadow.host], 'EventPath[4] must be the body element (parent of shadow host)');

        assert_array_equals(log[5], [document.documentElement, shadow.host], 'EventPath[5] must be the html element');

        assert_array_equals(log[6], [document, shadow.host], 'EventPath[6] must be the document node');

    }, 'Firing an event inside a grand child of an in-document ' + mode + ' mode shadow tree');

testEventInShadowTreeInsideDocument('open');

testEventInShadowTreeInsideDocument('closed');

function createNestedShadowRoot(innerMode, outerMode) {

    var outerHost = document.createElement('div');

    var outerRoot = outerHost.attachShadow({mode: outerMode});

    var outerChild = document.createElement('p');

    outerRoot.appendChild(outerChild);

    var innerHost = document.createElement('span');

    outerChild.appendChild(innerHost);

    var innerRoot = innerHost.attachShadow({mode: innerMode});

    var innerChild = document.createElement('span');

    innerRoot.appendChild(innerChild);

    return {target: innerChild, innerRoot: innerRoot, innerHost: innerHost, outerChild: outerChild, outerRoot: outerRoot, outerHost: outerHost};

function testEventInDetachedNestedShadowTree(innerMode, outerMode) {

    test(function () {

        var shadow = createNestedShadowRoot(innerMode, outerMode);

        log = dispatchEventWithLog(shadow.target, new Event('bar', {composed: true, bubbles: true}));

        assert_equals(log.length, 6, 'EventPath must contain [target, inner root, inner host, parent, outer root, outer host]');

        assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target');

        assert_array_equals(log[1], [shadow.innerRoot, shadow.target], 'EventPath[1] must be the inner shadow root');

        assert_array_equals(log[2], [shadow.innerHost, shadow.innerHost], 'EventPath[2] must be the inner shadow host');

        assert_array_equals(log[3], [shadow.outerChild, shadow.innerHost], 'EventPath[3] must be the parent of the inner shadow host');

        assert_array_equals(log[4], [shadow.outerRoot, shadow.innerHost], 'EventPath[4] must be the outer shadow root');

        assert_array_equals(log[5], [shadow.outerHost, shadow.outerHost], 'EventPath[5] must be the outer shadow host');

    }, 'Firing an event inside a detached ' + innerMode + ' mode shadow tree inside ' + outerMode + ' mode shadow tree');

testEventInDetachedNestedShadowTree('open',  'open');

testEventInDetachedNestedShadowTree('open',  'closed');

testEventInDetachedNestedShadowTree('closed', 'open');

testEventInDetachedNestedShadowTree('closed', 'closed');

function testEventInNestedShadowTreeInsideDocument(innerMode, outerMode) {

    test(function () {

        var shadow = createNestedShadowRoot(innerMode, outerMode);

        document.body.appendChild(shadow.outerHost);

        log = dispatchEventWithLog(shadow.target, new Event('bar', {composed: true, bubbles: true}));

        assert_equals(log.length, 9, 'EventPath must contain [target, inner root, inner host, parent, outer root, outer host]');

        assert_array_equals(log[0], [shadow.target, shadow.target], 'EventPath[0] must be the target');

        assert_array_equals(log[1], [shadow.innerRoot, shadow.target], 'EventPath[1] must be the inner shadow root');

        assert_array_equals(log[2], [shadow.innerHost, shadow.innerHost], 'EventPath[2] must be the inner shadow host');

        assert_array_equals(log[3], [shadow.outerChild, shadow.innerHost], 'EventPath[3] must be the parent of the inner shadow host');

        assert_array_equals(log[4], [shadow.outerRoot, shadow.innerHost], 'EventPath[4] must be the outer shadow root');

        assert_array_equals(log[5], [shadow.outerHost, shadow.outerHost], 'EventPath[5] must be the outer shadow host');

        assert_array_equals(log[6], [document.body, shadow.outerHost], 'EventPath[6] must be the body element');

        assert_array_equals(log[7], [document.documentElement, shadow.outerHost], 'EventPath[7] must be the html element');

        assert_array_equals(log[8], [document, shadow.outerHost], 'EventPath[8] must be the document node');

    }, 'Firing an event inside an in-document ' + innerMode + ' mode shadow tree inside ' + outerMode + ' mode shadow tree');

testEventInNestedShadowTreeInsideDocument('open',  'open');

testEventInNestedShadowTreeInsideDocument('open',  'closed');

testEventInNestedShadowTreeInsideDocument('closed', 'open');

testEventInNestedShadowTreeInsideDocument('closed', 'closed');

</script>

</body>

</html>