src/third_party/WebKit/LayoutTests/fast/regions/hover-single-flow-into-none.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         #region {
  16                 -webkit-flow-from: flow;
  17                 width: 300px;
  18                 height: 190px;
  19                 border: 5px solid green;
  20                 border-left: 100px solid green;
  21                 background-color: #ddddff;
  22         }
  23
  24         #content {
  25                 -webkit-flow-into: flow;
  26                 border: 5px solid blue;
  27                 background: #aaaacc;
  28         }
  29         #content:hover {
  30                 -webkit-flow-into: none;
  31         }
  32         </style>
  33 </head>
  34
  35 <script type="text/javascript">
  36         if (window.testRunner)
  37                 testRunner.waitUntilDone();
  38
  39         function beginTest() {
  40                 if (window.eventSender) {
  41                         var content  = document.querySelector("#content");
  42
  43                         // move mouse on the hover test object
  44                         eventSender.mouseMoveTo(content.offsetLeft + 20, content.offsetTop + 20);
  45                         eventSender.mouseDown(0);
  46
  47                         testRunner.notifyDone();
  48                 }
  49         }
  50 </script>
  51
  52 <body onload="beginTest()">
  53         <p>When hovering the <span style="color:blue"><b>blue box</b></span>, it should get out of the region (it's <b>flow-into</b> will change to "none")</p>
  54         <div id="content" class="box">This box is flowed into the <span style="color:green"><b>region</b></span> when it is <b>not</b> hovered</div>
  55         <div id="region"></div>
  56 </body>
  57 </html>