LayoutTests/fast/forms/search-hide-cancel-on-cancel.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
 <p id="description"></p>

 <input id=search type=search value=query>

 <div id="console"></div>
 <script>
 description('Bug 46950: Search field cancel button keeps event capturing if the value is cleared in a focus event.');

 var input = document.getElementById('search');
 var cancelX = input.offsetLeft + input.offsetWidth - 6;
 var middleX = input.offsetLeft + input.offsetWidth / 2
 var middleY = input.offsetTop + input.offsetHeight / 2;
 var mouseDownCount = 0;
 input.addEventListener('mousedown', function(event) {
     mouseDownCount++;
 }, false);

 function clearValue(event) {
     this.value = '';
 }
 input.addEventListener('focus', clearValue, false);
 // Click the cancel button.
 eventSender.mouseMoveTo(cancelX, middleY);
 eventSender.mouseDown();
 eventSender.mouseUp();
 // Click the input element. The event should not be captured by the cancel button.
 eventSender.mouseMoveTo(middleX, middleY);
 eventSender.mouseDown();
 eventSender.mouseUp();

 shouldBe('mouseDownCount', '2');
 input.removeEventListener('focus', clearValue, false);
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<script src="../../resources/js-test-pre.js"></script>
	</head>
	<body>
	<p id="description"></p>

	<input id=search type=search value=query>

	<div id="console"></div>
	<script>
	description('Bug 46950: Search field cancel button keeps event capturing if the value is cleared in a focus event.');

	var input = document.getElementById('search');
	var cancelX = input.offsetLeft + input.offsetWidth - 6;
	var middleX = input.offsetLeft + input.offsetWidth / 2
	var middleY = input.offsetTop + input.offsetHeight / 2;
	var mouseDownCount = 0;
	input.addEventListener('mousedown', function(event) {
	mouseDownCount++;
	}, false);

	function clearValue(event) {
	this.value = '';
	}
	input.addEventListener('focus', clearValue, false);
	// Click the cancel button.
	eventSender.mouseMoveTo(cancelX, middleY);
	eventSender.mouseDown();
	eventSender.mouseUp();
	// Click the input element. The event should not be captured by the cancel button.
	eventSender.mouseMoveTo(middleX, middleY);
	eventSender.mouseDown();
	eventSender.mouseUp();

	shouldBe('mouseDownCount', '2');
	input.removeEventListener('focus', clearValue, false);
	</script>
	<script src="../../resources/js-test-post.js"></script>
	</body>
	</html>