blob: ef2651cd94117bc22c3b48edf42c6ae43f799f0a [file] [log] [blame]
<!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">
jsTestIsAsync = true;
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";
finishJSTest();
}
}
beginTest();
</script>
</body>
</html>