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| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!doctype html> | |
| 2 <html lang="en"> | |
| 3 <head> | |
| 4 <title>Switch between display block and inline on :hover</title> | |
| 5 <style> | |
| 6 .box { | |
| 7 width: 100px; | |
| 8 height: 100px; | |
| 9 } | |
| 10 #dummy { | |
| 11 background-color: black; | |
| 12 } | |
| 13 #hoverTest { | |
| 14 border: 5px solid green; | |
| 15 border-left: 100px solid green; | |
| 16 color: black; | |
| 17 display: block; | |
| 18 } | |
| 19 #hoverTest:hover { | |
| 20 border-color: darkred; | |
| 21 display: inline; | |
| 22 } | |
| 23 #after_hoverTest { | |
| 24 background-color: blue; | |
| 25 color: white; | |
| 26 padding: 10px; | |
| 27 } | |
| 28 </style> | |
| 29 | |
| 30 <script src="../js/resources/js-test-pre.js"></script> | |
| 31 </head> | |
| 32 | |
| 33 <script type="text/javascript"> | |
| 34 if (window.testRunner) | |
| 35 testRunner.waitUntilDone(); | |
| 36 | |
| 37 function beginTest() { | |
| 38 if (window.eventSender) { | |
| 39 var hoverTest = document.querySelector("#hoverTest"); | |
| 40 | |
| 41 // move mouse on the hover test object | |
| 42 eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hover Test.offsetTop + 10); | |
| 43 eventSender.mouseDown(0); | |
| 44 | |
| 45 setTimeout(release, 0); | |
|
eae
2013/06/11 19:56:32
Is the timeout really needed?
| |
| 46 } | |
| 47 } | |
| 48 | |
| 49 function release() { | |
| 50 if (window.eventSender) { | |
| 51 var hoverTest = document.querySelector("#hoverTest"); | |
| 52 var displayMode = window.getComputedStyle(hoverTest).get PropertyValue("display"); | |
| 53 | |
| 54 if (displayMode == "inline") | |
| 55 testPassed("Setting display to inline on hover p rocessed OK."); | |
| 56 else | |
| 57 testFailed("Setting display to inline on hover F AILED." + " (expected 'inline', got '" + displayMode + "')"); | |
| 58 | |
| 59 var elementsToHide = document.querySelectorAll(".box"); | |
| 60 for (var i=0; i<elementsToHide.length; i++) | |
|
eae
2013/06/11 19:56:32
Space around operators please. Also, it is general
| |
| 61 elementsToHide[i].style.visibility = "hidden"; | |
| 62 | |
| 63 eventSender.mouseUp(0); | |
|
eae
2013/06/11 19:56:32
Indentation is off.
| |
| 64 | |
| 65 if (window.testRunner) | |
| 66 setTimeout("testRunner.notifyDone()", 0); | |
| 67 } | |
| 68 } | |
| 69 | |
| 70 </script> | |
| 71 | |
| 72 <body onload="beginTest()"> | |
|
eae
2013/06/11 19:56:32
Id you move the script block to after the </div> j
| |
| 73 <div id="dummy" class="box"></div> | |
| 74 <div id="hoverTest" class="box">When hovered, this box's display will sw itch from <b>block</b> to <b>inline</b></div> | |
| 75 <div id="after_hoverTest" class="box">This is here to show the layout be ing recomputed</div> | |
| 76 </body> | |
| 77 </html> | |
| OLD | NEW |
