4 <title>Switch between display block and none on :hover
</title>
11 background-color: black;
14 border:
5px solid green;
15 border-left:
100px solid green;
21 border-color: darkred;
25 background-color: blue;
31 <script src=
"../../resources/js-test.js"></script>
34 <script type=
"text/javascript">
35 function elementHovered() {
36 if (window
.testRunner
)
37 document
.getElementById("hoverTest").style
.display
= "none";
42 <div id=
"dummy" class=
"box"></div>
43 <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>
44 <div id=
"after_hoverTest" class=
"box">This is here to show the layout being recomputed
</div>
46 <script type=
"text/javascript">
47 if (window
.testRunner
)
48 testRunner
.waitUntilDone();
50 function beginTest() {
51 if (window
.eventSender
) {
52 var hoverTest
= document
.getElementById("hoverTest");
54 // move mouse on the hover test object
55 eventSender
.mouseMoveTo(hoverTest
.offsetLeft
+ 50, hoverTest
.offsetTop
+ 10);
62 if (window
.eventSender
) {
63 var hoverTest
= document
.getElementById("hoverTest");
64 var displayMode
= window
.getComputedStyle(hoverTest
).getPropertyValue("display");
66 if (displayMode
== "none")
67 testPassed("Setting display to none on hover processed OK.");
69 testFailed("Setting display to none on hover FAILED." + " (expected 'none', got '" + displayMode
+ "')");
71 var elementsToHide
= document
.getElementsByClassName('box');
72 for (var element
, i
= 0; element
= elementsToHide
[i
]; i
++)
73 element
.style
.visibility
= "hidden";
75 if (window
.testRunner
)
76 testRunner
.notifyDone();