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

   1 <!doctype html>
   2
   3  <style>
   4     #content {
   5         -webkit-flow-into: flow1;
   6         text-align: justify;
   7         padding: 5px;
   8     }
   9
  10     #first-box {
  11         margin:10%
  12     }
  13
  14     #second-box {
  15         position:absolute;
  16         left:0;
  17         top:0;
  18         height:450px;
  19         width:50%;
  20         background-color:green
  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 span all the regions. It should fill the left half of every region.</p>
  46
  47 <div id="content">
  48     <div id="first-box">
  49         <div id="second-box">
  50
  51         </div>
  52     </div>
  53 </div>
  54
  55 <div id="container">
  56     <div id="region1"></div>
  57     <div id="region2"></div>
  58     <div id="region3"></div>
  59 </div>