layout/base/tests/test_event_target_radius.html
author Boris Zbarsky <bzbarsky@mit.edu>
Tue, 20 Mar 2018 00:16:06 -0400
changeset 408949 3073cf6d1124f9427bd8fb71f1a6478202a6baa6
parent 391743 ab20e3b3ef7bbfe7d910f3c79028318cb14bf149
child 469640 c9c0c6f2eed54a187e124942e53c3660b4cf17d8
permissions -rw-r--r--
Bug 1446711 part 7. Switch the nsIDOMMouseEvent::MOZ_SOURCE_* constants over to MouseEventBinding. r=qdot We can't include MouseEventBinding.h in MouseEvents.h because that produces this include loop: MouseEventBinding.h -> UIEventBinding.h -> nsGlobalWindow.h -> nsGlobalWindowInner.h -> nsRefreshDriver.h -> AnimationEventDispatcher.h -> AnimationComparator.h -> Animation.h -> EffectCompositor.h -> PseudoElementHashEntry.h -> Element.h -> PointerEventHandler.h -> MouseEvents.h -> MouseEventBinding.h MozReview-Commit-ID: 6FNksGil7uD

<!DOCTYPE HTML>
<html id="html" style="height:100%">
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=780847
-->
<head>
  <title>Test radii for mouse events</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style>
  .target { position:absolute; left:100px; top:100px; width:100px; height:100px; background:blue; }
  </style>
</head>
<body id="body" onload="setTimeout(startTest, 0)" style="margin:0; width:100%; height:100%; overflow:hidden">
<p id="display"></p>
<div id="content">
  <!-- XXX Though B2G isn't supported anymore, we probably want to keep this
       test's B2G special-cases around, and just make them apply to Android.
       (We may need to do so, for this test to be runnable on Android...?)
       See bug 1355206 for more.
  -->
  <!-- the iframe holding this test is only 300px tall on B2G, so we need to
       make the t target shorter than normal to test the bottom edge fluffing
  -->
  <div class="target" style="height:80px" id="t" onmousedown="x=1"></div>

  <div class="target" id="t2" hidden></div>

  <input class="target" id="t3_1" hidden></input>
  <a href="#" class="target" id="t3_2" hidden></a>
  <label class="target" id="t3_3" hidden></label>
  <button class="target" id="t3_4" hidden></button>
  <select class="target" id="t3_5" hidden></select>
  <textarea class="target" id="t3_6" hidden></textarea>
  <div role="button" class="target" id="t3_7" hidden></div>
  <div role="key" class="target" id="t3_8" hidden></div>
  <img class="target" id="t3_9" hidden></img>

  <div class="target" style="transform:translate(-80px,0);" id="t4" onmousedown="x=1" hidden></div>

  <div class="target" style="left:0; z-index:1" id="t5_left" onmousedown="x=1" hidden></div>
  <div class="target" style="left:106px;" id="t5_right" onmousedown="x=1" hidden></div>
  <div class="target" style="left:0; top:210px;" id="t5_below" onmousedown="x=1" hidden></div>

  <div class="target" id="t6" onmousedown="x=1" style="width: 300px" hidden>
    <div id="t6_inner" style="position:absolute; left:-40px; top:20px; width:60px; height:60px; background:yellow;"></div>
    <div id="t6_inner_clickable" style="position:absolute; left:-40px; top: 80px; width: 60px; height: 5px; background:red" onmousedown="x=1"></div>
  </div>
  <div id="t6_outer" style="position:absolute; left:360px; top:120px; width:60px; height:60px; background:green;" onmousedown="x=1" hidden></div>

  <div class="target" id="t7" onmousedown="x=1" hidden></div>
  <div class="target" id="t7_over" hidden></div>

  <div id="t8" contenteditable="true" class="target" hidden></div>

  <div id="t9" class="target" ontouchend="x=1" hidden></div>

  <div id="t10_left" class="target" style="left:-50px;" onmousedown="x=1" hidden></div>
  <div id="t10_right" class="target" style="left:auto;right:-50px" onmousedown="x=1" hidden></div>
  <div id="t10_top" class="target" style="top:-50px;" onmousedown="x=1" hidden></div>
  <div id="t10_bottom" class="target" style="top:auto;bottom:-50px;" onmousedown="x=1" hidden></div>
  <div id="t10_over" style="position:absolute; left:0; top:0; width:100%; height:100%; background:yellow;" hidden></div>
