click-over-descendant-elements.html

<!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>
chromium/third_party/blink/web_tests/fast/events/click-over-descendant-elements.html
