76 lines
1.8 KiB
HTML
76 lines
1.8 KiB
HTML
<!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>
|