From 73c51d008e2eac1fc23e1be1e679cb695c0e623c Mon Sep 17 00:00:00 2001
From: Marco Castelluccio <mcastelluccio@mozilla.com>
Date: Thu, 16 Nov 2023 00:35:15 +0000
Subject: [PATCH] Bug 1759031: Let `user-action-pseudo-classes-in-has.html`
 rely on actions being completed. r=emilio

Previously, the test relied upon event listener to listen to related events:
e.g. `mousedown` event on `Actions().pointerDown()`. However, as comments in
https://github.com/whatwg/html/issues/7578 indicate when `:active` matches
does not seem to be interoperable across browsers with different inputs.
Instead rely on the action sequence being completed, as done with a simliar
test, `html/semantics/selectors/pseudo-classes/active-disabled.html`.

Differential Revision: https://phabricator.services.mozilla.com/D193463

UltraBlame original commit: ab075d8118aecde5cf88872225b85effcfffbacb
---
 ...user-action-pseudo-classes-in-has.html.ini |   7 -
 .../user-action-pseudo-classes-in-has.html    | 133 +++++++++---------
 2 files changed, 66 insertions(+), 74 deletions(-)
 delete mode 100644 testing/web-platform/meta/css/selectors/invalidation/user-action-pseudo-classes-in-has.html.ini

diff --git a/testing/web-platform/meta/css/selectors/invalidation/user-action-pseudo-classes-in-has.html.ini b/testing/web-platform/meta/css/selectors/invalidation/user-action-pseudo-classes-in-has.html.ini
deleted file mode 100644
index fa2c49962f56..000000000000
--- a/testing/web-platform/meta/css/selectors/invalidation/user-action-pseudo-classes-in-has.html.ini
+++ /dev/null
@@ -1,7 +0,0 @@
-[user-action-pseudo-classes-in-has.html]
-  expected:
-    if os == "mac": ERROR
-  [Invalidation with :focus, :focus-within, :focus-visible in :has()]
-    expected:
-      if os == "mac": TIMEOUT
-      FAIL
diff --git a/testing/web-platform/tests/css/selectors/invalidation/user-action-pseudo-classes-in-has.html b/testing/web-platform/tests/css/selectors/invalidation/user-action-pseudo-classes-in-has.html
index f36de7c76fcf..97702e546f36 100644
--- a/testing/web-platform/tests/css/selectors/invalidation/user-action-pseudo-classes-in-has.html
+++ b/testing/web-platform/tests/css/selectors/invalidation/user-action-pseudo-classes-in-has.html
@@ -37,81 +37,80 @@
 </div>
 <script>
   const tab_key = '\ue004';
+  const hovermeRect = hoverme.getBoundingClientRect();
+  const focusme1Rect = focusme1.getBoundingClientRect();
 
-  async_test(function(t) {
-    hoverme.addEventListener("mouseover", t.step_func(event => {
-      assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 255)",
-                    "subject1 should be blue");
-      assert_equals(getComputedStyle(subject3).color, "rgb(0, 0, 128)",
-                    "subject3 should be navy");
-    }));
-    hoverme.addEventListener("mousedown", t.step_func(event => {
-      assert_equals(getComputedStyle(subject1).color, "rgb(135, 206, 235)",
-                    "subject1 should be skyblue");
-      assert_equals(getComputedStyle(subject3).color, "rgb(173, 216, 230)",
-                    "subject3 should be lightblue");
-    }));
-    hoverme.addEventListener("mouseup", t.step_func(event => {
-      assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 255)",
-                    "subject1 should be blue again");
-      assert_equals(getComputedStyle(subject3).color, "rgb(0, 0, 128)",
-                    "subject3 should be navy again");
-    }));
-    focusme1.addEventListener("focus", t.step_func(function() {
-      assert_equals(getComputedStyle(subject1).color, "rgb(0, 128, 0)",
-                    "subject1 should be green");
-      assert_equals(getComputedStyle(subject3).color, "rgb(0, 100, 0)",
-                    "subject3 should be darkgreen");
-      test_driver.send_keys(document.body, tab_key);
-    }));
-    focusme2.addEventListener("focus", t.step_func(function() {
-      assert_equals(getComputedStyle(subject1).color, "rgb(154, 205, 50)",
-                    "subject1 should be yellowgreen");
-      assert_equals(getComputedStyle(subject3).color, "rgb(173, 255, 47)",
-                    "subject3 should be greenyellow");
-      test_driver.send_keys(document.body, tab_key);
-    }));
-    focusme3.addEventListener("focus", t.step_func(function() {
-      assert_equals(getComputedStyle(subject1).color, "rgb(144, 238, 144)",
-                    "subject1 should be lightgreen");
-      assert_equals(getComputedStyle(subject3).color, "rgb(238, 130, 238)",
-                    "subject3 should be violet");
+  promise_test(async () => {
+    assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 0)", "subject1 initially black");
+    assert_equals(getComputedStyle(subject2).color, "rgb(0, 0, 0)", "subject3 initially black");
 
-      focusme3.remove();
-      assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 0)",
-                    "subject1 should be black");
-      assert_equals(getComputedStyle(subject3).color, "rgb(0, 0, 0)",
-                    "subject3 should be black");
-
-      test_driver.send_keys(document.body, tab_key);
-    }));
-    focusme4.addEventListener("focus", t.step_func_done(function() {
-      assert_equals(getComputedStyle(subject2).color, "rgb(0, 128, 0)",
-                    "subject2 should be green");
-      assert_equals(getComputedStyle(subject4).color, "rgb(0, 100, 0)",
-                    "subject4 should be darkgreen");
-
-      focusme4.remove();
-      assert_equals(getComputedStyle(subject2).color, "rgb(0, 0, 0)",
-                    "subject2 should be black");
-      assert_equals(getComputedStyle(subject4).color, "rgb(0, 0, 0)",
-                    "subject4 should be black");
-    }));
-  }, "Invalidation with :focus, :focus-within, :focus-visible in :has()");
-
-  test(() => {
-    assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 0)");
-    assert_equals(getComputedStyle(subject2).color, "rgb(0, 0, 0)");
-  }, "ancestor should be black");
+    await new test_driver
+      .Actions()
+      .pointerMove(hovermeRect.x + 1, hovermeRect.y + 1, {origin: "viewport"})
+      .send();
+    assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 255)",
+                  "subject1 should be blue");
+    assert_equals(getComputedStyle(subject3).color, "rgb(0, 0, 128)",
+                  "subject3 should be navy");
 
