81 lines
2.0 KiB
HTML
81 lines
2.0 KiB
HTML
<!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> |