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, composed: 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, composed: 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);

test(t => {

  let host = document.createElement("div");

  let shadow = host.attachShadow({ mode: "open" });

  let target = shadow.appendChild(document.createElement("trala"));

  let eventListenerCalled = false;

  target.addEventListener("my-event", t.step_func(e => {

    eventListenerCalled = true;

    assert_equals(window.event, undefined);

    // Move target node out of shadow tree.

    host.appendChild(target);

  }));

  let event = new MouseEvent('my-event', {composed: false, relatedTarget: host});

  target.dispatchEvent(event);

  assert_true(eventListenerCalled);

  assert_equals(event.target, null, "target should have been cleared");

  assert_equals(event.relatedTarget, null, "relatedTarget should have been cleared");

  assert_equals(event.eventPhase, 0);

  assert_equals(event.currentTarget, null);

  assert_equals(event.composedPath().length, 0);

}, 'Event properties post dispatch when target get moved out of the shadow tree by event listener');

test(t => {

  let host = document.createElement("div");

  let shadow = host.attachShadow({ mode: "open" });

  let target = host.appendChild(document.createElement("trala"));

  let eventListenerCalled = false;

  target.addEventListener("my-event", t.step_func(e => {

      assert_equals(window.event, e);

  }));

  target.addEventListener("my-event", t.step_func(e => {

    eventListenerCalled = true;

    assert_equals(window.event, e);

    // Move target node into the shadow tree.

    shadow.append(target);

  }));

  target.addEventListener("my-event", t.step_func(e => {

      assert_equals(window.event, e);

  }));

  let event = new MouseEvent('my-event', {composed: false, relatedTarget: host});

  target.dispatchEvent(event);

  assert_true(eventListenerCalled);

  // targets should not have been cleared since the node was not in the shadow tree when the event was initially dispatched.

  assert_equals(event.target, target, "Target should not have been cleared");

  assert_equals(event.relatedTarget, host, "relatedTarget should not have been cleared");

  assert_equals(event.eventPhase, 0);

  assert_equals(event.currentTarget, null);

  assert_equals(event.composedPath().length, 0);

}, 'Event properties post dispatch when target get moved into the shadow tree by event listener');

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: