src/third_party/WebKit/LayoutTests/fast/regions/hover-single-flow-into-other.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <style>
   5         p, div {
   6                 font: 12px/1 monospace;
   7         }
   8         .box {
   9                 width: 260px;
  10                 height: 120px;
  11                 padding: 5px;
  12                 margin: 10px;
  13         }
  14
  15         #region1 {
  16                 -webkit-flow-from: flow1;
  17                 width: 300px;
  18                 height: 190px;
  19                 border: 5px solid green;
  20                 background-color: #ddddff;
  21                 margin-bottom: 20px;
  22         }
  23
  24         #region2 {
  25                 -webkit-flow-from: flow2;
  26                 width: 300px;
  27                 height: 190px;
  28                 border: 5px solid darkred;
  29                 background-color: #ddddff;
  30                 position: relative;
  31                 left: 350px;
  32                 top: -220px;
  33         }
  34
  35         #content {
  36                 -webkit-flow-into: flow1;
  37                 border: 5px solid blue;
  38                 background: #aaaacc;;
  39         }
  40         #content:hover {
  41                 -webkit-flow-into: flow2;
  42         }
  43         </style>
  44 </head>
  45
  46 <script type="text/javascript">
  47         if (window.testRunner)
  48                 testRunner.waitUntilDone();
  49
  50         function beginTest() {
  51                 if (window.eventSender) {
  52                         var content  = document.querySelector("#content");
  53
  54                         // move mouse on the hover test object
  55                         eventSender.mouseMoveTo(content.offsetLeft + 20, content.offsetTop + 20);
  56
  57                         testRunner.notifyDone();
  58                 }
  59         }
  60 </script>
  61
  62 <script type="text/javascript">
  63         function elementHovered() {
  64                 if (window.testRunner)
  65                         document.getElementById("content").style.webkitFlowInto = "flow2";
  66         }
  67 </script>
  68
  69
  70 <body onload="beginTest()">
  71         <p>When hovering the <span style="color:blue"><b>blue box</b></span>, it should move to the <span style="color:darkred"><b>second region</b></span> (it's <b>flow-into</b> will change to the 2nd thread)</p>
  72         <div id="region1"></div>
  73         <div id="region2"></div>
  74         <div id="content" class="box" onmouseover="elementHovered()">This box is flowed into the <span style="color:green"><b>first region</b></span> when it is <b>not</b> hovered and into the <span style="color:darkred"><b>second region</b></span> when it <b>is</b></div>
  75 </body>
  76 </html>