event-composed-false-path.html | Explore in Territory

<!DOCTYPE html>
<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(() => {
  window.addEventListener('my-event', (e) => {
    assert_array_equals(e.composedPath(), [document.body, document.documentElement, document, window]);
  });
  let event = new Event('my-event', { bubbles: true, composed: false });
  document.body.dispatchEvent(event);
}, 'event.composedPath() on window.');
</script>

<script>
test(() => {
  let n = createTestTree(test1);
  let event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  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 (composed: false).');
</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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'sr'];
  assert_event_path_equals(log,
                           [['target', 'target', null, path],
                            ['sr', 'target', null, path]]);
}, 'Event Path with an open ShadowRoot (composed: false).');
</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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'sr'];
  assert_event_path_equals(log,
                           [['target', 'target', null, path],
                            ['sr', 'target', null, path]]);
}, 'Event Path with an closed ShadowRoot (composed: false).');
</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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'sr2'];
  assert_event_path_equals(log, [['target', 'target', null, path],
                                 ['sr2', 'target', null, path]]);
}, 'Event Path with nested ShadowRoots (composed: false): 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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'sr2'];
  assert_event_path_equals(log, [['target', 'target', null, path],
                                 ['sr2', 'target', null, path]]);
}, 'Event Path with nested ShadowRoots (composed: false): 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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'sr2'];
  assert_event_path_equals(log, [['target', 'target', null, path],
                                 ['sr2', 'target', null, path]]);
}, 'Event Path with nested ShadowRoots (composed: false): 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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'sr2'];
  assert_event_path_equals(log, [['target', 'target', null, path],
                                 ['sr2', 'target', null, path]]);
}, 'Event Path with nested ShadowRoots (composed: false): 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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  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 (composed: false).');
</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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  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 (composed: false).');
</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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  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 (composed: false): 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 event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  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 (composed: false): closed > closed.');
</script>

<div id="test12">
  <div id="host1">
    <template id="sr1" data-mode="open">
      <div id="host2">
        <template id="sr2" data-mode="open">
          <slot id="slot"></slot>
        </template>
        <div id="target"></div>
      </div>
    </template>
  </div>
</div>

<script>
test(() => {
  let n = createTestTree(test12);
  let event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'slot', 'sr2', 'host2', 'sr1'];
  assert_event_path_equals(log, [['target', 'target', null, path],
                                 ['slot', 'target', null, path],
                                 ['sr2', 'target', null, path],
                                 ['host2', 'target', null, path],
                                 ['sr1', 'target', null, path]]);
}, 'Event Path with slots in nested ShadowRoots (composed: false): open > open. Target is not in the document tree scope.');
</script>

<div id="test13">
  <div id="host1">
    <template id="sr1" data-mode="open">
      <div id="host2">
        <template id="sr2" data-mode="closed">
          <slot id="slot"></slot>
        </template>
        <div id="target"></div>
      </div>
    </template>
  </div>
</div>

<script>
test(() => {
  let n = createTestTree(test13);
  let event = new Event('my-event', { bubbles: true, composed: false });
  let log = dispatchEventWithLog(n, n.target, event);
  let path = ['target', 'slot', 'sr2', 'host2', 'sr1'];
  let path1 = ['target', 'host2', 'sr1'];
  assert_event_path_equals(log, [['target', 'target', null, path1],
                                 ['slot', 'target', null, path],
                                 ['sr2', 'target', null, path],
                                 ['host2', 'target', null, path1],
                                 ['sr1', 'target', null, path1]]);
}, 'Event Path with slots in nested ShadowRoots (composed: false): open > closed. Target is not in the document tree scope.');
</script>
chromium/third_party/blink/web_tests/shadow-dom/event-composed-false-path.html
