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 none 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 width: 230px; | |
| 19 } | |
| 20 #hoverTest:hover { | |
| 21 border-color: darkred; | |
| 22 display: none; | |
| 23 } | |
| 24 #after_hoverTest { | |
| 25 background-color: blue; | |
| 26 color: white; | |
| 27 padding: 10px; | |
| 28 } | |
| 29 </style> | |
| 30 | |
| 31 <script src="../js/resources/js-test-pre.js"></script> | |
| 32 </head> | |
| 33 | |
| 34 <script type="text/javascript"> | |
| 35 if (window.testRunner) | |
| 36 testRunner.waitUntilDone(); | |
| 37 | |
| 38 function beginTest() { | |
| 39 if (window.eventSender) { | |
| 40 var hoverTest = document.querySelector("#hoverTest"); | |
|
eae
2013/06/11 19:56:32
getElementById is faster :)
| |
| 41 | |
| 42 // move mouse on the hover test object | |
| 43 eventSender.mouseMoveTo(hoverTest.offsetLeft + 50, hover Test.offsetTop + 10); | |
| 44 | |
| 45 setTimeout(release, 0); | |
| 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 == "none") | |
| 55 testPassed("Setting display to none on hover pro cessed OK."); | |
| 56 else | |
| 57 testFailed("Setting display to none on hover FAI LED." + " (expected 'none', got '" + displayMode + "')"); | |
| 58 | |
| 59 var elementsToHide = document.querySelectorAll(".box"); | |
| 60 for (var i=0; i<elementsToHide.length; i++) | |
| 61 elementsToHide[i].style.visibility = "hidden"; | |
| 62 | |
| 63 if (window.testRunner) | |
| 64 setTimeout("testRunner.notifyDone()", 0); | |
| 65 } | |
| 66 } | |
| 67 | |
| 68 </script> | |
| 69 | |
| 70 <body onload="beginTest()"> | |
| 71 <div id="dummy" class="box"></div> | |
| 72 <div id="hoverTest" class="box">When hovered, this box's display will sw itch from <b>block</b> to <b>none</b> (click on it and keep the mouse button pus hed to avoid flicker and get a more clear view)</div> | |
| 73 <div id="after_hoverTest" class="box">This is here to show the layout be ing recomputed</div> | |
| 74 </body> | |
| 75 </html> | |
| OLD | NEW |
