tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

mousemove_after_mouseover_target_removed.html (4547B)

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6 <title>`mousemove` should be fired on the last deepest `mouseenter` target</title>
      7 <script src=/resources/testharness.js></script>
      8 <script src=/resources/testharnessreport.js></script>
      9 <script src=/resources/testdriver.js></script>
     10 <script src=/resources/testdriver-actions.js></script>
     11 <script src=/resources/testdriver-vendor.js></script>
     12 <script>
     13 "use strict";
     14 
     15 addEventListener("DOMContentLoaded", () => {
     16  const grandparentDiv = document.getElementById("grandparent");
     17  let parentDiv = document.getElementById("parent");
     18  let childDiv = document.getElementById("child");
     19 
     20  promise_test(async () => {
     21    const childRect = childDiv.getBoundingClientRect();
     22    let mouseMoveTarget;
     23    childDiv.addEventListener("mouseover", () => {
     24      childDiv.remove();
     25      grandparentDiv.addEventListener("mousemove", event => {
     26        mouseMoveTarget = event.target;
     27      }, {once: true});
     28    }, {once: true});
     29    await new test_driver.Actions()
     30      .pointerMove(1, 1, {})
     31      // mousemove will be fired after mouseover removes the child.
     32      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})
     33      .send();
     34    assert_equals(mouseMoveTarget, parentDiv);
     35    await new test_driver.Actions()
     36      .pointerMove(1, 1, {})
     37      .send();
     38    parentDiv.appendChild(childDiv);
     39  }, `"mousemove" should be fired on the parent of "mouseover" target which was removed at "mouseover"`);
     40 
     41  promise_test(async () => {
     42    const childRect = childDiv.getBoundingClientRect();
     43    let mouseMoveTarget;
     44    childDiv.addEventListener("mouseover", () => {
     45      childDiv.outerHTML = childDiv.outerHTML;
     46      childDiv = parentDiv.querySelector("div");
     47      grandparentDiv.addEventListener("mousemove", event => {
     48        mouseMoveTarget = event.target;
     49      }, {once: true});
     50    }, {once: true});
     51    await new test_driver.Actions()
     52      .pointerMove(1, 1, {})
     53      // mousemove will be fired after mouseover replaces the child.
     54      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})
     55      .send();
     56    assert_equals(mouseMoveTarget, parentDiv);
     57    await new test_driver.Actions()
     58      .pointerMove(1, 1, {})
     59      .send();
     60  }, `"mousemove" should be fired on the parent of "mouseover" target which was replaced at "mouseover" (rather than new child)`);
     61 
     62  promise_test(async () => {
     63    const childRect = childDiv.getBoundingClientRect();
     64    let mouseMoveTarget;
     65    childDiv.addEventListener("mouseover", () => {
     66      parentDiv.remove();
     67      grandparentDiv.addEventListener("mousemove", event => {
     68        mouseMoveTarget = event.target;
     69      }, {once: true});
     70    }, {once: true});
     71    await new test_driver.Actions()
     72      .pointerMove(1, 1, {})
     73      // mousemove will be fired after mouseover removes the child.
     74      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})
     75      .send();
     76    assert_equals(mouseMoveTarget, grandparentDiv);
     77    await new test_driver.Actions()
     78      .pointerMove(1, 1, {})
     79      .send();
     80    grandparentDiv.appendChild(parentDiv);
     81  }, `"mousemove" should be fired on the grandparent of "mouseover" target which was removed at "mouseover" with the parent`);
     82 
     83  promise_test(async () => {
     84    const childRect = childDiv.getBoundingClientRect();
     85    let mouseMoveTarget;
     86    childDiv.addEventListener("mouseover", () => {
     87      parentDiv.outerHTML = parentDiv.outerHTML;
     88      parentDiv = grandparentDiv.querySelector("div");
     89      grandparentDiv.addEventListener("mousemove", event => {
     90        mouseMoveTarget = event.target;
     91      }, {once: true});
     92    }, {once: true});
     93    await new test_driver.Actions()
     94      .pointerMove(1, 1, {})
     95      // mousemove will be fired after mouseover removes the child.
     96      .pointerMove(childRect.x + childRect.width / 2, childRect.y + childRect.height / 2, {})
     97      .send();
     98    assert_equals(mouseMoveTarget, grandparentDiv);
     99    await new test_driver.Actions()
    100      .pointerMove(1, 1, {})
    101      .send();
    102  }, `"mousemove" should be fired on the grandparent of "mouseover" target which was replaced at "mouseover" with the parent`);
    103 }, {once: true});
    104 
    105 </script>
    106 </head>
    107 <body style="padding-top: 32px">
    108  <div id="grandparent" style="width: 32px; height: 32px;">
    109    <div id="parent" style="width: 32px; height: 32px;">
    110      <div id="child" style="width: 32px; height: 32px;">
    111      </div>
    112    </div>
    113  </div>
    114 </body>
    115 </html>