src/third_party/WebKit/LayoutTests/fast/regions/positioned-objects-in-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         bottom:0;
  19         width:100px;
  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 only be as tall as the first region it
  46 is contained in. It should fill the left half of the first region.</p>
  47
  48 <div id="content">
  49     <div id="first-box">
  50         <div id="second-box">
  51
  52         </div>
  53     </div>
  54 </div>
  55
  56 <div id="container">
  57     <div id="region1"></div>
  58     <div id="region2"></div>
  59     <div id="region3"></div>
  60 </div>