-  let hovermeRect = hoverme.getBoundingClientRect();
-  let focusme1Rect = focusme1.getBoundingClientRect();
-  new test_driver.Actions()
+    await new test_driver
+      .Actions()
       .pointerMove(hovermeRect.x + 1, hovermeRect.y + 1, {origin: "viewport"})
       .pointerDown()
+      .send();
+    assert_equals(getComputedStyle(subject1).color, "rgb(135, 206, 235)",
+                  "subject1 should be skyblue");
+    assert_equals(getComputedStyle(subject3).color, "rgb(173, 216, 230)",
+                  "subject3 should be lightblue");
+
+    await new test_driver
+      .Actions()
       .pointerUp()
+      .send();
+    assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 255)",
+                  "subject1 should be blue again");
+    assert_equals(getComputedStyle(subject3).color, "rgb(0, 0, 128)",
+                  "subject3 should be navy again");
+
+    await new test_driver
+      .Actions()
       .pointerMove(focusme1Rect.x + 1, focusme1Rect.y + 1, {origin: "viewport"})
       .pointerDown()
       .pointerUp()
       .send();
+    assert_equals(getComputedStyle(subject1).color, "rgb(0, 128, 0)",
+                  "subject1 should be green");
+    assert_equals(getComputedStyle(subject3).color, "rgb(0, 100, 0)",
+                  "subject3 should be darkgreen");
+
+    await test_driver.send_keys(document.body, tab_key);
+    assert_equals(getComputedStyle(subject1).color, "rgb(154, 205, 50)",
+                  "subject1 should be yellowgreen");
+    assert_equals(getComputedStyle(subject3).color, "rgb(173, 255, 47)",
+                  "subject3 should be greenyellow");
+
+    await test_driver.send_keys(document.body, tab_key);
+    assert_equals(getComputedStyle(subject1).color, "rgb(144, 238, 144)",
+                  "subject1 should be lightgreen");
+    assert_equals(getComputedStyle(subject3).color, "rgb(238, 130, 238)",
+                  "subject3 should be violet");
+
+    focusme3.remove();
+    assert_equals(getComputedStyle(subject1).color, "rgb(0, 0, 0)",
+                  "subject1 should be black");
+    assert_equals(getComputedStyle(subject3).color, "rgb(0, 0, 0)",
+                  "subject3 should be black");
+
+    await test_driver.send_keys(document.body, tab_key);
+    assert_equals(getComputedStyle(subject2).color, "rgb(0, 128, 0)",
+                  "subject2 should be green");
+    assert_equals(getComputedStyle(subject4).color, "rgb(0, 100, 0)",
+                  "subject4 should be darkgreen");
+
+    focusme4.remove();
+    assert_equals(getComputedStyle(subject2).color, "rgb(0, 0, 0)",
+                  "subject2 should be black");
+    assert_equals(getComputedStyle(subject4).color, "rgb(0, 0, 0)",
+                  "subject4 should be black");
+  });
 </script>