<!DOCTYPE html>
<html>
<head>
    <title>Shadow DOM: Firing an event with relatedTarget inside a shadow tree</title>
    <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
    <meta name="assert" content="The retargeting algorithm is used to determine relative targets">
    <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#retargeting-relatedtarget">
    <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>

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A ----------------------------------------------- A-SR
        + B ----------- B-SR (4)                          + A1 --- A1-SR
          + C           + B1 (3) [*; 0-4] --- B1-SR (2)   + A2-S   + A1a
          + D --- D-SR    + B1a (*; 0)        + B1b [1,2] --- B1b-SR
                  + D1                        + B1c-S (1)     + B1b1
                                                              + B1b2
        */
        function testEventAtB1aWithB1a(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1}));

                assert_array_equals(log.eventPath,
                    ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['B1',  'B1',    'B1',    'B1', 'B1'], 'The related targets must be correct.');

            }, 'Firing an event at B1a with relatedNode at B1 with ' + mode + ' mode shadow trees');
        }

        testEventAtB1aWithB1a('open');
        testEventAtB1aWithB1a('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A ------------------------------------------------- A-SR
        + B ----------- B-SR (4)                            + A1 --- A1-SR
          + C           + B1 (3) [0,3-4] --- B1-SR (2)      + A2-S   + A1a
          + D --- D-SR    + B1a (*; 0)       + B1b [1,2] --- B1b-SR
                  + D1                       + B1c-S (1)     + B1b1 [*]
                                                             + B1b2
        */
        function testEventAtB1aWithB1b1(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1b1}));

                assert_array_equals(log.eventPath,
                    ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['B1',  'B1b',   'B1b',   'B1', 'B1'], 'The related targets must be correct.');

            }, 'Firing an event at B1a with relatedNode at B1b1 with ' + mode + ' mode shadow trees');
        }

        testEventAtB1aWithB1b1('open');
        testEventAtB1aWithB1b1('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A -------------------------------------------------- A-SR
        + B ------------- B-SR (5)                           + A1 --- A1-SR
          + C             + B1 (4) ------- B1-SR (3)         + A2-S   + A1a
          + D --- D-SR    + B1a [*; 0-5]   + B1b (2) --- B1b-SR (1)
                  + D1                     + B1c-S       + B1b1 (*; 0)
                                                         + B1b2
        */
        function testEventAtB1b1WithB1a(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                log = dispatchEventWithEventLog(nodes, nodes.B1b1, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));

                assert_array_equals(log.eventPath,
                    ['B1b1', 'B1b-SR', 'B1b', 'B1-SR', 'B1', 'B-SR'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['B1a',  'B1a',    'B1a', 'B1a',   'B1a', 'B1a'], 'The related targets must be correct.');

            }, 'Firing an event at B1b1 with relatedNode at B1a with ' + mode + ' mode shadow trees');
        }

        testEventAtB1b1WithB1a('open');
        testEventAtB1b1WithB1a('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A (8) -------------------------------------------------- A-SR (7)
        + B (5) -------------- B-SR (4)                          + A1 -------- A1-SR
          + C                  + B1 (3) [*; 0-4] --- B1-SR (2)   + A2-S (6)    + A1a
          + D [0-8] --- D-SR     + B1a (*; 0)        + B1b ------ B1b-SR
                        + D1 [*]                     + B1c-S (1)  + B1b1
                                                                  + B1b2
        */
        function testEventAtB1aWithD1(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.D1}));

                assert_array_equals(log.eventPath,
                    ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['D', 'D', 'D', 'D', 'D', 'D', 'D', 'D', 'D'], 'The related targets must be correct.');

            }, 'Firing an event at B1a with relatedNode at D1 with ' + mode + ' mode shadow trees');
        }

        testEventAtB1aWithD1('open');
        testEventAtB1aWithD1('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A (6) ----------------------------------- A-SR (5)
        + B (3) [0] ----------- B-SR              + A1 ------ A1-SR
          + C                   + B1 ----- B1-SR  + A2-S (4)  + A1a
          + D (2) --- D-SR (1)  + B1a [*]  + B1b --- B1b-SR
                        + D1 (*; 0)         + B1c-S   + B1b1
                                                      + B1b2
        */
        function testEventAtD1WithB1a(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                log = dispatchEventWithEventLog(nodes, nodes.D1, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));

                assert_array_equals(log.eventPath,
                    ['D1', 'D-SR', 'D', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['B', 'B', 'B', 'B', 'B', 'B', 'B'], 'The related targets must be correct.');

            }, 'Firing an event at D1 with relatedNode at B1a with ' + mode + ' mode shadow trees');
        }

        testEventAtD1WithB1a('open');
        testEventAtD1WithB1a('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A (8) [0-5,8] ---------------------------------------- A-SR (7)
        + B (5)  ------- B-SR (4)                              + A1 [6,7] --- A1-SR
          + C            + B1 (3) ----- B1-SR (2)              + A2-S (6)     + A1a [*]
          + D --- D-SR   + B1a (*; 0)   + B1b ------- B1b-SR
                  + D1                  + B1c-S (1)   + B1b1
                                                      + B1b2
        */
        function testEventAtB1aWithA1a(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.A1a}));

                assert_array_equals(log.eventPath,
                    ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['A',   'A',     'A',     'A',   'A',   'A', 'A1',   'A1',   'A'], 'The related targets must be correct.');

            }, 'Firing an event at B1a with relatedNode at A1a with ' + mode + ' mode shadow trees');
        }

        testEventAtB1aWithA1a('open');
        testEventAtB1aWithA1a('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A (4) ----------------------------------------- A-SR (3)
        + B [0-4]  ----- 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 testEventAtA1aWithB1a(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));

                assert_array_equals(log.eventPath,
                    ['A1a', 'A1-SR', 'A1', 'A-SR', 'A'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['B', 'B', 'B', 'B', 'B'], 'The related targets must be correct.');

            }, 'Firing an event at A1a with relatedNode at B1a with ' + mode + ' mode shadow trees');
        }

        testEventAtA1aWithB1a('open');
        testEventAtA1aWithB1a('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A (8) ----------------------------------- A-SR (7)
        + B (5)  ----- B-SR (4)                   + A2-S (6)
          + C          + B1 (3) ----- B1-SR (2)
          + D --- D-SR   + B1a (*; 0) + B1b ------- B1b-SR
                  + D1                + B1c-S (1)   + B1b1
                                                    + B1b2
        A1 [0-6] --- A1-SR
                   + A1a [*]
        */
        function testEventAtB1aWithDetachedA1a(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                nodes['A-SR'].removeChild(nodes.A1);
                log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.A1a}));

                assert_array_equals(log.eventPath,
                    ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A2-S', 'A-SR', 'A'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets,
                    ['A1', 'A1', 'A1', 'A1', 'A1', 'A1', 'A1', 'A1', 'A1'], 'The related targets must be correct.');

            }, 'Firing an event at B1a with relatedNode at A1a (detached) with ' + mode + ' mode shadow trees');
        }

        testEventAtB1aWithDetachedA1a('open');
        testEventAtB1aWithDetachedA1a('closed');

        /*
        -SR: ShadowRoot  -S: Slot  target: (~)  relatedTarget: [~]  *: indicates start  digit: event path order
        A ----------------------------------- A-SR
        + B [0-3]  ----- B-SR                 + A2-S
          + C            + B1 -------- B1-SR
          + D --- D-SR     + B1a [*]   + B1b --- B1b-SR
                  + D1                 + B1c-S   + B1b1
                                                 + B1b2
        A1 (2) --- A1-SR (1)
                   + A1a (*; 0)
        */
        function testEventAtA1aWithDetachedB1a(mode) {
            test(function () {
                var nodes = createFixedTestTree(mode);

                nodes['A-SR'].removeChild(nodes.A1);
                log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {bubbles: true, composed: true, relatedTarget: nodes.B1a}));

                assert_array_equals(log.eventPath,      ['A1a', 'A1-SR', 'A1'], 'The event path must be correct.');
                assert_array_equals(log.relatedTargets, ['B',   'B',     'B' ], 'The related targets must be correct.');

            }, 'Firing an event at A1a with relatedNode at B1a (detached) with ' + mode + ' mode shadow trees');
        }

        testEventAtA1aWithDetachedB1a('open');
        testEventAtA1aWithDetachedB1a('closed');

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