test: update DOM events web platform tests

PR-URL: #54642 Reviewed-By: Yagiz Nizipli <yagiz@nizipli.com> Reviewed-By: Matteo Collina <matteo.collina@gmail.com> Reviewed-By: Mattias Buelens <mattias@buelens.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com> Reviewed-By: Ethan Arrowood <ethan@arrowood.dev> Reviewed-By: Chemi Atlow <chemi@atlow.co.il> Reviewed-By: James M Snell <jasnell@gmail.com>
nodejs · Oct 4, 2024 · 9b78345 · 9b78345
1 parent cb47e16
commit 9b78345
Show file tree

Hide file tree

Showing 39 changed files with 2,693 additions and 565 deletions.
diff --git a/test/fixtures/wpt/README.md b/test/fixtures/wpt/README.md
@@ -14,7 +14,7 @@ Last update:
 - compression: https://github.com/web-platform-tests/wpt/tree/5aa50dd415/compression
 - console: https://github.com/web-platform-tests/wpt/tree/767ae35464/console
 - dom/abort: https://github.com/web-platform-tests/wpt/tree/d1f1ecbd52/dom/abort
-- dom/events: https://github.com/web-platform-tests/wpt/tree/ab8999891c/dom/events
+- dom/events: https://github.com/web-platform-tests/wpt/tree/0a811c5161/dom/events
 - encoding: https://github.com/web-platform-tests/wpt/tree/5aa50dd415/encoding
 - fetch/data-urls/resources: https://github.com/web-platform-tests/wpt/tree/7c79d998ff/fetch/data-urls/resources
 - FileAPI: https://github.com/web-platform-tests/wpt/tree/cceaf3628d/FileAPI

diff --git a/test/fixtures/wpt/dom/events/Event-dispatch-click.html b/test/fixtures/wpt/dom/events/Event-dispatch-click.html
@@ -87,6 +87,22 @@
   child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
 }, "pick the first with activation behavior <a href>")
 
+async_test(function(t) {
+  var input = document.createElement("input")
+  input.type = "radio"
+  dump.appendChild(input)
+  input.onclick = t.step_func(function() {
+    assert_false(input.checked, "input pre-click must not be triggered")
+  })
+  var child = input.appendChild(document.createElement("input"))
+  child.type = "radio"
+  child.onclick = t.step_func(function() {
+    assert_true(child.checked, "child pre-click must be triggered")
+  })
+  child.dispatchEvent(new MouseEvent("click", {bubbles:true}))
+  t.done()
+}, "pick the first with activation behavior <input type=radio>")
+
 async_test(function(t) {
   var input = document.createElement("input")
   input.type = "checkbox"
@@ -173,6 +189,46 @@
   t.done()
 }, "disabled checkbox still has activation behavior, part 2")
 
