| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 /* Make sure the console and the description don't interfere with th
e 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 #grandparent { | |
| 17 width: 100px; | |
| 18 height: 100px; | |
| 19 border: 5px solid blue; | |
| 20 background-color: lightblue; | |
| 21 } | |
| 22 | |
| 23 #parent { | |
| 24 width: 100px; | |
| 25 height: 100px; | |
| 26 border: 5px solid red; | |
| 27 background-color: darkred; | |
| 28 -webkit-flow-into: flow1; | |
| 29 } | |
| 30 | |
| 31 #child { | |
| 32 width: 100px; | |
| 33 height: 100px; | |
| 34 -webkit-flow-into: flow2; | |
| 35 border: 5px solid green; | |
| 36 background-color: orange; | |
| 37 } | |
| 38 | |
| 39 #region1 { | |
| 40 width: 150px; | |
| 41 height: 150px; | |
| 42 -webkit-flow-from: flow1; | |
| 43 border: 1px solid lime; | |
| 44 margin-top: 10px; | |
| 45 margin-bottom: 10px; | |
| 46 } | |
| 47 | |
| 48 #region2 { | |
| 49 width: 150px; | |
| 50 height: 150px; | |
| 51 -webkit-flow-from: flow2; | |
| 52 border: 1px solid lime; | |
| 53 } | |
| 54 | |
| 55 #child:hover { | |
| 56 background-color: green; | |
| 57 } | |
| 58 | |
| 59 #parent:hover { | |
| 60 background-color: green; | |
| 61 } | |
| 62 | |
| 63 #grandparent:hover { | |
| 64 background-color: green; | |
| 65 } | |
| 66 </style> | |
| 67 | |
| 68 <script src="../js/resources/js-test-pre.js"></script> | |
| 69 </head> | |
| 70 <body> | |
| 71 <ol> | |
| 72 <li>Move the mouse over the orange square | |
| 73 <ul> | |
| 74 <li>All three squares should turn green</li> | |
| 75 </ul> | |
| 76 </li> | |
| 77 <li>Move the mouse over the red square | |
| 78 <ul> | |
| 79 <li>The first two squares should turn green</li> | |
| 80 </ul> | |
| 81 </li> | |
| 82 </ol> | |
| 83 | |
| 84 <div class="box" id="grandparent"> | |
| 85 <div class="box" id="parent"> | |
| 86 <div class="box" id="child"></div> | |
| 87 </div> | |
| 88 </div> | |
| 89 <div class="box" id="region1"></div> | |
| 90 <div class="box" id="region2"></div> | |
| 91 | |
| 92 <script type="text/javascript"> | |
| 93 description("Test hover on children when flowed into region.") | |
| 94 | |
| 95 if (window.eventSender) { | |
| 96 var child = document.querySelector("#child"); | |
| 97 var parent = document.querySelector("#parent"); | |
| 98 var grandparent = document.querySelector("#grandparent"); | |
| 99 | |
| 100 // move mouse on the child object | |
| 101 { | |
| 102 eventSender.mouseMoveTo(child.offsetLeft + 10, child.offsetT
op + 50); | |
| 103 eventSender.mouseDown(0); | |
| 104 eventSender.leapForward(500); | |
| 105 eventSender.mouseUp(0); | |
| 106 | |
| 107 var childColor = window.getComputedStyle(child).getPropertyV
alue("background-color"); | |
| 108 var parentColor = window.getComputedStyle(parent).getPropert
yValue("background-color"); | |
| 109 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
| 110 | |
| 111 if (childColor == "rgb(0, 128, 0)") | |
| 112 testPassed("Child hover event processed OK."); | |
| 113 else | |
| 114 testFailed("Child hover event FAILED to process."); | |
| 115 | |
| 116 if (parentColor == "rgb(0, 128, 0)") | |
| 117 testPassed("Parent hover event processed OK."); | |
| 118 else | |
| 119 testFailed("Parent hover event FAILED to process."); | |
| 120 | |
| 121 if (grandparentColor == "rgb(0, 128, 0)") | |
| 122 testPassed("Grandparent hover event processed OK."); | |
| 123 else | |
| 124 testFailed("Grandparent hover event FAILED to process.")
; | |
| 125 } | |
| 126 | |
| 127 // move mouse on the parent object | |
| 128 { | |
| 129 eventSender.mouseMoveTo(parent.offsetLeft + 10, parent.offse
tTop + 50); | |
| 130 eventSender.mouseDown(0); | |
| 131 eventSender.leapForward(500); | |
| 132 eventSender.mouseUp(0); | |
| 133 | |
| 134 var childColor = window.getComputedStyle(child).getPropertyV
alue("background-color"); | |
| 135 var parentColor = window.getComputedStyle(parent).getPropert
yValue("background-color"); | |
| 136 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
| 137 | |
| 138 if (childColor != "rgb(0, 128, 0)") | |
| 139 testPassed("Child hover event processed OK."); | |
| 140 else | |
| 141 testFailed("Child hover event FAILED to process."); | |
| 142 | |
| 143 if (parentColor == "rgb(0, 128, 0)") | |
| 144 testPassed("Parent hover event processed OK."); | |
| 145 else | |
| 146 testFailed("Parent hover event FAILED to process."); | |
| 147 | |
| 148 if (grandparentColor == "rgb(0, 128, 0)") | |
| 149 testPassed("Grandparent hover event processed OK."); | |
| 150 else | |
| 151 testFailed("Grandparent hover event FAILED to process.")
; | |
| 152 } | |
| 153 } | |
| 154 | |
| 155 if (window.testRunner) { | |
| 156 var elementsToHide = document.querySelectorAll("ol, .box"); | |
| 157 for (var i=0; i<elementsToHide.length; i++) | |
| 158 elementsToHide[i].style.visibility = "hidden"; | |
| 159 } | |
| 160 | |
| 161 else { | |
| 162 var elementsToHide = document.querySelectorAll("#console, #descr
iption"); | |
| 163 for (var i=0; i<elementsToHide.length; i++) | |
| 164 elementsToHide[i].style.visibility = "hidden"; | |
| 165 } | |
| 166 </script> | |
| 167 | |
| 168 <script src="../js/resources/js-test-post.js"></script> | |
| 169 </body> | |
| 170 </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