src/third_party/WebKit/LayoutTests/fast/regions/positioned-objects-inline-static-spanning-regions.html

   1 <!doctype html>
   2
   3  <style>
   4     #content {
   5        -webkit-flow-into: flow1;
   6     }
   7
   8     #first-box {
   9         margin:10%;
  10         height:350px;
  11         background-color:#cccccc;
  12     }
  13
  14     #second-box {
  15         position:absolute;
  16         top:0;
  17         height:450px;
  18         width:50%;
  19         background-color:#00a000;
  20         color:#00a000
  21     }
  22
  23     #region1, #region2, #region3 {
  24         border: 1px solid black;
  25         -webkit-flow-from: flow1;
  26     }
  27
  28     #region1 {
  29         width: 200px;
  30         height: 150px;
  31     }
  32
  33     #region2 {
  34         width: 300px;
  35         height: 180px;
  36     }
  37
  38     #region3 {
  39         width: 120px;
  40         height: 120px;
  41     }
  42 </style>
  43
  44 <body>
  45 <p>The green positioned object should go through all three regions. Its left edge should have the
  46 same offset from the left side of the light grey boxes in each region.</p>
  47
  48 <div id="content">
  49     <div id="first-box">
  50         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="second-box"></span>
  51     </div>
  52 </div>
  53
  54 <div id="container">
  55     <div id="region1"></div>
  56     <div id="region2"></div>
  57     <div id="region3"></div>
  58 </div>