hover-display-block-none.html | Explore in Territory

<!doctype html>
<html lang="en">
<head>
	<title>Switch between display block and none on :hover</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
		}
		#dummy {
			background-color: black;
		}
		#hoverTest {
			border: 5px solid green;
			border-left: 100px solid green;
			color: black;
			display: block;
			width: 230px;
		}
		#hoverTest:hover {
			border-color: darkred;
			display: none;
		}
		#after_hoverTest {
			background-color: blue;
			color: white;
			padding: 10px;
		}
	</style>

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

<script type="text/javascript">
	function elementHovered() {
		if (window.testRunner)
			document.getElementById("hoverTest").style.display = "none";
	}
</script>

<body>
	<div id="dummy" class="box"></div>
	<div id="hoverTest" class="box" onmouseover="elementHovered()">When hovered, this box's display will switch from <b>block</b> to <b>none</b> (click on it and keep the mouse button pushed to avoid flicker and get a more clear view)</div>
	<div id="after_hoverTest" class="box">This is here to show the layout being recomputed</div>

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

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

				// move mouse on the hover test object
				eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hoverTest.offsetTop + 10);

				release();
			}
		}

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

				if (displayMode == "none")
					testPassed("Setting display to none on hover processed OK.");
				else
					testFailed("Setting display to none on hover 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();
			}
		}

		beginTest();
	</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/hover-display-block-none.html
