src/third_party/WebKit/LayoutTests/fast/regions/positioned-objects-block-static-in-regions.html

   1 <!doctype html>
   2
   3  <style>
   4     #content {
   5        -webkit-flow-into: flow1;
   6     }
   7
   8     #first-box {
   9         margin:10%
  10     }
  11
  12     #second-box {
  13         position:absolute;
  14         top:0;
  15         bottom:0;
  16         width:160px;
  17         background-color:green
  18     }
  19
  20     #region1, #region2, #region3 {
  21         border: 1px solid black;
  22         -webkit-flow-from: flow1;
  23     }
  24
  25     #region1 {
  26         width: 200px;
  27         height: 150px;
  28     }
  29
  30     #region2 {
  31         width: 300px;
  32         height: 180px;
  33     }
  34
  35     #region3 {
  36         width: 120px;
  37         height: 120px;
  38     }
  39 </style>
  40
  41 <body>
  42 <p>The green positioned object should only be as tall as the first region it
  43 is contained in. It should be centered in the first region, and no red
  44 should be visible.</p>
  45
  46 <div id="content">
  47     <div id="first-box">
  48         <div style="width:100px;height:100px;background-color:red"></div>
  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>