</div>
<pre id="test">
<script type="application/javascript">
function startTest() {
  SpecialPowers.pushPrefEnv({"set": [["ui.mouse.radius.enabled", true],
                                     ["ui.mouse.radius.inputSource.touchOnly", false],
                                     ["ui.mouse.radius.leftmm", 12],
                                     ["ui.mouse.radius.topmm", 8],
                                     ["ui.mouse.radius.rightmm", 4],
                                     ["ui.mouse.radius.bottommm", 4],
                                     ["ui.mouse.radius.visitedweight", 50]]}, runTest);
}


SimpleTest.waitForExplicitFinish();

function endTest() {
  SimpleTest.finish();
}

var eventTarget;
window.onmousedown = function(event) { eventTarget = event.target; };

function testMouseClick(idPosition, dx, dy, idTarget, msg, options) {
  eventTarget = null;
  synthesizeMouse(document.getElementById(idPosition), dx, dy, options || {});
  try {
    is(eventTarget.id, idTarget,
       "checking '" + idPosition + "' offset " + dx + "," + dy + " [" + msg + "]");
  } catch (ex) {
    ok(false, "checking '" + idPosition + "' offset " + dx + "," + dy + " [" + msg + "]; got " + eventTarget);
  }
}

function setShowing(id, show) {
  var e = document.getElementById(id);
  e.hidden = !show;
}

var mm;
function runTest() {
  let resolution = 1;
  if (SpecialPowers.Services.appinfo.name == "B2G") {
    // This test runs on B2G as well, zoomed out. Therefore we need to account
    // for the resolution as well, because the fluff area is relative to screen
    // pixels rather than CSS pixels.
    let out = {};
    SpecialPowers.getDOMWindowUtils(window.top).getResolution(out);
    resolution = 1.0 / out.value;
  }
  mm = SpecialPowers.getDOMWindowUtils(window.top).physicalMillimeterInCSSPixels * resolution;
  ok(4*mm >= 10, "WARNING: mm " + mm + " too small in this configuration. Test results will be bogus");

  // Test basic functionality: clicks sufficiently close to the element
  // should be allowed to hit the element. We test points just inside and
  // just outside the edges we set up in the prefs.
  testMouseClick("t", 100 + 13*mm, 10, "body", "basic functionality");
  testMouseClick("t", 100 + 11*mm, 10, "t", "basic functionality");
  testMouseClick("t", 10, 80 + 9*mm, "body", "basic functionality");
  testMouseClick("t", 10, 80 + 7*mm, "t", "basic functionality");
  testMouseClick("t", -5*mm, 10, "body", "basic functionality");
  testMouseClick("t", -3*mm, 10, "t", "basic functionality");
  testMouseClick("t", 10, -5*mm, "body", "basic functionality");
  testMouseClick("t", 10, -3*mm, "t", "basic functionality");

  // When inputSource.touchOnly is true, mouse input is not retargeted.
  SpecialPowers.pushPrefEnv({"set": [["ui.mouse.radius.inputSource.touchOnly", true]]}, test2);
}

function test2() {
  testMouseClick("t", 100 + 11*mm, 10, "body", "disabled for mouse input");
  testMouseClick("t", 100 + 11*mm, 10, "t", "enabled for touch input", {
    inputSource: MouseEvent.MOZ_SOURCE_TOUCH
  });
  testMouseClick("t", 100 + 13*mm, 10, "body", "basic functionality for touch", {
    inputSource: MouseEvent.MOZ_SOURCE_TOUCH
  });
  SpecialPowers.pushPrefEnv({"set": [["ui.mouse.radius.inputSource.touchOnly", false]]}, test3);
}

