tor-browser

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

mousemove-between.html (3606B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>Mousemove handling between 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  height: 120px;
     13  width: 200px;
     14  background: blue;
     15  display: flex;
     16  justify-content: center;
     17 }
     18 #b {
     19  height: 60px;
     20  width: 100px;
     21  margin: auto;
     22  background: green;
     23 }
     24 #c {
     25  height: 120px;
     26  width: 200px;
     27  background: yellow;
     28 }
     29 </style>
     30 <p>
     31  Steps:
     32 
     33  <ol>
     34    <li>Move your mouse over the blue <code>&lt;div&gt;</code> element, later
     35      over the green one, later back to the blue one.
     36    <li>Move the mouse from the blue element to the yellow one, later to the
     37      white background.
     38  </ol>
     39 </p>
     40 
     41 
     42 <div id="a">
     43  <div id="b" align="center"></div>
     44 </div>
     45 <div id="c"></div>
     46 
     47 <script>
     48 setup({explicit_timeout: true});
     49 
     50 var relevantEvents = [
     51  "mousemove",
     52  "mouseover",
     53  "mouseenter",
     54  "mouseout",
     55  "mouseleave"
     56 ];
     57 
     58 function stopPropagation(e) {
     59  if (e.type != "mouseenter" && e.type != "mouseleave")
     60    assert_true(e.bubbles);
     61  event.stopPropagation();
     62 }
     63 
     64 window.onload = async function() {
     65  var a = document.getElementById("a");
     66  var b = document.getElementById("b");
     67  var c = document.getElementById("c");
     68  var inputs = [a, b, c];
     69  EventRecorder.configure({
     70      mergeEventTypes: ["mousemove"],
     71      objectMap: {
     72         "a": a,
     73         "b": b,
     74         "c": c
     75      }
     76    });
     77  EventRecorder.addEventListenersForNodes(relevantEvents, inputs, stopPropagation);
     78  var expected = [
     79    {type: "mouseover", target: "a"},
     80    {type: "mouseenter", target: "a"},
     81    {type: "mousemove", target: "a", optional: true},
     82    {type: "mouseout", target: "a"},
     83    {type: "mouseover", target: "b"},
     84    {type: "mouseenter", target: "b"},
     85    {type: "mousemove", target: "b", optional: true},
     86    {type: "mouseout", target: "b"},
     87    {type: "mouseleave", target: "b"},
     88    {type: "mouseover", target: "a"},
     89    {type: "mousemove", target: "a", optional: true},
     90    {type: "mouseout", target: "a"},
     91    {type: "mouseleave", target: "a"},
     92    {type: "mouseover", target: "c"},
     93    {type: "mouseenter", target: "c"},
     94    {type: "mousemove", target: "c", optional: true},
     95    {type: "mouseout", target: "c"},
     96    {type: "mouseleave", target: "c"}
     97  ];
     98  async_test(function(t) {
     99    c.addEventListener("mouseleave", function() {
    100      EventRecorder.stop();
    101      t.step(function() {
    102        assert_true(EventRecorder.checkRecords(expected));
    103        t.done();
    104      });
    105    }, false);
    106  }, "Mousemove events between elements should fire in the correct order.");
    107  EventRecorder.start();
    108 
    109  var a_rect = a.getClientRects()[0];
    110  var b_rect = b.getClientRects()[0];
    111  var c_rect = c.getClientRects()[0];
    112  var center_b_y = Math.round((b_rect.top + b_rect.bottom) / 2);
    113  var center_c_y = Math.round((c_rect.top + c_rect.bottom) / 2);
    114 
    115  // Inject mouse inputs.
    116  await new test_driver.Actions()
    117      .pointerMove(b_rect.right + 10, center_b_y)
    118      .pause(50)
    119      .pointerMove(0, 0, {origin: b})
    120      .pause(50)
    121      .pointerMove(b_rect.right + 10, center_b_y)
    122      .pause(50)
    123      .pointerMove(a_rect.right + 10, center_b_y)
    124      .pause(50)
    125      .pointerMove(c_rect.right + 10, center_c_y)
    126      .pause(50)
    127      .pointerMove(0, 0, {origin: c})
    128      .pause(50)
    129      .pointerMove(c_rect.right + 20, c_rect.bottom + 20)
    130      .send();
    131 };
    132 </script>