<!doctype html>
<html lang="en">
<head>
	<title>Switch between display block and none on :focus</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: blue;
			color: white;
			padding: 10px;
		}
		#button {
			display: block;
			width: 200px;
			height: 50px;
		}
		#button:focus {
			display: none;
		}
	</style>

	<script src="../../resources/js-test.js"></script>
</head>

<script type="text/javascript">
	if (window.testRunner)
		testRunner.waitUntilDone();

	function beginTest() {
		if (window.eventSender) {
			var button  = document.getElementById("button");
			button.focus();

			release();
		}
	}

	function release() {
		if (window.eventSender) {
			var button  = document.getElementById("button");
			var displayMode = window.getComputedStyle(button).getPropertyValue("display");

			if (displayMode == "none")
				testPassed("Setting display to none on focus processed OK.");
			else
				testFailed("Setting display to none on focus FAILED." + " (expected 'none', got '" + displayMode + "')");

			var elementsToHide = document.getElementsByClassName('box');
			for (var element, i = 0; element = elementsToHide[i]; i++)
			    element.style.visibility = "hidden";

	        if (window.testRunner)
				testRunner.notifyDone();
		}
	}

</script>

<body onload="beginTest()">
	<button type="button" id="button">When you hit TAB, this button should disappear.</button>
	<div class="box">This is here to show the layout being recomputed</div>
</body>
</html>