focus-display-block-inline.html | Explore in Territory

<!doctype html>
<html lang="en">
<head>
	<title>Switch between display block and none on :focus</title>
	<style>
		#button {
			display: block;
			width: 200px;
			height: 50px;
		}
		#button:focus {
			display: none;
		}
	</style>

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

<script>
if (window.testRunner)
  testRunner.waitUntilDone();

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

  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 + "')");
  testRunner.notifyDone()

  button.blur();
}
</script>

<body onload="beginTest()">
	<button type="button" id="button">When you hit TAB, this button should disappear.</button>
</body>
</html>

chromium/third_party/blink/web_tests/fast/css/focus-display-block-inline.html