Chromium Code Reviews Chromium Code Reviews
Issue 16599003:
:hover style not applied on hover if its display property is different from original style's (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/regions/hover-display-block-none.html |
| diff --git a/LayoutTests/fast/regions/hover-display-block-none.html b/LayoutTests/fast/regions/hover-display-block-none.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..a1df7b3b503c3503c96b804260daf9845d93e398 |
| --- /dev/null |
| +++ b/LayoutTests/fast/regions/hover-display-block-none.html |
| @@ -0,0 +1,75 @@ |
| +<!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="../js/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"); |
|
eae
2013/06/11 19:56:32
getElementById is faster :)
|
| + |
| + // move mouse on the hover test object |
| + eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hoverTest.offsetTop + 10); |
| + |
| + setTimeout(release, 0); |
| + } |
| + } |
| + |
| + function release() { |
| + if (window.eventSender) { |
| + var hoverTest = document.querySelector("#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.querySelectorAll(".box"); |
| + for (var i=0; i<elementsToHide.length; i++) |
| + elementsToHide[i].style.visibility = "hidden"; |
| + |
| + 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>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> |
| +</body> |
| +</html> |
