src/third_party/WebKit/LayoutTests/fast/regions/overflow-moving-below-floats-in-variable-width-regions.html

   1 <!DOCTYPE html>
   2 <link rel="stylesheet" href="resources/region-style.css">
   3 <style>
   4     body { -webkit-font-smoothing: none; font: 16px/1.25 monospace; }
   5
   6     .secondBox {
   7         margin: auto;
   8         width: 75%;
   9     }
  10
  11     #region1, #region2, #region3 {
  12         border: 1px solid black;
  13         -webkit-flow-from: flow1;
  14     }
  15
  16     #region1 {
  17         width: 300px;
  18         height: 100px;
  19     }
  20
  21     #region2 {
  22         width: 404px;
  23         height: 200px;
  24     }
  25
  26     #region3 {
  27         width: 220px;
  28         height: 120px;
  29     }
  30 </style>
  31 <p>The first and last lines of text in the regions below should be clipped to the green box. The overflow
  32 section sizes itself and clips differently in each region. The green box should start below the lime floats.</p>
  33
  34 <div class="overflowContentFlow">
  35     <div class="overflowFirstBox">
  36         <div class="overflowBox2 floatLeft"></div> <div class="overflowBox2 floatRight"></div>
  37         <div class="overflowSecondBox secondBox">
  38             <div style="width: 500px">Clipped line of text that should not be visible.</div>
  39             <p>These lines will not spill out of the regions. These lines will not spill out of the regions.
  40             These lines will not spill out of the regions. These lines will not spill out of the regions. These lines will not spill out of the regions.</p>
  41             <div style="width: 500px">Clipped line of text that should not be visible.</div>
  42         </div>
  43     </div>
  44 </div>
  45
  46 <div id="container">
  47     <div id="region1"></div>
  48     <div id="region2"></div>
  49     <div id="region3"></div>
  50 </div>