tap-target-matches-active.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../../resources/js-test.js"></script>
<script src="../resources/touch-hover-active-tests.js"></script>
<link rel="stylesheet" href="../resources/touch-hover-active-tests.css">
<style>
#target {
  position: absolute;
  height: 100px;
  left: 50px;
  top: 100px;
  width: 20px;
}

#clip {
  position: absolute;
  top: 110px;
  left: 0;
  width: 50px;
  height: 80px;
  overflow: hidden;
}

#fakeTarget {
  width: 150px;
  height: 150px;
  background-color: lightblue;
}

#console {
  margin-top: 200px;
}
</style>

<div id=target class=touch-interactive></div>
<div id=clip>
  <div id=fakeTarget class=touch-interactive></div>
</div>

<div id=console></div>

</style>
<script>
description("Verifies that the element receiving the :active style is the same as the element receiving the click event, even in the presence of difficult touch adjustment scenarios");

var clickTarget;
document.addEventListener('click', function(e) {
    if (clickTarget)
        testFailed('Saw unexpected duplicate click event');
    clickTarget = e.target;
});

var rect = target.getBoundingClientRect();
var x = rect.left + rect.width / 2;
var y = rect.top + rect.height / 2;

debug('Sending gestureTapDown');
eventSender.gestureTapDown(x, y, 30, 30);
shouldBeDefault('getHoverActiveState(target)');

debug('Sending gestureShowPress');
eventSender.gestureShowPress(x, y, 30, 30);
shouldBeHoveredAndActive('getHoverActiveState(target)');

debug('Sending gestureTap');
eventSender.gestureTap(x, y, 1, 30, 30);
shouldBeEqualToString("clickTarget.id", "target");

</script>
chromium/third_party/blink/web_tests/fast/events/touch/gesture/tap-target-matches-active.html
