| <!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-pre.js"></script> |
| </head> |
| |
| <script type="text/javascript"> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| 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); |
| |
| if (window.testRunner) |
| setTimeout("testRunner.notifyDone()", 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> |
