DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (bd65ac107627)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
<!DOCTYPE html>
<title>Shadow DOM: Event.composedPath() should return the same result even if DOM is mutated</title>
<meta name="author" title="Hayato Ito" href="mailto:hayato@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/shadow-dom.js"></script>

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

<script>
async_test((t) => {
  const n = createTestTree(document.querySelector('#test1'));
  n.host.addEventListener('my-event', t.step_func((e) => {
    const path_before = e.composedPath();
    // Move the target out of a closed shadow tree
    n.host.append(n.target);
    const path_after = e.composedPath();
    assert_array_equals(path_before, path_after);
    t.done();
  }));
  const event = new Event('my-event', { bubbles: true, composed: true });
  n.target.dispatchEvent(event);
}, 'Event.composedPath() should return the same result even if DOM is mutated (1/2)');
</script>

<div id="test2">
  <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>
async_test((t) => {
  const n = createTestTree(document.querySelector('#test2'));
  n.host1.addEventListener('my-event', t.step_func((e) => {
    const path_before = e.composedPath();
    // Move nodes out of a closed shadow tree
    n.host1.append(n.host2);
    n.host1.append(n.target);
    const path_after = e.composedPath();
    assert_array_equals(path_before, path_after);
    t.done();
  }));
  const event = new Event('my-event', { bubbles: true, composed: true });
  n.target.dispatchEvent(event);
}, 'Event.composedPath() should return the same result even if DOM is mutated (2/2)');
</script>