LayoutTests/fast/events/mouse-click-different-mouseDown-mouseUp-nodes.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../resources/js-test.js"></script>
 <style>
     div {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
     }

     .button {
         background-color: blue;
     }

     .icon {
         background-color: black;
     }

     .button:active .icon {
         transform: scale(0.25);
     }
 </style>
 </head>
 <body>
 <div id="parentDiv" class="button" onclick="alert('clicked')">
     <div id="childDiv" class="icon"></div>
 </div>
 <script>
 description("Tests that the click event is fired at the common ancestor if the mouseDown / mouseUp nodes differ.");
 jsTestIsAsync = true;

 parentGotClickEvent = false;
 childGotClickEvent = false;

 document.getElementById("parentDiv").onclick = function() {
     parentGotClickEvent = true;
 };

 document.getElementById("childDiv").onclick = function() {
     childGotClickEvent = true;
 };

 onload = function() {
     if (window.eventSender) {
         eventSender.mouseMoveTo(10, 300);
         eventSender.mouseDown();
         eventSender.mouseUp();
     }

     setTimeout(function() {
         shouldBeTrue("parentGotClickEvent");
         shouldBeFalse("childGotClickEvent");
         finishJSTest();
     }, 0);
 }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../resources/js-test.js"></script>
	<style>
	div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.button {
	background-color: blue;
	}

	.icon {
	background-color: black;
	}

	.button:active .icon {
	transform: scale(0.25);
	}
	</style>
	</head>
	<body>
	<div id="parentDiv" class="button" onclick="alert('clicked')">
	<div id="childDiv" class="icon"></div>
	</div>
	<script>
	description("Tests that the click event is fired at the common ancestor if the mouseDown / mouseUp nodes differ.");
	jsTestIsAsync = true;

	parentGotClickEvent = false;
	childGotClickEvent = false;

	document.getElementById("parentDiv").onclick = function() {
	parentGotClickEvent = true;
	};

	document.getElementById("childDiv").onclick = function() {
	childGotClickEvent = true;
	};

	onload = function() {
	if (window.eventSender) {
	eventSender.mouseMoveTo(10, 300);
	eventSender.mouseDown();
	eventSender.mouseUp();
	}

	setTimeout(function() {
	shouldBeTrue("parentGotClickEvent");
	shouldBeFalse("childGotClickEvent");
	finishJSTest();
	}, 0);
	}
	</script>
	</body>
	</html>