tor-browser

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

mousemove-across.html (4608B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>Mousemove handling across elements</title>
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/resources/testdriver.js"></script>
      7 <script src="/resources/testdriver-actions.js"></script>
      8 <script src="/resources/testdriver-vendor.js"></script>
      9 <script src="/uievents/resources/eventrecorder.js"></script>
     10 <style>
     11 #a {
     12  background: red;
     13  height: 120px;
     14  width: 200px;
     15 }
     16 #b {
     17  margin: 100px;
     18  height: 120px;
     19  width: 200px;
     20  background: green;
     21 }
     22 #c {
     23  height: 120px;
     24  width: 200px;
     25  background: yellow;
     26 }
     27 
     28 #a1 {
     29  background: blue;
     30  height: 120px;
     31  width: 200px;
     32 }
     33 #b1 {
     34  padding: 1px;
     35  margin: 100px;
     36  height: 120px;
     37  width: 200px;
     38  background: green;
     39 }
     40 #c1 {
     41  height: 120px;
     42  width: 200px;
     43  background: black;
     44 }
     45 </style>
     46 <p>
     47  Steps:
     48  <ol>
     49    <li>Move your mouse across the yellow/red <code>&lt;div&gt;</code> element quickly from right to left.
     50    <li>Move your mouse across the black/blue <code>&lt;div&gt;</code> element quickly from right to left.
     51    <li>If the test fails, redo it again and move faster on the black/blue <code>&lt;div&gt;</code> element next time.
     52  </ol>
     53 </p>
     54 
     55 <div id="c">
     56  <div id="b">
     57    <div id="a" align="center"></div>
     58  </div>
     59 </div>
     60 <br />
     61 <div id="c1">
     62  <div id="b1">
     63    <div id="a1" align="center"></div>
     64  </div>
     65 </div>
     66 
     67 <script>
     68 setup({explicit_timeout: true});
     69 var relevantEvents = [
     70  "mousemove",
     71  "mouseover",
     72  "mouseenter",
     73  "mouseout",
     74  "mouseleave"
     75 ];
     76 
     77 function stopPropagation(e) {
     78  event.stopPropagation();
     79 }
     80 
     81 window.onload = async function() {
     82  var a = document.getElementById("a");
     83  var b = document.getElementById("b");
     84  var c = document.getElementById("c");
     85  var a1 = document.getElementById("a1");
     86  var b1 = document.getElementById("b1");
     87  var c1 = document.getElementById("c1");
     88  var inputs = [a, b, c, a1, b1, c1];
     89  EventRecorder.configure({
     90      mergeEventTypes: ["mousemove"],
     91      objectMap: {
     92         "a": a,
     93         "b": b,
     94         "c": c,
     95         "a1": a1,
     96         "b1": b1,
     97         "c1": c1
     98      }
     99    });
    100  EventRecorder.addEventListenersForNodes(relevantEvents, inputs, stopPropagation);
    101  var expected = [
    102    {type: "mouseover", target: "a"},
    103    {type: "mouseenter", target: "c"},
    104    {type: "mouseenter", target: "b"},
    105    {type: "mouseenter", target: "a"},
    106    {type: "mousemove", target: "a", optional: true},
    107    {type: "mouseout", target: "a"},
    108    {type: "mouseleave", target: "a"},
    109    {type: "mouseleave", target: "b"},
    110    {type: "mouseover", target: "c"},
    111    {type: "mousemove", target: "c", optional: true},
    112    {type: "mouseout", target: "c"},
    113    {type: "mouseleave", target: "c"},
    114    {type: "mouseover", target: "a1"},
    115    {type: "mouseenter", target: "c1"},
    116    {type: "mouseenter", target: "b1"},
    117    {type: "mouseenter", target: "a1"},
    118    {type: "mousemove", target: "a1", optional: true},
    119    {type: "mouseout", target: "a1"},
    120    {type: "mouseleave", target: "a1"},
    121    {type: "mouseleave", target: "b1"},
    122    {type: "mouseover", target: "c1"},
    123    {type: "mousemove", target: "c1", optional: true},
    124    {type: "mouseout", target: "c1"},
    125    {type: "mouseleave", target: "c1"},
    126  ];
    127  async_test(function(t) {
    128    c1.addEventListener("mouseleave", function() {
    129      t.step(function() {
    130        assert_true(EventRecorder.checkRecords(expected));
    131        t.done();
    132      });
    133    }, false);
    134  }, "Mousemove events across elements should fire in the correct order.");
    135  EventRecorder.start();
    136 
    137  var a_rect = a.getClientRects()[0];
    138  var c_rect = c.getClientRects()[0];
    139  var center_a_x = Math.round((a_rect.left + a_rect.right) / 2);
    140  var center_a_y = Math.round((a_rect.top + a_rect.bottom) / 2);
    141 
    142  var a1_rect = a1.getClientRects()[0];
    143  var c1_rect = c1.getClientRects()[0];
    144  var center_a1_x = Math.round((a1_rect.left + a1_rect.right) / 2);
    145  var center_a1_y = Math.round((a1_rect.top + a1_rect.bottom) / 2);
    146  // Inject mouse inputs.
    147  await new test_driver.Actions()
    148      .pointerMove(a_rect.right + 20, center_a_y)
    149      .pointerMove(center_a_x, center_a_y)
    150      .pointerMove(a_rect.left + 20, center_a_y)
    151      .pointerMove(a_rect.left - 20, center_a_y)
    152      .pointerMove(c_rect.left + 20, center_a_y)
    153      .pointerMove(0, center_a_y)
    154      .pointerMove(a1_rect.right + 20, center_a1_y)
    155      .pointerMove(center_a1_x, center_a1_y)
    156      .pointerMove(a1_rect.left + 20, center_a1_y)
    157      .pointerMove(a1_rect.left - 20, center_a1_y)
    158      .pointerMove(c1_rect.left + 20, center_a1_y)
    159      .pointerMove(0, center_a1_y)
    160      .send();
    161 };
    162 </script>