<!doctype html>
<html lang="en">
<head>
	<title>Switch between display block and inline 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;
		}
		#hoverTest:hover {
			border-color: darkred;
			display: inline;
		}
		#after_hoverTest {
			background-color: blue;
			color: white;
			padding: 10px;
		}
	</style>

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

<script type="text/javascript">
	jsTestIsAsync = true;

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

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

			setTimeout(release, 0);
		}
	}

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

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

			var elementsToHide = document.querySelectorAll(".box");
			for (var i=0; i<elementsToHide.length; i++)
				elementsToHide[i].style.visibility = "hidden";

	        eventSender.mouseUp(0);

            setTimeout(finishJSTest, 0);
		}
	}

</script>

<body onload="beginTest()">
	<div id="dummy" class="box"></div>
	<div id="hoverTest" class="box">When hovered, this box's display will switch from <b>block</b> to <b>inline</b></div>
	<div id="after_hoverTest" class="box">This is here to show the layout being recomputed</div>
</body>
</html>