third_party/WebKit/LayoutTests/fast/events/click-over-descendant-elements.html

   1 <!DOCTYPE html>
   2 <body>
   3 <script src="../../resources/js-test.js"></script>
   4 <style>
   5 body {
   6     margin: 0;
   7     padding: 0;
   8     -webkit-user-select: none;
   9 }
  10
  11 #container {
  12     padding: 40px;
  13 }
  14
  15 #inner1, #inner2 {
  16     height: 40px;
  17 }
  18
  19 #button1 {
  20     padding-top: 4px;
  21 }
  22 #button1:active {
  23     padding-top: 40px;
  24 }
  25 </style>
  26 <div id="container">
  27 <div id="inner1"></div>
  28 <div id="inner2"></div>
  29 </div>
  30 <button id="button1"><span id="button-span">Click me</span></button>
  31 <input id="input1" value="A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.">
  32 <!-- Avoid to create a console element before the above elements -->
  33 <div id="console"></div>
  34 <script>
  35 description('Check if any mousedown-mouseup pairs in one element dispatch click events.');
  36 if (window.eventSender)
  37     debug('This test needs to run in a test environment.');
  38
  39 var container = document.getElementById('container');
  40 var containerRect = container.getBoundingClientRect();
  41 var inner1 = document.getElementById('inner1');
  42 var inner1Rect = inner1.getBoundingClientRect();
  43 var inner2 = document.getElementById('inner2');
  44 var inner2Rect = inner2.getBoundingClientRect();
  45 var x = (containerRect.left + containerRect.right) / 2;
  46 var inContainer = (containerRect.top + inner1Rect.top) / 2;
  47 var inInner1 = (inner1Rect.top + inner1Rect.bottom) / 2;
  48 var inInner2 = (inner2Rect.top + inner2Rect.bottom) / 2;
  49
  50 var lastClickTarget = null;
  51 document.addEventListener('click', function(event) {
  52     lastClickTarget = event.target;
  53 }, false);
  54
  55 debug('Very normal click on container:');
  56 eventSender.mouseMoveTo(x, inContainer);
  57 eventSender.mouseDown();
  58 eventSender.mouseUp();
  59 shouldBe('lastClickTarget', 'container');
  60 lastClickTarget = null;
  61
  62 debug('Move inside container:');
  63 eventSender.mouseMoveTo(x, inContainer);
  64 eventSender.mouseDown();
  65 eventSender.mouseMoveTo(x + 10, inContainer);
  66 eventSender.mouseUp();
  67 shouldBe('lastClickTarget', 'container');
  68 lastClickTarget = null;
  69
  70 debug('Move from container to a child:');
  71 eventSender.mouseMoveTo(x, inContainer);
  72 eventSender.mouseDown();
  73 eventSender.mouseMoveTo(x, inInner1);
  74 eventSender.mouseUp();
  75 shouldBe('lastClickTarget', 'container');
  76 lastClickTarget = null;
  77
  78 debug('Move from a child to container:');
  79 eventSender.mouseMoveTo(x, inInner1);
  80 eventSender.mouseDown();
  81 eventSender.mouseMoveTo(x, inContainer);
  82 eventSender.mouseUp();
  83 shouldBe('lastClickTarget', 'container');
  84 lastClickTarget = null;
  85
  86 debug('Move from a child to another child:');
  87 eventSender.mouseMoveTo(x, inInner1);
  88 eventSender.mouseDown();
  89 eventSender.mouseMoveTo(x, inInner2);
  90 eventSender.mouseUp();
  91 shouldBe('lastClickTarget', 'container');
  92 lastClickTarget = null;
  93
  94 debug('Move out from a child:');
  95 eventSender.mouseMoveTo(x, inInner1);
  96 eventSender.mouseDown();
  97 eventSender.mouseMoveTo(x, containerRect.bottom + 10);
  98 eventSender.mouseUp();
  99 shouldBe('lastClickTarget', 'document.body');
 100 lastClickTarget = null;
 101
 102 debug('Removing a child element in the light DOM during a click:');
 103 eventSender.mouseMoveTo(x, inInner2);
 104 eventSender.mouseDown();
 105 inner2.remove();
 106 eventSender.mouseUp();
 107 shouldBeNull('lastClickTarget');
 108 lastClickTarget = null;
 109
 110 debug('Click on escaping button content:');
 111 var button1 = document.getElementById("button1");
 112 var spanRect = document.getElementById('button-span').getBoundingClientRect();
 113 eventSender.mouseMoveTo((spanRect.left + spanRect.right) / 2, spanRect.top + 1);
 114 eventSender.mouseDown();
 115 eventSender.mouseUp();
 116 shouldBe('lastClickTarget', 'button1');
 117 lastClickTarget = null;
 118
 119 debug('Click on disappearing INPUT value:');
 120 var input1 = document.getElementById('input1');
 121 input1.addEventListener('focus', function() { input1.value = ""; }, false);
 122 var inputRect = input1.getBoundingClientRect();
 123 eventSender.mouseMoveTo(inputRect.left + 8, (inputRect.top + inputRect.bottom) / 2);
 124 eventSender.mouseDown();
 125 eventSender.mouseUp();
 126 shouldBe('lastClickTarget', 'input1');
 127 lastClickTarget = null;
 128
 129 debug('Mousedown on a form control, and mouseup on an element outside:');
 130 eventSender.mouseMoveTo(inputRect.left + 8, (inputRect.top + inputRect.bottom) / 2);
 131 eventSender.mouseDown();
 132 eventSender.mouseMoveTo((spanRect.left + spanRect.right) / 2, spanRect.top + 1);
 133 eventSender.mouseUp();
 134 shouldBeNull('lastClickTarget');
 135 lastClickTarget = null;
 136
 137 container.remove();
 138 button1.remove();
 139 input1.remove();
 140
 141 </script>
 142 </body>