| 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                 .box { |  | 
|  17                         width: 100px; |  | 
|  18                         height: 100px; |  | 
|  19                 } |  | 
|  20                 #parent { |  | 
|  21                         background-color: green; |  | 
|  22                 } |  | 
|  23                 #parent:hover { |  | 
|  24                         color: red; |  | 
|  25                 } |  | 
|  26                 #child { |  | 
|  27                         background-color: orange; |  | 
|  28                         -webkit-flow-into: f; |  | 
|  29                 } |  | 
|  30                 #region { |  | 
|  31                         -webkit-flow-from: f; |  | 
|  32                 } |  | 
|  33         </style> |  | 
|  34  |  | 
|  35         <script src="../js/resources/js-test-pre.js"></script> |  | 
|  36 </head> |  | 
|  37 <body> |  | 
|  38         <ol> |  | 
|  39                 <li>Move the mouse over the orange square</li> |  | 
|  40                 <li>The text should turn red</li> |  | 
|  41         </ol> |  | 
|  42         <div class="box" id="parent"> |  | 
|  43                 <div class="box" id="child">Red = hover</div> |  | 
|  44         </div> |  | 
|  45         <div class="box" id="region"></div> |  | 
|  46  |  | 
|  47         <script type="text/javascript"> |  | 
|  48                 description("Test hover on child when flowed into region.") |  | 
|  49  |  | 
|  50                 if (window.eventSender) { |  | 
|  51                         var child  = document.querySelector("#child"); |  | 
|  52                         var parent = document.querySelector("#parent"); |  | 
|  53  |  | 
|  54                         // move mouse on the child object |  | 
|  55                         eventSender.mouseMoveTo(child.offsetLeft + 10, child.off
    setTop + 50); |  | 
|  56                         eventSender.mouseDown(0); |  | 
|  57                         eventSender.leapForward(500); |  | 
|  58                         eventSender.mouseUp(0); |  | 
|  59  |  | 
|  60                         var computedStyle = window.getComputedStyle(parent); |  | 
|  61                         var clr = computedStyle.getPropertyValue("color"); |  | 
|  62                         if (clr == "rgb(255, 0, 0)") |  | 
|  63                                 testPassed("Hover event processed OK."); |  | 
|  64                         else |  | 
|  65                                 testFailed("Hover event FAILED to process."); |  | 
|  66                 } |  | 
|  67  |  | 
|  68                 if (window.testRunner) { |  | 
|  69                         var elementsToHide = document.querySelectorAll("ol, .box
    "); |  | 
|  70                         for (var i=0; i<elementsToHide.length; i++) |  | 
|  71                                 elementsToHide[i].style.visibility = "hidden"; |  | 
|  72                 } |  | 
|  73  |  | 
|  74                 else { |  | 
|  75                         var elementsToHide = document.querySelectorAll("#console
    , #description"); |  | 
|  76                         for (var i=0; i<elementsToHide.length; i++) |  | 
|  77                                 elementsToHide[i].style.visibility = "hidden"; |  | 
|  78                 } |  | 
|  79         </script> |  | 
|  80  |  | 
|  81         <script src="../js/resources/js-test-post.js"></script> |  | 
|  82 </body> |  | 
|  83 </html> |  | 
| OLD | NEW |