tor-browser

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

mouseover-out.html (3585B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>Mouseover/mouseout handling</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 <style>
     10 #outer,
     11 #inner,
     12 #released {
     13  padding: 10px;
     14  margin: 10px;
     15  height: 15px;
     16 }
     17 
     18 #outer:hover,
     19 #inner:hover,
     20 #released:hover {
     21  background: red;
     22 }
     23 
     24 #outer {
     25  background: blue;
     26 }
     27 
     28 #inner {
     29  background: green;
     30 }
     31 
     32 #released {
     33  background: yellow;
     34 }
     35 </style>
     36 <p>
     37  Steps:
     38 
     39  <ol>
     40    <li>Move your mouse over the blue <code>&lt;div&gt;</code> element, later
     41      over the green one, later over the yellow one.
     42    <li>Move the mouse from the yellow element to the green one, later to the
     43      blue one, and later over this paragraph.
     44  </ol>
     45 </p>
     46 
     47 
     48 <div id="outer">
     49  <div id="inner"></div>
     50 </div>
     51 <div id="released"></div>
     52 
     53 <div id="log"></div>
     54 
     55 <script>
     56 var t = async_test("Mouseover/out events");
     57 var outer = document.getElementById("outer");
     58 var inner = document.getElementById("inner");
     59 var actions_promise;
     60 
     61 var inner_over = 0;
     62 var inner_out = 0;
     63 
     64 var outer_own_over = 0;
     65 var outer_own_out = 0;
     66 var outer_over = 0;
     67 var outer_out = 0;
     68 
     69 inner.addEventListener("mouseover", t.step_func(function(e) {
     70  assert_equals(inner_over, inner_out, "mouseover is received before mouseout");
     71 
     72  switch (inner_over) {
     73    case 0:
     74      assert_equals(outer_own_over, 1, "should have triggered a mouseover in the outer before");
     75      break;
     76    case 1:
     77      assert_equals(outer_own_over, 1, "should have not triggered a mouseover in the outer before");
     78      break;
     79    default:
     80      assert_true(false, "should not get more than two mouseovers");
     81  }
     82 
     83  inner_over++;
     84 }), false);
     85 
     86 inner.addEventListener("mouseout", t.step_func(function(e) {
     87  assert_equals(inner_over, inner_out + 1, "mouseout is received after mouseover");
     88 
     89  switch (inner_out) {
     90    case 0:
     91      assert_equals(outer_own_out, 1, "mouseout should have been received in the parent when hovering over this element");
     92      break;
     93    case 1:
     94      break;
     95    default:
     96      assert_true(false, "should not get more than two mouseouts");
     97  }
     98 
     99  inner_out++;
    100 }), false);
    101 
    102 outer.addEventListener("mouseover", t.step_func(function(e) {
    103  if (e.target == outer) {
    104    assert_equals(outer_own_over, outer_own_out, "outer: mouseover is received before mouseout");
    105    outer_own_over++;
    106  } else {
    107    assert_equals(outer_over - outer_own_over, inner_over - 1, "mouseover: should only receive this via bubbling");
    108  }
    109 
    110  outer_over++;
    111 }), false);
    112 
    113 outer.addEventListener('mouseout', t.step_func(function(e) {
    114  if (e.target == outer) {
    115    assert_equals(outer_own_over, outer_own_out + 1, "outer: mouseout is received after mouseover");
    116    if (outer_own_out == 1) {
    117      assert_equals(inner_out, 2, "inner should be done now");
    118      // Make sure the test finishes after all the input actions are completed.
    119      actions_promise.then( () => {
    120        t.done();
    121      });
    122    }
    123 
    124    outer_own_out++;
    125  } else {
    126    assert_equals(outer_out - outer_own_out, inner_out - 1, "mouseout: should only receive this via bubbling");
    127  }
    128 
    129  outer_out++;
    130 }), false);
    131 
    132 // Inject mouse inputs.
    133 actions_promise = new test_driver.Actions()
    134    .pointerMove(0, 0, {origin: outer})
    135    .pointerMove(0, 0, {origin: inner})
    136    .pointerMove(0, 0, {origin: released})
    137    .pointerMove(0, 0, {origin: inner})
    138    .pointerMove(0, 0, {origin: outer})
    139    .pointerMove(0, 0)
    140    .send();
    141 </script>