third_party/WebKit/LayoutTests/fast/events/touch/gesture/tap-target-matches-active.html

   1 <!DOCTYPE html>
   2 <script src="../../../../resources/js-test.js"></script>
   3 <script src="../resources/touch-hover-active-tests.js"></script>
   4 <link rel="stylesheet" href="../resources/touch-hover-active-tests.css">
   5 <style>
   6 #target {
   7   position: absolute;
   8   height: 100px;
   9   left: 50px;
  10   top: 100px;
  11   width: 20px;
  12 }
  13
  14 #clip {
  15   position: absolute;
  16   top: 110px;
  17   left: 0;
  18   width: 50px;
  19   height: 80px;
  20   overflow: hidden;
  21 }
  22
  23 #fakeTarget {
  24   width: 150px;
  25   height: 150px;
  26   background-color: lightblue;
  27 }
  28
  29 #console {
  30   margin-top: 200px;
  31 }
  32 </style>
  33
  34 <div id=target class=touch-interactive></div>
  35 <div id=clip>
  36   <div id=fakeTarget class=touch-interactive></div>
  37 </div>
  38
  39 <div id=console></div>
  40
  41 </style>
  42 <script>
  43 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");
  44
  45 var clickTarget;
  46 document.addEventListener('click', function(e) {
  47     if (clickTarget)
  48         testFailed('Saw unexpected duplicate click event');
  49     clickTarget = e.target;
  50 });
  51
  52 var rect = target.getBoundingClientRect();
  53 var x = rect.left + rect.width / 2;
  54 var y = rect.top + rect.height / 2;
  55
  56 debug('Sending gestureTapDown');
  57 eventSender.gestureTapDown(x, y, 30, 30);
  58 shouldBeDefault('getHoverActiveState(target)');
  59
  60 debug('Sending gestureShowPress');
  61 eventSender.gestureShowPress(x, y, 30, 30);
  62 shouldBeHoveredAndActive('getHoverActiveState(target)');
  63
  64 debug('Sending gestureTap');
  65 eventSender.gestureTap(x, y, 1, 30, 30);
  66 shouldBeEqualToString("clickTarget.id", "target");
  67
  68 </script>