browser/src/tests/events/event.html

<script src="../testing.js"></script>

<div id=content>
  <p id="para"></p>
</div>

<script id=dispatch>
  const startTime =  new Event('x').timeStamp;

  let content = $('#content');
  // let para = document.getElementById('para');
  var nb = 0;
  var evt = null;

  const incrementCallback = function(e) {
    evt = e;
    nb += 1;
    e.preventDefault();
  }

  content.addEventListener('dispatch', incrementCallback);

  content.dispatchEvent(new Event('dispatch', {bubbles: true, cancelable: true}));
  testing.expectEqual(1, nb);
  testing.expectEqual(content, evt.target);
  testing.expectEqual(true, evt.bubbles);
  testing.expectEqual(true, evt.cancelable);
  testing.expectEqual(true, evt.defaultPrevented);
  testing.expectEqual(true, evt.isTrusted);
  testing.expectEqual(true, evt.timeStamp >= Math.floor(startTime));
</script>

<script id=propogate>
  nb = 0;
  let para = $('#para');
  // the stop listener is capturing, so it propogates down
  content.addEventListener('stop',function(e) {
    e.stopPropagation();
    nb += 1;
   }, true)

  para.addEventListener('stop',function(e) {
    nb += 10;
  });

  para.dispatchEvent(new Event('stop'));
  // didn't propogate down (because of capturing) to para handler
  testing.expectEqual(1, nb);
</script>

<script id=immediate>
  nb = 0;

  content.addEventListener('immediate', function(e) {
    e.stopImmediatePropagation();
    nb += 1;
  });

  // the following event listener will not be invoked
  content.addEventListener('immediate', function(e) {
    nb += 10;
  });

  content.dispatchEvent(new Event('immediate'));
  testing.expectEqual(1, nb);
</script>

<script id=legacy>
  nb = 0;
  content.addEventListener('legacy', incrementCallback);
  let evtLegacy = document.createEvent('Event');
  evtLegacy.initEvent('legacy');
  content.dispatchEvent(evtLegacy);
  testing.expectEqual(1, nb);
</script>

<script id=removeListener>
  nb = 0;
  document.addEventListener('count', incrementCallback);
  document.removeEventListener('count', incrementCallback);
  document.dispatchEvent(new Event('count'));
  testing.expectEqual(0, nb);
</script>

<script id=once>
  document.addEventListener('count', incrementCallback, {once: true});
  document.dispatchEvent(new Event('count'));
  document.dispatchEvent(new Event('count'));
  document.dispatchEvent(new Event('count'));
  testing.expectEqual(1, nb);
</script>

<script id=abortController>
  nb = 0;

  let ac = new AbortController()
  document.addEventListener('count', incrementCallback, {signal: ac.signal})
  document.dispatchEvent(new Event('count'));
  document.dispatchEvent(new Event('count'));
  ac.abort();
  document.dispatchEvent(new Event('count'));
  testing.expectEqual(2, nb);
  document.removeEventListener('count', incrementCallback);
</script>

<script id=composedPath>
  testing.expectEqual([], new Event('').composedPath());

  let div1 = document.createElement('div');
  let sr1 = div1.attachShadow({mode: 'open'});
  sr1.innerHTML = "<p id=srp1></p>";
  document.getElementsByTagName('body')[0].appendChild(div1);

  let cp = null;
  const shadowCallback = function(e) {
    cp = e.composedPath().map((n) => n.id || n.nodeName || n.toString());
  }

  div1.addEventListener('click', shadowCallback);
  sr1.getElementById('srp1').click();
  testing.expectEqual(
    ['srp1', '#document-fragment', 'DIV', 'BODY', 'HTML', '#document', '[object Window]'],
    cp
  );

  let div2 = document.createElement('div');
  let sr2 = div2.attachShadow({mode: 'closed'});
  sr2.innerHTML = "<p id=srp2></p>";
  document.getElementsByTagName('body')[0].appendChild(div2);

  cp = null;
  div2.addEventListener('click', shadowCallback);
  sr2.getElementById('srp2').click();
  testing.expectEqual(
    ['DIV', 'BODY', 'HTML', '#document', '[object Window]'],
    cp
  );
</script>