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-inline.html |
| diff --git a/LayoutTests/fast/regions/hover-display-block-inline.html b/LayoutTests/fast/regions/hover-display-block-inline.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..a252ef0dceb0a217df2560ad94499caa3fcd0d46 |
| --- /dev/null |
| +++ b/LayoutTests/fast/regions/hover-display-block-inline.html |
| @@ -0,0 +1,77 @@ |
| +<!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="../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"); |
| + |
| + // move mouse on the hover test object |
| + eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hoverTest.offsetTop + 10); |
| + eventSender.mouseDown(0); |
| + |
| + setTimeout(release, 0); |
|
eae
2013/06/11 19:56:32
Is the timeout really needed?
|
| + } |
| + } |
| + |
| + 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++) |
|
eae
2013/06/11 19:56:32
Space around operators please. Also, it is general
|
| + elementsToHide[i].style.visibility = "hidden"; |
| + |
| + eventSender.mouseUp(0); |
|
eae
2013/06/11 19:56:32
Indentation is off.
|
| + |
| + if (window.testRunner) |
| + setTimeout("testRunner.notifyDone()", 0); |
| + } |
| + } |
| + |
| +</script> |
| + |
| +<body onload="beginTest()"> |
|
eae
2013/06/11 19:56:32
Id you move the script block to after the </div> j
|
| + <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> |
