| OLD | NEW |
|---|
| (Empty) |
| 1 <!doctype html> | |
| 2 <html lang="en"> | |
| 3 <head> | |
| 4 <style> | |
| 5 /* Make sure the console and the description don't interfere wit
h the rest of the layout. */ | |
| 6 #description { | |
| 7 position: absolute; | |
| 8 top: 0px; | |
| 9 } | |
| 10 | |
| 11 #console { | |
| 12 position: absolute; | |
| 13 top: 100px; | |
| 14 } | |
| 15 | |
| 16 .hugeBox { | |
| 17 width: 300px; | |
| 18 height: 300px; | |
| 19 } | |
| 20 .bigBox { | |
| 21 width: 200px; | |
| 22 height: 200px; | |
| 23 } | |
| 24 .smallBox { | |
| 25 width: 100px; | |
| 26 height: 100px; | |
| 27 } | |
| 28 .tinyBox { | |
| 29 width: 50px; | |
| 30 height: 50px; | |
| 31 } | |
| 32 #flowedIntoChild { | |
| 33 border: 1px solid blue; | |
| 34 color: blue; | |
| 35 font-size: 12px; | |
| 36 margin: 5px; | |
| 37 -webkit-flow-into: flowIntoChild; | |
| 38 } | |
| 39 #parent { | |
| 40 border: 2px solid red; | |
| 41 margin: 20px; | |
| 42 padding: 10px; | |
| 43 background-color: darkred; | |
| 44 -webkit-flow-into: flowParent; | |
| 45 } | |
| 46 | |
| 47 #parent:hover { | |
| 48 background-color: green; | |
| 49 } | |
| 50 | |
| 51 #child { | |
| 52 border: 5px solid orange; | |
| 53 background-color: orange; | |
| 54 -webkit-flow-from: flowIntoChild; | |
| 55 } | |
| 56 | |
| 57 #child:hover { | |
| 58 background-color: yellow; | |
| 59 } | |
| 60 | |
| 61 #region { | |
| 62 border: 5px solid green; | |
| 63 margin: 50px; | |
| 64 -webkit-flow-from: flowParent; | |
| 65 } | |
| 66 </style> | |
| 67 | |
| 68 <script src="../js/resources/js-test-pre.js"></script> | |
| 69 </head> | |
| 70 <body> | |
| 71 <p class="visibleElement">This test covers the case when the <span style
="color: orange;"><b>child</b></span> is itself a region and the <span style="co
lor: darkred;"><b>parent</b></span> is flowed into another <span style="color: g
reen;"><b>region</b></span>.</p> | |
| 72 <ol class="visibleElement"> | |
| 73 <li>Move the mouse inside the orange square</li> | |
| 74 <li>The orange square should turn yellow and the big darkred squ
are should turn green</li> | |
| 75 </ol> | |
| 76 <div class="bigBox" id="parent"> | |
| 77 <div class="smallBox" id="child"></div> | |
| 78 </div> | |
| 79 <div class="tinyBox" id="flowedIntoChild">flowed into child</div> | |
| 80 <div class="hugeBox" id="region"></div> | |
| 81 | |
| 82 <script type="text/javascript"> | |
| 83 description("This test covers the case when the child is itself
a region and the parent is flowed into another region.") | |
| 84 | |
| 85 if (window.eventSender) { | |
| 86 var child = document.querySelector("#child"); | |
| 87 var parent = document.querySelector("#parent"); | |
| 88 | |
| 89 // move mouse on the child object | |
| 90 eventSender.mouseMoveTo(child.offsetLeft + 90, child.off
setTop + 50); | |
| 91 eventSender.mouseDown(0); | |
| 92 eventSender.leapForward(500); | |
| 93 eventSender.mouseUp(0); | |
| 94 | |
| 95 var childColor = window.getComputedStyle(child).getPrope
rtyValue("background-color"); | |
| 96 var parentColor = window.getComputedStyle(parent).getPropertyValue("
background-color"); | |
| 97 | |
| 98 if (childColor == "rgb(255, 255, 0)") | |
| 99 testPassed("Child hover event processed OK."); | |
| 100 else | |
| 101 testFailed("Child hover event FAILED to process.
"); | |
| 102 | |
| 103 if (parentColor == "rgb(0, 128, 0)") | |
| 104 testPassed("Parent hover event processed OK."); | |
| 105 else | |
| 106 testFailed("Parent hover event FAILED to process
."); | |
| 107 } | |
| 108 | |
| 109 if (window.testRunner) { | |
| 110 var elementsToHide = document.querySelectorAll(".visible
Element, .tinyBox, .smallBox, .bigBox, .hugeBox"); | |
| 111 for (var i=0; i<elementsToHide.length; i++) | |
| 112 elementsToHide[i].style.visibility = "hidden"; | |
| 113 } | |
| 114 | |
| 115 else { | |
| 116 var elementsToHide = document.querySelectorAll("#console
, #description"); | |
| 117 for (var i=0; i<elementsToHide.length; i++) | |
| 118 elementsToHide[i].style.visibility = "hidden"; | |
| 119 } | |
| 120 </script> | |
| 121 | |
| 122 <script src="../js/resources/js-test-post.js"></script> | |
| 123 </body> | |
| 124 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 19660002:
Revert "[CSS Regions] Mouse over an element does not trigger :hover state for parent when the eleme… (Closed)
Base URL: svn://svn.chromium.org/blink/trunk