blob: faf068b5c6e86696b04eda178e255ae020f13074 [file] [log] [blame]
<!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>