+async_test(function(t) {
+  var state = "start"
+
+  var form = document.createElement("form")
+  form.onsubmit = t.step_func(() => {
+    if(state == "start" || state == "radio") {
+      state = "failure"
+    } else if(state == "form") {
+      state = "done"
+    }
+    return false
+  })
+  dump.appendChild(form)
+  var button = form.appendChild(document.createElement("button"))
+  button.type = "submit"
+  var radio = button.appendChild(document.createElement("input"))
+  radio.type = "radio"
+  radio.onclick = t.step_func(() => {
+    if(state == "start") {
+      assert_unreached()
+    } else if(state == "radio") {
+      assert_true(radio.checked)
+    }
+  })
+  radio.disabled = true
+  radio.click()
+  assert_equals(state, "start")
+
+  state = "radio"
+  radio.disabled = false
+  radio.click()
+  assert_equals(state, "radio")
+
+  state = "form"
+  button.click()
+  assert_equals(state, "done")
+
+  t.done()
+}, "disabled radio still has activation behavior")
+
 async_test(function(t) {
   var input = document.createElement("input")
   input.type = "checkbox"

diff --git a/test/fixtures/wpt/dom/events/Event-dispatch-on-disabled-elements.html b/test/fixtures/wpt/dom/events/Event-dispatch-on-disabled-elements.html
@@ -19,7 +19,7 @@
 <body>
 <script>
 // HTML elements that can be disabled
-const formElements = ["button", "fieldset", "input", "select", "textarea"];
+const formElements = ["button", "input", "select", "textarea"];
 
 test(() => {
   for (const localName of formElements) {

diff --git a/test/fixtures/wpt/dom/events/Event-dispatch-single-activation-behavior.html b/test/fixtures/wpt/dom/events/Event-dispatch-single-activation-behavior.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title> Only one activation behavior is executed during dispatch</title>
+<link rel="author" title="Vincent Hilla" href="mailto:vhilla@mozilla.com">
+<link rel="help" href="https://dom.spec.whatwg.org/#eventtarget-activation-behavior">
+<link rel="help" href="https://dom.spec.whatwg.org/#concept-event-dispatch">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+
+<div id=test_container></div>
+
+<!--
+    Three classes:
+    click
+        Element to be clicked to cause activation behavior
+    activates
+        Element that registers the activation behavior
+    container
+        Element in which other elements with activation behavior are placed.
+        We test that those won't be activated too.
+-->
+<template>
+    <!--input, change event bubble, so have to check if checked is true-->
+    <input class="click activates container" type="checkbox" oninput="this.checked ? activated(this) : null">
+    <input class="click activates container" type="radio" oninput="this.checked ? activated(this) : null">
+    <form onsubmit="activated(this); return false" class="activates">
+        <input class="click container" type="submit">
+    </form>
+    <form onsubmit="activated(this); return false" class="activates">
+        <input class="click container" type="image">
+    </form>
+    <form onreset="activated(this)" class="activates">
+        <input class="click container" type="reset">
+    </form>
+    <form onsubmit="activated(this); return false" class="activates">
+        <button class="click container" type="submit"></button>
+    </form>
+    <form onreset="activated(this)" class="activates">
+        <button class="click container" type="reset"></button>
+    </form>
+    <a href="#link" class="click container activates"></a>
+    <area href="#link" class="click container activates">
+    <details ontoggle="activated(this)" class="activates">
+        <summary class="click container"></summary>
+    </details>
+    <label>
+      <input type=checkbox onclick="this.checked ? activated(this) : null" class="activates">
+      <span class="click container">label</span>
+    </label>
+    <!--activation behavior of label for event targeted at interactive content descendant is to do nothing-->
+    <label class="container">
+        <button class="click" type="button"></button>
+    </label>
+</template>
+
+<script>
+let activations = [];
+function activated(e) {
+    activations.push(e);
+}
+
+function getActivations(testidx) {
+    return activations.filter(a =>
+        (a.endsWith && a.endsWith("test"+testidx+"_link"))
+        || (a.classList && a.classList.contains("test"+testidx))
+    );
+}
+
+// for a and area elements
+window.onhashchange = function(e) {
+    if (e.newURL.endsWith("link")) {
+        activated(e.newURL);
+    }
+    window.location.hash = "";
+};
+
+function getElementsByClassNameInclusive(e, clsname) {
+    let ls = Array.from(e.getElementsByClassName(clsname));
+    if (e.classList.contains(clsname)) ls.push(e);
+    return ls;
+}
+
+function getClickTarget(e) {
+    return getElementsByClassNameInclusive(e, "click")[0];
+}
+
+function getContainer(e) {
+    return getElementsByClassNameInclusive(e, "container")[0];
+}
+
+function getExpectedActivations(e) {
+    let ls = getElementsByClassNameInclusive(e, "activates");
+
+    // special case, for a and area the window registers the activation
+    // have to use string, as testrunner cannot stringify the window object
+    ls = ls.map(e => e.tagName === "A" || e.tagName === "AREA" ? e.href : e);
+
+    return ls;
+}
+
+function toString(e) {
+    const children = Array.from(e.children);
+    const childstr = (children.map(toString)).join("");
+    const tag = e.tagName;
+    const typestr = e.type ? " type="+e.type : "";
+    return `<${tag}${typestr}>${childstr}</${tag}>`;
+}
+
+// generate O(n^2) test combinations
+const template = document.querySelector("template");
+const elements = Array.from(template.content.children);
+const tests = []
+for (const target of elements) {
+    for (const parent of elements) {
+        if (target === parent) continue;
+        tests.push([target.cloneNode(true), parent.cloneNode(true)])
+    }
+}
+
+const test_container = document.getElementById("test_container");
+
+/**
+ * Test that if two elements in an event target chain have activation behavior,
+ * only one of them will be activated.
+ *
+ * Each child of <template> represents one case of activation behavior.
+ * The behavior should be triggered by clicking the element of class click
+ * and will manifest as a call to activated().
+ *
+ * For each [target, parent] in tests, we make target a descendant of parent
+ * and test that only target gets activated when dispatching a click.
+ */
+for (let i = 0; i < tests.length; i++) {
+    let [target, parent] = tests[i];
+    async_test(function(t) {
+        let test = document.createElement("div");
+        test_container.appendChild(test);
+        test.appendChild(parent);
+        getContainer(parent).appendChild(target);
+
+        // for later filtering out the activations belonging to this test
+        for (let e of test.getElementsByClassName("activates")) {
+            e.classList.add("test"+i);
+        }
+        for (let e of test.querySelectorAll("a, area")) {
+            e.href = "#test"+i+"_link";
+        }
+
+        getClickTarget(target).click();
+
+        // Need to spin event loop twice, as some clicks might dispatch another task
+        t.step_timeout(() => {
+            t.step_timeout(t.step_func_done(() => {
+                    assert_array_equals(getActivations(i), getExpectedActivations(target));
+            }), 0);
+        }, 0);
+
+        t.add_cleanup(function() {
+            test_container.removeChild(test);
+        });
+    }, `When clicking child ${toString(target)} of parent ${toString(parent)}, only child should be activated.`);
+}
+</script>
diff --git a/test/fixtures/wpt/dom/events/Event-dispatch-throwing-multiple-globals.html b/test/fixtures/wpt/dom/events/Event-dispatch-throwing-multiple-globals.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+function createIframe(t, srcdoc = '') {
+  let iframe = document.createElement('iframe');
+  iframe.srcdoc = srcdoc;
+  t.add_cleanup(() => iframe.remove());
+  return new Promise((resolve, reject) => {
+    iframe.addEventListener('load', () => resolve(iframe.contentWindow));
+    document.body.appendChild(iframe);
+  });
+}
+
+// Returns a promise which will resolve with the next error event fired at any
+// of `windows`, after the invocation of this function. Once one does, this
+// function removes its listeners and produces that error event so that it can
+// be examined (most notably for which global proxy it was targeted at).
+async function nextErrorEvent(windows) {
+  let listener;
+  let p = new Promise((resolve, reject) => {
+    listener = (event) => { resolve(event); event.preventDefault(); };
+  });
+  for (let w of windows) {
+    w.addEventListener('error', listener);
+  }
+  try {
+    return await p;
+  } finally {
+    for (let w of windows) {
+      w.removeEventListener('error', listener);
+    }
+  }
+}
+
+promise_test(async t => {
+  let w = await createIframe(t, `<script>function listener() { throw new Error(); }<`+`/script>`);
+  let w2 = await createIframe(t);
+
+  let target = new w2.EventTarget();
+  target.addEventListener('party', w.listener);
+  let nextErrorPromise = nextErrorEvent([self, w, w2]);
+  target.dispatchEvent(new Event('party'));
+  let errorEvent = await nextErrorPromise;
+  if (errorEvent.error) {
+    assert_true(errorEvent.error instanceof w.Error, 'error should be an instance created inside the listener function');
+  }
+  assert_equals(errorEvent.target, w, `error event should target listener's global but instead targets ${event.currentTarget === w2 ? 'target\'s global' : 'test harness global'}`);
+}, 'exception thrown in event listener function should result in error event on listener\'s global');
+
+promise_test(async t => {
+  let w = await createIframe(t, `<script>listener = {};<`+`/script>`);
+  let w2 = await createIframe(t, `<script>handleEvent = () => { throw new Error; };<`+`/script>`);
+  let w3 = await createIframe(t);
+  w.listener.handleEvent = w2.handleEvent;
+
+  let target = new w3.EventTarget();
+  target.addEventListener('party', w.listener);
+  let nextErrorPromise = nextErrorEvent([self, w, w2, w3]);
+  target.dispatchEvent(new Event('party'));
+  let errorEvent = await nextErrorPromise;
+  if (errorEvent.error) {
+    assert_true(errorEvent.error instanceof w2.Error, 'error should be an instance created inside the listener function');
+  }
+  assert_equals(errorEvent.target, w, `error event should target listener's global but instead targets ${event.currentTarget === w2 ? 'target\'s global' : event.currentTarget === w3 ? 'function\'s global' : 'test harness global'}`);
+}, 'exception thrown in event listener interface object should result in error event on listener\'s global');
+</script>
+</body>
diff --git a/test/fixtures/wpt/dom/events/EventTarget-constructible.any.js b/test/fixtures/wpt/dom/events/EventTarget-constructible.any.js
@@ -23,6 +23,23 @@ test(() => {
   assert_equals(callCount, 2);
 }, "A constructed EventTarget can be used as expected");
 
+test(() => {
+  const target = new EventTarget();
+  const event = new Event("foo");
+
+  function listener(e) {
+    assert_equals(e, event);
+    assert_equals(e.target, target);
+    assert_equals(e.currentTarget, target);
+    assert_array_equals(e.composedPath(), [target]);
+  }
+  target.addEventListener("foo", listener, { once: true });
+  target.dispatchEvent(event);
+  assert_equals(event.target, target);
+  assert_equals(event.currentTarget, null);
+  assert_array_equals(event.composedPath(), []);
+}, "A constructed EventTarget implements dispatch correctly");
+
 test(() => {
   class NicerEventTarget extends EventTarget {
     on(...args) {

diff --git a/test/fixtures/wpt/dom/events/event-global.html b/test/fixtures/wpt/dom/events/event-global.html
@@ -114,4 +114,14 @@
 
   target.dispatchEvent(new Event("click"));
 }, "window.event is set to the current event, which is the event passed to dispatch");
+
+async_test(t => {
+  let target = new XMLHttpRequest();
+
+  target.onload = t.step_func_done(e => {
+    assert_equals(e, window.event);
+  });
+
+  target.dispatchEvent(new Event("load"));
+}, "window.event is set to the current event, which is the event passed to dispatch (2)");
 </script>
diff --git a/test/fixtures/wpt/dom/events/pointer-event-document-move.html b/test/fixtures/wpt/dom/events/pointer-event-document-move.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/341104769">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<template>
+  <p>TEST</p>
+</template>
+
+<body>
+<script>
+  const clone = document.querySelector("template").content.cloneNode(true);
+  const p = clone.querySelector("p");
+
+  let gotEvent = false;
+  p.addEventListener("pointerup", () => {
+    gotEvent = true;
+  });
+
+  document.body.append(clone);
+
+  promise_test(async () => {
+    await test_driver.click(document.querySelector("p"));
+    assert_true(gotEvent);
+  }, "Moving a node to new document should move the registered event listeners together");
+</script>