sousa-gecko/testing/web-platform/tests/css/selectors/active-observable.html

<!doctype html>
<meta charset="utf-8" />
<title>
  Selectors: :active is observable from within pointerdown/mousedown listeners
</title>
<link rel="author" href="mailto:wpt@keithcirkel.co.uk" />
<link rel="help" href="https://drafts.csswg.org/selectors/#the-active-pseudo" />
<link
  rel="help"
  href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-active"
/>
<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>

<style>
  .target,
  .parent {
    min-width: 80px;
    min-height: 80px;
  }
</style>

<div id="scratch"></div>

<script>
  function waitForRender() {
    return new Promise((resolve) =>
      requestAnimationFrame(() => requestAnimationFrame(resolve)),
    );
  }

  // Use pointer events to perform a click, so each pointerevent
  // can be monitored.
  function click(element, button = "LEFT", { moveWithin = false } = {}) {
    const actions = new test_driver.Actions();
    let chain = actions
      .pointerMove(0, 0, {})
      .pointerMove(0, 0, { origin: element })
      .pointerDown({ button: actions.ButtonType[button] });
    if (moveWithin) {
      chain = chain.pointerMove(5, 5, { origin: element });
    }
    return chain.pointerUp({ button: actions.ButtonType[button] }).send();
  }

  async function resetPointer() {
    await new test_driver.Actions().pointerMove(0, 0).send();
    await waitForRender();
  }

  const scratch = document.getElementById("scratch");

  function makeTarget(t, childTag = "button") {
    const parent = document.createElement("div");
    parent.className = "parent";
    const child = document.createElement(childTag);
    child.className = "target";
    child.append(childTag === "span" ? "some text" : "target");
    parent.append(child);
    scratch.append(parent);
    t.add_cleanup(() => parent.remove());
    return { parent, child };
  }

  const downEvents = ["pointerdown", "mousedown"];

  for (const downEvent of downEvents) {
    promise_test(async (t) => {
      t.add_cleanup(resetPointer);
      const { child: target } = makeTarget(t);
      await waitForRender();

      let matched = null;
      target.addEventListener(
        downEvent,
        () => {
          matched = target.matches(":active");
        },
        { signal: t.signal },
      );

      await click(target);
      assert_true(
        matched,
        `target matches :active synchronously inside its ${downEvent} listener`,
      );
    }, `Clicked element matches :active within its ${downEvent} listener`);

    promise_test(async (t) => {
      t.add_cleanup(resetPointer);
      const { parent, child: target } = makeTarget(t);
      await waitForRender();

      let matched = null;
      target.addEventListener(
        downEvent,
        () => {
          matched = parent.matches(":active");
        },
        { signal: t.signal },
      );

      await click(target);
      assert_true(
        matched,
        `ancestor matches :active within the ${downEvent} listener of a descendant`,
      );
    }, `Ancestor of clicked element matches :active within ${downEvent} listener`);

    promise_test(async (t) => {
      t.add_cleanup(resetPointer);
      const { parent, child: textTarget } = makeTarget(t, "span");
      await waitForRender();

      let matched = null;
      parent.addEventListener(
        downEvent,
        () => {
          matched = parent.matches(":active");
        },
        { signal: t.signal },
      );

      await click(textTarget);
      assert_true(
        matched,
        `parent element matches :active when a text node is the press target (${downEvent})`,
      );
    }, `Text node press target activates its parent element (${downEvent})`);

    promise_test(async (t) => {
      t.add_cleanup(resetPointer);
      const { child: target } = makeTarget(t);
      await waitForRender();

      let matchedDuringPress = null;
      target.addEventListener(
        downEvent,
        (e) => {
          e.preventDefault();
          matchedDuringPress = target.matches(":active");
        },
        { signal: t.signal },
      );

      await click(target);
      await waitForRender();

      assert_true(
        matchedDuringPress,
        `target matches :active even when the ${downEvent} listener calls preventDefault()`,
      );
      assert_false(
        target.matches(":active"),
        `target is no longer :active after release even when ${downEvent} calls preventDefault()`,
      );
    }, `:active applies on press and clears on release with preventDefault() on ${downEvent}`);
  }

  promise_test(async (t) => {
    t.add_cleanup(resetPointer);
    const { child: target } = makeTarget(t);
    await waitForRender();

    let matchedWhileHeld = null;
    target.addEventListener(
      "pointerdown",
      () => {
        matchedWhileHeld = target.matches(":active");
      },
      { signal: t.signal },
    );

    await click(target);
    await waitForRender();

    assert_true(
      matchedWhileHeld,
      "target matches :active while the pointer is held down",
    );
    assert_false(
      target.matches(":active"),
      "target no longer matches :active after the pointer is released",
    );
  }, ":active is set while held and cleared after the pointer is released");

  const upEvents = ["pointerup", "mouseup"];

  for (const upEvent of upEvents) {
    promise_test(async (t) => {
      t.add_cleanup(resetPointer);
      const { child: target } = makeTarget(t);
      await waitForRender();

      let matchedDuringUp = null;
      target.addEventListener(
        upEvent,
        () => {
          matchedDuringUp = target.matches(":active");
        },
        { signal: t.signal },
      );

      await click(target);
      await waitForRender();

      assert_false(
        matchedDuringUp,
        `target no longer matches :active synchronously inside its ${upEvent} listener`,
      );
      assert_false(
        target.matches(":active"),
        `target no longer matches :active after ${upEvent} handling completes`,
      );
    }, `Clicked element no longer matches :active within its ${upEvent} listener`);

    promise_test(async (t) => {
      t.add_cleanup(resetPointer);
      const { child: target } = makeTarget(t);
      await waitForRender();

      target.addEventListener(upEvent, (e) => e.preventDefault(), {
        signal: t.signal,
      });

      let matchedWhileHeld = null;
      target.addEventListener(
        "pointerdown",
        () => {
          matchedWhileHeld = target.matches(":active");
        },
        { signal: t.signal },
      );

      await click(target);
      await waitForRender();

      assert_true(
        matchedWhileHeld,
        "target is :active while the pointer is held down",
      );
      assert_false(
        target.matches(":active"),
        `target is no longer :active after release even when ${upEvent} calls preventDefault()`,
      );
    }, `:active is cleared on release even when ${upEvent} listener calls preventDefault()`);
  }

  promise_test(async (t) => {
    t.add_cleanup(resetPointer);
    const { child: target } = makeTarget(t);
    await waitForRender();

    let matchedDuringMove = null;
    target.addEventListener(
      "pointermove",
      () => {
        matchedDuringMove = target.matches(":active");
      },
      { signal: t.signal },
    );

    await click(target, "LEFT", { moveWithin: true });
    await waitForRender();

    assert_true(
      matchedDuringMove,
      "target still matches :active while the held pointer moves within it",
    );
  }, ":active persists while the held pointer moves within the target");

  promise_test(async (t) => {
    t.add_cleanup(resetPointer);
    const { child: target } = makeTarget(t);
    await waitForRender();

    let matchedDuringClick = null;
    target.addEventListener(
      "click",
      () => {
        matchedDuringClick = target.matches(":active");
      },
      { signal: t.signal },
    );

    await click(target);
    await waitForRender();

    assert_false(
      matchedDuringClick,
      "target no longer matches :active inside its click listener",
    );
  }, "Clicked element no longer matches :active within its click listener");

  for (const button of ["RIGHT", "MIDDLE"]) {
    promise_test(async (t) => {
      t.add_cleanup(resetPointer);
      const { child: target } = makeTarget(t);
      await waitForRender();

      let matchedWhileHeld = null;
      target.addEventListener(
        "pointerdown",
        () => {
          matchedWhileHeld = target.matches(":active");
        },
        { signal: t.signal },
      );

      await click(target, button);
      await waitForRender();

      assert_true(
        matchedWhileHeld,
        `target matches :active for a ${button.toLowerCase()}-button press`,
      );
      assert_false(
        target.matches(":active"),
        `target no longer matches :active after the ${button.toLowerCase()}-button release`,
      );
    }, `Non-primary (${button.toLowerCase()}) button press activates :active`);
  }
</script>