| <!DOCTYPE html> |
| <body> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| -webkit-user-select: none; |
| } |
| |
| #container { |
| padding: 40px; |
| } |
| |
| #inner1, #inner2 { |
| height: 40px; |
| } |
| |
| #button1 { |
| padding-top: 4px; |
| } |
| #button1:active { |
| padding-top: 40px; |
| } |
| </style> |
| <div id="container"> |
| <div id="inner1"></div> |
| <div id="inner2"></div> |
| </div> |
| <button id="button1"><span id="button-span">Click me</span></button> |
| <input id="input1" value="A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog."> |
| <!-- Avoid to create a console element before the above elements --> |
| <div id="console"></div> |
| <script> |
| description('Check if any mousedown-mouseup pairs in one element dispatch click events.'); |
| if (window.eventSender) |
| debug('This test needs to run in a test environment.'); |
| |
| var container = document.getElementById('container'); |
| var containerRect = container.getBoundingClientRect(); |
| var inner1 = document.getElementById('inner1'); |
| var inner1Rect = inner1.getBoundingClientRect(); |
| var inner2 = document.getElementById('inner2'); |
| var inner2Rect = inner2.getBoundingClientRect(); |
| var x = (containerRect.left + containerRect.right) / 2; |
| var inContainer = (containerRect.top + inner1Rect.top) / 2; |
| var inInner1 = (inner1Rect.top + inner1Rect.bottom) / 2; |
| var inInner2 = (inner2Rect.top + inner2Rect.bottom) / 2; |
| |
| var lastClickTarget = null; |
| document.addEventListener('click', function(event) { |
| lastClickTarget = event.target; |
| }, false); |
| |
| debug('Very normal click on container:'); |
| eventSender.mouseMoveTo(x, inContainer); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'container'); |
| lastClickTarget = null; |
| |
| debug('Move inside container:'); |
| eventSender.mouseMoveTo(x, inContainer); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(x + 10, inContainer); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'container'); |
| lastClickTarget = null; |
| |
| debug('Move from container to a child:'); |
| eventSender.mouseMoveTo(x, inContainer); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(x, inInner1); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'container'); |
| lastClickTarget = null; |
| |
| debug('Move from a child to container:'); |
| eventSender.mouseMoveTo(x, inInner1); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(x, inContainer); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'container'); |
| lastClickTarget = null; |
| |
| debug('Move from a child to another child:'); |
| eventSender.mouseMoveTo(x, inInner1); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(x, inInner2); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'container'); |
| lastClickTarget = null; |
| |
| debug('Move out from a child:'); |
| eventSender.mouseMoveTo(x, inInner1); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(x, containerRect.bottom + 10); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'document.body'); |
| lastClickTarget = null; |
| |
| debug('Removing a child element in the light DOM during a click:'); |
| eventSender.mouseMoveTo(x, inInner2); |
| eventSender.mouseDown(); |
| inner2.remove(); |
| eventSender.mouseUp(); |
| shouldBeNull('lastClickTarget'); |
| lastClickTarget = null; |
| |
| debug('Click on escaping button content:'); |
| var button1 = document.getElementById("button1"); |
| var spanRect = document.getElementById('button-span').getBoundingClientRect(); |
| eventSender.mouseMoveTo((spanRect.left + spanRect.right) / 2, spanRect.top + 1); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'button1'); |
| lastClickTarget = null; |
| |
| debug('Click on disappearing INPUT value:'); |
| var input1 = document.getElementById('input1'); |
| input1.addEventListener('focus', function() { input1.value = ""; }, false); |
| var inputRect = input1.getBoundingClientRect(); |
| eventSender.mouseMoveTo(inputRect.left + 8, (inputRect.top + inputRect.bottom) / 2); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'input1'); |
| lastClickTarget = null; |
| |
| debug('Mousedown on a form control, and mouseup on an element outside:'); |
| eventSender.mouseMoveTo(inputRect.left + 8, (inputRect.top + inputRect.bottom) / 2); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo((spanRect.left + spanRect.right) / 2, spanRect.top + 1); |
| eventSender.mouseUp(); |
| shouldBe('lastClickTarget', 'document.body'); |
| lastClickTarget = null; |
| |
| container.remove(); |
| button1.remove(); |
| input1.remove(); |
| |
| </script> |
| </body> |
