src/third_party/WebKit/LayoutTests/fast/regions/hover-on-child-parent-different-regions.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <style>
   5                 /* Make sure the console and the description don't interfere with 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
  29                 #parent {
  30                         border: 2px solid red;
  31                         margin: 20px;
  32                         padding: 10px;
  33                         background-color: darkred;
  34                         -webkit-flow-into: flowParent;
  35                 }
  36
  37                 #parent:hover {
  38                         background-color: green;
  39                 }
  40
  41                 #child {
  42                         border: 5px solid orange;
  43                         background-color: orange;
  44                         -webkit-flow-into: flowChild;
  45                 }
  46
  47                 #child:hover {
  48                         background-color: yellow;
  49                 }
  50
  51                 #regionParent {
  52                         border: 5px solid green;
  53                         margin: 50px;
  54                         -webkit-flow-from: flowParent;
  55                 }
  56
  57                 #regionChild {
  58                         border: 5px solid blue;
  59                         margin: 50px;
  60                         position: relative;
  61                         left: 400px;
  62                         top: -300px;
  63                         padding: 20px;
  64                         -webkit-flow-from: flowChild;
  65                 }
  66         </style>
  67
  68         <script src="../../resources/js-test.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 flowed into a <span style="color: blue;"><b>region</b></span> and the <span style="color: darkred;"><b>parent</b></span> is flowed into a different <span style="color: green;"><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 square should turn green</li>
  75         </ol>
  76         <div class="bigBox" id="parent">
  77                 <div class="smallBox" id="child"></div>
  78         </div>
  79
  80         <div class="hugeBox" id="regionParent"></div>
  81         <div class="bigBox" id="regionChild"></div>
  82
  83         <script type="text/javascript">
  84                 description("This test covers the case when the child is flowed into a region and the parent is flowed into a different region.")
  85
  86                 if (window.eventSender) {
  87                         var child  = document.querySelector("#child");
  88                         var parent = document.querySelector("#parent");
  89
  90                         // move mouse on the child object
  91                         eventSender.mouseMoveTo(child.offsetLeft + 50, child.offsetTop + 50);
  92                         eventSender.mouseDown(0);
  93                         eventSender.leapForward(500);
  94                         eventSender.mouseUp(0);
  95
  96                         var childColor = window.getComputedStyle(child).getPropertyValue("background-color");
  97             var parentColor = window.getComputedStyle(parent).getPropertyValue("background-color");
  98
  99                         if (childColor == "rgb(255, 255, 0)")
 100                                 testPassed("Child hover event processed OK.");
 101                         else
 102                                 testFailed("Child hover event FAILED to process.");
 103
 104                         if (parentColor == "rgb(0, 128, 0)")
 105                                 testPassed("Parent hover event processed OK.");
 106                         else
 107                                 testFailed("Parent hover event FAILED to process.");
 108                 }
 109
 110                 if (window.testRunner) {
 111                         var elementsToHide = document.querySelectorAll(".visibleElement, .tinyBox, .smallBox, .bigBox, .hugeBox");
 112                         for (var i=0; i<elementsToHide.length; i++)
 113                                 elementsToHide[i].style.visibility = "hidden";
 114                 }
 115
 116                 else {
 117                         var elementsToHide = document.querySelectorAll("#console, #description");
 118                         for (var i=0; i<elementsToHide.length; i++)
 119                                 elementsToHide[i].style.visibility = "hidden";
 120                 }
 121         </script>
 122
 123 </body>
 124 </html>