| <!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> |
