mousemove_after_mouseover_target_removed.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /uievents/mouse/mousemove_after_mouseover_target_removed.html - WPT Dashboard Interop Dashboard

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>`mousemove` should be fired on the last deepest `mouseenter` target</title>

<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>

<script>

"use strict";

addEventListener("DOMContentLoaded", () => {

  const grandparentDiv = document.getElementById("grandparent");

  let parentDiv = document.getElementById("parent");

  let childDiv = document.getElementById("child");

  promise_test(async () => {

    const childRect = childDiv.getBoundingClientRect();

    let mouseMoveTarget;

    childDiv.addEventListener("mouseover", () => {

      childDiv.remove();

      grandparentDiv.addEventListener("mousemove", event => {

        mouseMoveTarget = event.target;

      }, {once: true});

    }, {once: true});

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      // mousemove will be fired after mouseover removes the child.

      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})

      .send();

    assert_equals(mouseMoveTarget, parentDiv);

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      .send();

    parentDiv.appendChild(childDiv);

  }, `"mousemove" should be fired on the parent of "mouseover" target which was removed at "mouseover"`);

  promise_test(async () => {

    const childRect = childDiv.getBoundingClientRect();

    let mouseMoveTarget;

    childDiv.addEventListener("mouseover", () => {

      childDiv.outerHTML = childDiv.outerHTML;

      childDiv = parentDiv.querySelector("div");

      grandparentDiv.addEventListener("mousemove", event => {

        mouseMoveTarget = event.target;

      }, {once: true});

    }, {once: true});

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      // mousemove will be fired after mouseover replaces the child.

      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})

      .send();

    assert_equals(mouseMoveTarget, parentDiv);

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      .send();

  }, `"mousemove" should be fired on the parent of "mouseover" target which was replaced at "mouseover" (rather than new child)`);

  promise_test(async () => {

    const childRect = childDiv.getBoundingClientRect();

    let mouseMoveTarget;

    childDiv.addEventListener("mouseover", () => {

      parentDiv.remove();

      grandparentDiv.addEventListener("mousemove", event => {

        mouseMoveTarget = event.target;

      }, {once: true});

    }, {once: true});

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      // mousemove will be fired after mouseover removes the child.

      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})

      .send();

    assert_equals(mouseMoveTarget, grandparentDiv);

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      .send();

    grandparentDiv.appendChild(parentDiv);

  }, `"mousemove" should be fired on the grandparent of "mouseover" target which was removed at "mouseover" with the parent`);

  promise_test(async () => {

    const childRect = childDiv.getBoundingClientRect();

    let mouseMoveTarget;

    childDiv.addEventListener("mouseover", () => {

      parentDiv.outerHTML = parentDiv.outerHTML;

      parentDiv = grandparentDiv.querySelector("div");

      grandparentDiv.addEventListener("mousemove", event => {

        mouseMoveTarget = event.target;

      }, {once: true});

    }, {once: true});

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      // mousemove will be fired after mouseover removes the child.

      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})

      .send();

    assert_equals(mouseMoveTarget, grandparentDiv);

    await new test_driver.Actions()

      .pointerMove(1, 1, {})

      .send();

  }, `"mousemove" should be fired on the grandparent of "mouseover" target which was replaced at "mouseover" with the parent`);

}, {once: true});

</script>

</head>

<body style="padding-top: 32px">

  <div id="grandparent" style="width: 32px; height: 32px;">

    <div id="parent" style="width: 32px; height: 32px;">

      <div id="child" style="width: 32px; height: 32px;">

      </div>

    </div>

  </div>

</body>

</html>