Bug 1918049 - [wpt] Fix several input events spin button and arrow ke…

…y tests for broken setup and test driver usage. r=masayuki Differential Revision: https://phabricator.services.mozilla.com/D221950
i3roly · Sep 13, 2024 · 5a2cd60 · 5a2cd60
1 parent 9cf6f12
commit 5a2cd60
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 75 deletions.
diff --git a/...latform/meta/input-events/input-events-arrow-key-on-number-input-delete-document.html.ini b/...latform/meta/input-events/input-events-arrow-key-on-number-input-delete-document.html.ini
diff --git a/...latform/meta/input-events/input-events-arrow-key-on-number-input-prevent-default.html.ini b/...latform/meta/input-events/input-events-arrow-key-on-number-input-prevent-default.html.ini
@@ -1,3 +1,4 @@
 [input-events-arrow-key-on-number-input-prevent-default.html]
   [Number input should not fire input and change event if the beforeinput event is default prevented]
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1918254
     expected: FAIL
diff --git a/...meta/input-events/input-events-spin-button-click-on-number-input-delete-document.html.ini b/...meta/input-events/input-events-spin-button-click-on-number-input-delete-document.html.ini
@@ -1,2 +1,5 @@
 [input-events-spin-button-click-on-number-input-delete-document.html]
-  expected: ERROR
+
+  [Number input should not crash and not fire subsequent events when event handler removes document]
+    expected:
+      if (os == "android"): FAIL
diff --git a/...meta/input-events/input-events-spin-button-click-on-number-input-prevent-default.html.ini b/...meta/input-events/input-events-spin-button-click-on-number-input-prevent-default.html.ini
@@ -1,3 +1,4 @@
 [input-events-spin-button-click-on-number-input-prevent-default.html]
   [Number input should not fire input and change event if the beforeinput event is default prevented]
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1918254
     expected: FAIL
diff --git a/...ng/web-platform/meta/input-events/input-events-spin-button-click-on-number-input.html.ini b/...ng/web-platform/meta/input-events/input-events-spin-button-click-on-number-input.html.ini
@@ -1,3 +1,5 @@
 [input-events-spin-button-click-on-number-input.html]
+
   [Number input should fire beforeinput event before the input and change event]
-    expected: FAIL
+    expected:
+      if (os == "android"): FAIL
diff --git a/...b-platform/tests/input-events/input-events-arrow-key-on-number-input-delete-document.html b/...b-platform/tests/input-events/input-events-arrow-key-on-number-input-delete-document.html
@@ -9,29 +9,39 @@
 <body>
 <iframe id="iframe"></iframe>
 <script>
-promise_test(async function() {
-  const child = document.getElementById("iframe");
-  const childDocument = child.contentDocument;
-  const inputElement = childDocument.createElement('input');
-  inputElement.type = "number";
-  childDocument.body.appendChild(inputElement);
-  let events = [];
-  inputElement.addEventListener("beforeinput", () => {
-    child.remove();
-    events.push("beforeinput");
-  });
-  inputElement.addEventListener("input", () => {
-    evenst.push("input");
-  });
-  inputElement.addEventListener("change", () => {
-    events.push("change");
-  });
+  const frame = document.getElementById("iframe");
 
-  inputElement.focus();
+  function loadIframe(doc) {
+    return new Promise((resolve) => {
+      frame.addEventListener("load", resolve);
+      frame.srcdoc = doc;
+    });
+  }
 
-  await new test_driver.send_keys(inputElement, "\uE013");
-  assert_array_equals(events, ['beforeinput']);
-}, "Number input should not crash and not fire subsequent events when event handler removes document");
+  promise_test(async function() {
+    await loadIframe("<input type='number'>");
+    const inputElement = frame.contentDocument.querySelector("input");
+
+    let events = [];
+
+    inputElement.addEventListener("beforeinput", () => {
+      events.push("beforeinput");
+      frame.remove();
+    });
+    inputElement.addEventListener("input", () => {
+      events.push("input");
+    });
+    inputElement.addEventListener("change", () => {
+      events.push("change");
+    });
+
+    inputElement.focus();
+
+    await test_driver.send_keys(inputElement, "\uE013");
+
+    assert_array_equals(events, ['beforeinput']);
+    assert_false(document.body.contains(frame));
+  }, "Number input should not crash and not fire subsequent events when event handler removes document");
 </script>
 </body>
 </html>
diff --git a/...rm/tests/input-events/input-events-spin-button-click-on-number-input-delete-document.html b/...rm/tests/input-events/input-events-spin-button-click-on-number-input-delete-document.html
@@ -4,37 +4,57 @@
 <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>
 </head>
 <body>
 <iframe id="iframe"></iframe>
 <script>
