shadow-dom/event-post-dispatch.html

<!DOCTYPE html>
<title>Shadow DOM: Event dispatch post result for event properties.</title>
<meta name="author" title="Eriko Kurimoto" href="mailto:elkurin@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/shadow-dom.js"></script>
<script src="resources/event-path-test-helpers.js"></script>

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

<script>
let n1 = createTestTree(test1);
document.body.appendChild(n1.test1);
test(() => {
  let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: true }));
  assert_equals(log.event.target, n1.target);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch without ShadowRoots (composed: true).');

test(() => {
  let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: false }));
  assert_equals(log.event.target, n1.target);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch without ShadowRoots (composed: false).');
document.body.removeChild(n1.test1);
</script>

<div id="test2">
  <div id="host">
    <template id="sr" data-mode="open">
      <div id="target"></div>
    </template>
  </div>
</div>

<script>
let n2 = createTestTree(test2);
document.body.appendChild(n2.test2);
test(() => {
  let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: true }));
  assert_equals(log.event.target, n2.host);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with an open ShadowRoot (composed: true).');

test(() => {
  let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: false }));
  assert_equals(log.event.target, null);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with an open ShadowRoot (composed: false).');
document.body.removeChild(n2.test2);
</script>

<div id="test3">
  <div id="host">
    <template id="sr" data-mode="closed">
      <div id="target"></div>
    </template>
  </div>
</div>

<script>
let n3 = createTestTree(test3);
document.body.appendChild(n3.test3);
test(() => {
  let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: true }));
  assert_equals(log.event.target, n3.host);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with a closed ShadowRoot (composed: true).');

test(() => {
  let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: false }));
  assert_equals(log.event.target, null);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with a closed ShadowRoot (composed: false).');
document.body.removeChild(n3.test3);
</script>

<div id="test4">
  <div id="host1">
    <template id="sr" data-mode="open">
      <div id="host2">
        <template id="sr" data-mode="open">
          <div id="target"></div>
        </template>
      </div>
    </template>
  </div>
</div>

<script>
let n4 = createTestTree(test4);
document.body.appendChild(n4.test4);
test(() => {
  let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: true }));
  assert_equals(log.event.target, n4.host1);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with nested ShadowRoots (composed: true).');

test(() => {
  let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: false }));
  assert_equals(log.event.target, null);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with nested ShadowRoots (composed: false).');
document.body.removeChild(n4.test4);
</script>

<div id="test5">
  <div id="host">
    <template id="sr" data-mode="open">
      <div id="relatedTarget">
        <div id="target"></div>
      </div>
    </template>
  </div>
</div>

<script>
let n5 = createTestTree(test5);
document.body.appendChild(n5.test5);
test(() => {
  let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, compoesed: true, relatedTarget: n5.relatedTarget}));
  assert_equals(log.event.target, null);
  assert_equals(log.event.relatedTarget, null);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: true)');

test(() => {
  let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, compoesed: false, relatedTarget: n5.relatedTarget}));
  assert_equals(log.event.target, null);
  assert_equals(log.event.relatedTarget, null);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: false)');
document.body.removeChild(n5.test5);
</script>

<div id="test6">
  <div id="host">
    <template id="sr" data-mode="open">
      <div id="target"></div>
    </template>
  </div>
  <div id="relatedTarget"></div>
</div>

<script>
let n6 = createTestTree(test6);
document.body.appendChild(n6.test6);
test(() => {
  let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n6.relatedTarget}));
  assert_equals(log.event.target, n6.host);
  assert_equals(log.event.relatedTarget, n6.relatedTarget);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: true)');

test(() => {
  let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n6.relatedTarget}));
  assert_equals(log.event.target, null);
  assert_equals(log.event.relatedTarget, null);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: false)');
document.body.removeChild(n6.test6);
</script>

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

<script>
let n7 = createTestTree(test7);
document.body.appendChild(n7.test7);
test(() => {
  let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n7.relatedTarget}));
  assert_equals(log.event.target, n7.host1);
  assert_equals(log.event.relatedTarget, n7.host2);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: true)');

test(() => {
  let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n7.relatedTarget}));
  assert_equals(log.event.target, null);
  assert_equals(log.event.relatedTarget, null);
  assert_equals(log.event.eventPhase, 0);
  assert_equals(log.event.currentTarget, null);
  assert_equals(log.event.composedPath().length, 0);
}, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: false)');
document.body.removeChild(n7.test7);
</script>