<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM: Extensions to Event Interface</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="Event interface must have composedPath() as a method">
<link rel="help" href="http://w3c.github.io/webcomponents/spec/shadow/#extensions-to-event-interface">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/event-path-test-helpers.js"></script>
</head>
<body>
<div id="log"></div>
<script>

window.label = 'window';
document.label = 'document';
document.documentElement.label = 'html';
document.body.label = 'body';

// FIXME: Add a test for trimming event path.

/*
-SR: ShadowRoot  -S: Slot  target: (~)  *: indicates start  digit: event path order
A ------------------------------- A-SR
+ B ------------ B-SR             + A1 ------ A1-SR (1)
  + C            + B1 --- B1-SR   + A2-S      + A1a (*; 0)
  + D --- D-SR     + B1a    + B1b --- B1b-SR
          + D1              + B1c-S   + B1b1
                                      + B1b2
*/

function testEventTargetAfterDispatching(mode) {
    test(() => {
        const nodes = createTestTree(mode);
        const log = dispatchEventWithLog(nodes, nodes.A1a, new Event('my-event', {composed: false, bubbles: true}));

        const expectedPath = ['A1a', 'A1-SR'];
        assert_array_equals(log.eventPath, expectedPath);
        assert_array_equals(log.eventPath.length, log.pathAtTargets.length);
        assert_array_equals(log.pathAtTargets[0], expectedPath);
        assert_array_equals(log.pathAtTargets[1], expectedPath);

        assert_equals(log.event.target, nodes.A1a);
        assert_equals(log.event.currentTarget, null);
    }, 'The event must propagate out of ' + mode + ' mode shadow boundaries when the composed flag is set');
}

testEventTargetAfterDispatching('open');
testEventTargetAfterDispatching('closed');

/*
-SR: ShadowRoot  -S: Slot  target: (~)  *: indicates start  digit: event path order
window (7)
 + document (6)
   + body (5)
     + A (4) --------------------------- A-SR (3)
       + B ------------ B-SR             + A1 (2) --- A1-SR (1)
         + C            + B1 --- B1-SR   + A2-S       + A1a (*; 0)
         + D --- D-SR     + B1a    + B1b --- B1b-SR
                 + D1              + B1c-S   + B1b1
                                             + B1b2
*/

function testComposedEventInDocument(mode) {
    test(() => {
        const nodes = createTestTree(mode);
        document.body.appendChild(nodes.A);

        const log = dispatchEventWithLog(nodes, nodes.A1a, new Event('my-event', {composed: true, bubbles: true}));
        let expectedPath = ['A1a', 'A1-SR', 'A1', 'A-SR', 'A', 'body', 'html', 'document', 'window'];

        assert_array_equals(log.eventPath, expectedPath);
        assert_array_equals(log.eventPath.length, log.pathAtTargets.length);
        assert_array_equals(log.pathAtTargets[0], expectedPath);
        assert_array_equals(log.pathAtTargets[1], expectedPath);
        if (mode != 'open')
            expectedPath = expectedPath.slice(expectedPath.indexOf('A1'));
        assert_array_equals(log.pathAtTargets[2], expectedPath);
        assert_array_equals(log.pathAtTargets[3], expectedPath);
        if (mode != 'open')
            expectedPath = expectedPath.slice(expectedPath.indexOf('A'));
        assert_array_equals(log.pathAtTargets[4], expectedPath);
        assert_array_equals(log.pathAtTargets[5], expectedPath);
        assert_array_equals(log.pathAtTargets[6], expectedPath);
        assert_array_equals(log.pathAtTargets[7], expectedPath);

        assert_equals(log.event.target, nodes.A);
        assert_equals(log.event.currentTarget, null);
    }, 'The event must propagate out of ' + mode + ' mode shadow boundaries when the composed flag is set');
}

testComposedEventInDocument('open');
testComposedEventInDocument('closed');

/*
-SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
window
 + document
   + body
     + A ------------------------------- A-SR (3)
       + B ------------ B-SR             + A1 (2) -------- A1-SR (1)
         + C            + B1 --- B1-SR   + A2-S [*; 0-3]   + A1a (*; 0)
         + D --- D-SR     + B1a    + B1b --- B1b-SR
                 + D1              + B1c-S   + B1b1
                                             + B1b2
*/

function testComposedEventWithRelatedTargetInDocument(mode) {
    test(() => {
        const nodes = createTestTree(mode);
        document.body.appendChild(nodes.A);

        const log = dispatchEventWithLog(nodes, nodes.A1a, new MouseEvent('foo', {composed: true, bubbles: true, relatedTarget: nodes['A2-S']}));
        let expectedPath = ['A1a', 'A1-SR', 'A1', 'A-SR'];

        assert_array_equals(log.eventPath, expectedPath);
        assert_array_equals(log.eventPath.length, log.pathAtTargets.length);
        assert_array_equals(log.pathAtTargets[0], expectedPath);
        assert_array_equals(log.pathAtTargets[1], expectedPath);
        if (mode != 'open')
            expectedPath = expectedPath.slice(expectedPath.indexOf('A1'));
        assert_array_equals(log.pathAtTargets[2], expectedPath);
        assert_array_equals(log.pathAtTargets[3], expectedPath);
        assert_array_equals(log.relatedTargets, ['A2-S', 'A2-S', 'A2-S', 'A2-S']);
    }, 'The event must not propagate out of ' + mode + ' mode shadow tree in which the relative target and the relative related target are the same');
}

testComposedEventWithRelatedTargetInDocument('open');
testComposedEventWithRelatedTargetInDocument('closed');

</script>
</body>
</html>