-promise_test(async function() {
-  const child = document.getElementById("iframe");
-  const childDocument = child.contentDocument;
-  const inputElement = childDocument.createElement('input');
-  inputElement.type = "number";
-  childDocument.body.appendChild(inputElement);
-  let events = [];
-  inputElement.addEventListener("beforeinput", () => {
-    child.remove();
-    events.push("beforeinput");
-  });
-  inputElement.addEventListener("input", () => {
-    events.push("input");
-  });
-  inputElement.addEventListener("change", () => {
-    events.push("change");
-  });
+  const frame = document.getElementById("iframe");
 
-  inputElement.focus();
-  // Get the spin button up arrow key location and adjust with iframe offset to get absolute position
-  const x1 = (inputElement.offsetLeft + inputElement.offsetWidth - 10) + child.offsetLeft;
-  const y1 = (inputElement.offsetTop + inputElement.offsetHeight / 4) + child.offsetTop;
-  await test_driver_internal.click(inputElement,{x: x1, y: y1});
-  assert_array_equals(events, ['beforeinput']);
-  assert_false(document.body.contains(child));
-}, "Number input should not crash and not fire subsequent events when event handler removes document");
+  function loadIframe(doc) {
+    return new Promise((resolve) => {
+      frame.addEventListener("load", resolve);
+      frame.srcdoc = doc;
+    });
+  }
+
+  promise_test(async function () {
+    await loadIframe(
+      "<input type='number' style='width: 100px; height: 20px'>"
+    );
+    const inputElement = frame.contentDocument.querySelector("input");
+
+    let events = [];
+
+    inputElement.addEventListener("beforeinput", () => {
+      frame.remove();
+      events.push("beforeinput");
+    });
+    inputElement.addEventListener("input", () => {
+      events.push("input");
+    });
+    inputElement.addEventListener("change", () => {
+      events.push("change");
+    });
+
+    // Roughly get the offset to the spin up arrow button's center point within
+    // the iframe's viewport. Note that this is fragile and might need specific
+    // coordinates for each browser and maybe platform.
+    const rect = inputElement.getBoundingClientRect();
+    const x = rect.x + rect.width - 10;
+    const y = rect.y + Math.round(rect.height / 4);
+
+    const actions = new test_driver.Actions()
+      .setContext(frame.contentWindow)
+      .pointerMove(x, y, { origin: "viewport" })
+      .pointerDown()
+      .pointerUp();
+    await actions.send();
+
+    assert_array_equals(events, ['beforeinput']);
+    assert_false(document.body.contains(frame));
+  }, "Number input should not crash and not fire subsequent events when event handler removes document");
 </script>
 </body>
 </html>
diff --git a/...rm/tests/input-events/input-events-spin-button-click-on-number-input-prevent-default.html b/...rm/tests/input-events/input-events-spin-button-click-on-number-input-prevent-default.html
@@ -4,32 +4,43 @@
 <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>
 </head>
 <body>
 <input type="number" id="number_input">
 <script>
-promise_test(async function() {
-  const inputElement = document.getElementById("number_input");
-  let events = [];
-  inputElement.addEventListener("beforeinput", (e) => {
-    e.preventDefault();
-    events.push("beforeinput");
-  });
-  inputElement.addEventListener("input", () => {
-    events.push("input");
-  });
-  inputElement.addEventListener("change", () => {
-    events.push("change");
-  });
+  promise_test(async function() {
+    const inputElement = document.getElementById("number_input");
 
-  inputElement.focus();
-  // Get the spin button up arrow key location
-  const x1 = (inputElement.offsetLeft + inputElement.offsetWidth - 10);
-  const y1 = (inputElement.offsetTop + inputElement.offsetHeight / 4);
-  await test_driver_internal.click(inputElement,{x: x1, y: y1});
-  assert_array_equals(events, ['beforeinput']);
-}, "Number input should not fire input and change event if the beforeinput event is default prevented");
+    let events = [];
+
+    inputElement.addEventListener("beforeinput", (e) => {
+      e.preventDefault();
+      events.push("beforeinput");
+    });
+    inputElement.addEventListener("input", () => {
+      events.push("input");
+    });
+    inputElement.addEventListener("change", () => {
+      events.push("change");
+    });
+
+    // Roughly get the offset to the spin up arrow button's center point within
+    // the iframe's viewport. Note that this is fragile and might need specific
+    // coordinates for each browser and maybe platform.
+    const rect = inputElement.getBoundingClientRect();
+    const x = rect.x + rect.width - 10;
+    const y = rect.y + Math.round(rect.height / 4);
+
+    const actions = new test_driver.Actions()
+      .pointerMove(x, y, { origin: "viewport" })
+      .pointerDown()
+      .pointerUp();
+    await actions.send();
+
+    assert_array_equals(events, ['beforeinput']);
+  }, "Number input should not fire input and change event if the beforeinput event is default prevented");
 </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/input-events/input-events-spin-button-click-on-number-input.html b/testing/web-platform/tests/input-events/input-events-spin-button-click-on-number-input.html
@@ -4,14 +4,17 @@
 <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>
 </head>
 <body>
 <input type="number" id="number_input">
 <script>
 promise_test(async function() {
   const inputElement = document.getElementById("number_input");
+
   let events = [];
+
   inputElement.addEventListener("beforeinput", () => {
     events.push("beforeinput");
   });
@@ -22,11 +25,19 @@
     events.push("change");
   });
 
-  inputElement.focus();
-  // Get the spin button up arrow key location
-  const x1 = (inputElement.offsetLeft + inputElement.offsetWidth - 10);
-  const y1 = (inputElement.offsetTop + inputElement.offsetHeight / 4);
-  await test_driver_internal.click(inputElement,{x: x1, y: y1});
+  // Roughly get the offset to the spin up arrow button's center point within
+  // the iframe's viewport. Note that this is fragile and might need specific
+  // coordinates for each browser and maybe platform.
+  const rect = inputElement.getBoundingClientRect();
+  const x = rect.x + rect.width - 10;
+  const y = rect.y + Math.round(rect.height / 4);
+
+  const actions = new test_driver.Actions()
+    .pointerMove(x, y, { origin: "viewport" })
+    .pointerDown()
+    .pointerUp();
+  await actions.send();
+
   assert_array_equals(events, ['beforeinput','input','change']);
 }, "Number input should fire beforeinput event before the input and change event");
 </script>