function test3() {
  setShowing("t", false);

  // Now test the criteria we use to determine which elements are hittable
  // this way.

  setShowing("t2", true);
  var t2 = document.getElementById("t2");
  // Unadorned DIVs are not click radius targets
  testMouseClick("t2", 100 + 11*mm, 10, "body", "unadorned DIV");
  // DIVs with the right event handlers are click radius targets
  t2.onmousedown = function() {};
  testMouseClick("t2", 100 + 11*mm, 10, "t2", "DIV with onmousedown");
  t2.onmousedown = null;
  testMouseClick("t2", 100 + 11*mm, 10, "body", "DIV with onmousedown removed");
  t2.onmouseup = function() {};
  testMouseClick("t2", 100 + 11*mm, 10, "t2", "DIV with onmouseup");
  t2.onmouseup = null;
  t2.onclick = function() {};
  testMouseClick("t2", 100 + 11*mm, 10, "t2", "DIV with onclick");
  t2.onclick = null;
  // Keypresses don't make click radius targets
  t2.onkeypress = function() {};
  testMouseClick("t2", 100 + 11*mm, 10, "body", "DIV with onkeypress");
  t2.onkeypress = null;
  setShowing("t2", false);

  // Now check that certain elements are click radius targets and others are not
  for (var i = 1; i <= 9; ++i) {
    var id = "t3_" + i;
    var shouldHit = i <= 8;
    setShowing(id, true);
    testMouseClick(id, 100 + 11*mm, 10, shouldHit ? id : "body",
                   "<" + document.getElementById(id).tagName + "> element");
    setShowing(id, false);
  }

  // Check that our targeting computations take into account the effects of
  // CSS transforms
  setShowing("t4", true);
  testMouseClick("t4", -1, 10, "t4", "translated DIV");
  setShowing("t4", false);

  // Test the prioritization of multiple targets based on distance to
  // the target.
  setShowing("t5_left", true);
  setShowing("t5_right", true);
  setShowing("t5_below", true);
  testMouseClick("t5_left", 102, 10, "t5_left", "closest DIV is left");
  testMouseClick("t5_left", 102.5, 10, "t5_left",
    "closest DIV to midpoint is left because of its higher z-index");
  testMouseClick("t5_left", 104, 10, "t5_right", "closest DIV is right");
  testMouseClick("t5_left", 10, 104, "t5_left", "closest DIV is left");
  testMouseClick("t5_left", 10, 105, "t5_left",
    "closest DIV to midpoint is left because of its higher z-index");
  testMouseClick("t5_left", 10, 106, "t5_below", "closest DIV is below");
  setShowing("t5_left", false);
  setShowing("t5_right", false);
  setShowing("t5_below", false);

  // Test behavior of nested elements.
  // The following behaviors are questionable and may need to be changed.
  setShowing("t6", true);
  setShowing("t6_outer", true);
  testMouseClick("t6_inner", -1, 10, "t6_inner",
    "inner element is clickable because its parent is, even when it sticks outside parent");
  testMouseClick("t6_inner", 39, -1, "t6_inner",
    "when outside both inner and parent, but in range of both, the inner is selected");
  testMouseClick("t6_inner", 45, -1, "t6_inner",
    "clicking in clickable parent close to inner activates inner, not parent");
  testMouseClick("t6_inner_clickable", 1, -1, "t6_inner",
    "clicking on inner doesn't get redirected to inner_clickable because they are both clickable");
  testMouseClick("t6_inner_clickable", 1, 1, "t6_inner_clickable",
    "clicking on inner_clickable doesn't get redirected to inner because they are both clickable");
  testMouseClick("t6_inner_clickable", 45, -1, "t6_inner",
    "clicking on inner while backed by its parent still doesn't get redirected to inner_clickable");
  testMouseClick("t6_inner_clickable", 45, 1, "t6_inner_clickable",
    "clicking on inner_clickable while backed by its parent still doesn't get redirected to inner");
  testMouseClick("t6_inner_clickable", 45, 6, "t6_inner_clickable",
    "clicking on parent near inner_clickable gets redirected to inner_clickable rather than inner because it is closer");
  // 280 is the distance from t6_inner's right edge to t6's right edge
  // 240 is the distance from t6_inner's right edge to t6_outer's right edge.
  // we want to click on t6, but at least 13mm away from t6_inner, so that
  // t6_inner doesn't steal the click.
  ok(13*mm < 280, "no point inside t6 that's not within radius of t6_inner; adjust layout of t6/inner/outer as needed");
  testMouseClick("t6_outer", -240 + 13*mm, -1, "t6",
    "clicking in clickable container close to outer activates parent, not outer");
  testMouseClick("t6_outer", 1, 1, "t6_outer",
    "clicking directly on the outer activates it");
  setShowing("t6", false);
  setShowing("t6_outer", false);

  setShowing("t7", true);
  setShowing("t7_over", true);
  testMouseClick("t7", 100 + 11*mm, 10, "body", "covered div is not clickable");
  testMouseClick("t7", 10, 10, "t7_over", "covered div is not clickable even within its bounds");
  setShowing("t7", false);
  setShowing("t7_over", false);

  // Check that contenteditable elements are considered clickable for fluffing.
  setShowing("t8", true);
  var rect = document.getElementById("t8").getBoundingClientRect();
  testMouseClick("t8", rect.left + 1, rect.top + 1, "t8", "content editable enabled for mouse input");
  testMouseClick("t8", rect.left + 1, rect.top + 1, "t8", "content editable enabled for touch input", {
    inputSource: MouseEvent.MOZ_SOURCE_TOUCH
  });
  setShowing("t8", false);

  // Check that elements are touchable
  setShowing("t9", true);
  var rect = document.getElementById("t9").getBoundingClientRect();
  testMouseClick("t9", rect.left + 1, rect.top + 1, "t9", "div enabled with mouse input");
  testMouseClick("t9", rect.left + 1, rect.top + 1, "t9", "div enabled with touch input", {
    inputSource: MouseEvent.MOZ_SOURCE_TOUCH
  });
  setShowing("t9", false);

  setShowing("t10_over", true);
  setShowing("t10_left", true);
  setShowing("t10_right", true);
  setShowing("t10_top", true);
  setShowing("t10_bottom", true);
  testMouseClick("t10_left", 51, 10, "t10_over", "element outside of visible area is not selected");
  if (self.frameElement &&
      (self.frameElement.offsetLeft + self.innerWidth >
       SpecialPowers.wrap(top).innerWidth)) {
    info("WARNING: Window is too narrow, can't test t10_right");
  } else {
    testMouseClick("t10_right", 49, 10, "t10_over", "element outside of visible area is not selected");
  }
  testMouseClick("t10_top", 10, 51, "t10_over", "element outside of visible area is not selected");
  if (self.frameElement &&
      (self.frameElement.offsetTop + self.innerHeight >
       SpecialPowers.wrap(top).innerHeight)) {
    info("WARNING: Window is too short, can't test t10_bottom");
  } else {
    testMouseClick("t10_bottom", 10, 49, "t10_over", "element outside of visible area is not selected");
  }
  setShowing("t10_over", false);
  setShowing("t10_left", false);
  setShowing("t10_right", false);
  setShowing("t10_top", false);
  setShowing("t10_bottom", false);

  // Not yet tested:
  // -- visited link weight
  // -- "Closest" using Euclidean distance
  endTest();
}
</script>
</pre>
</body>
</html>