LayoutTests/fast/regions/overflow-in-variable-width-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         border: 1px solid blue;
  12     }
  13
  14     #second-box {
  15         margin:40px;
  16         border: 1px solid green;
  17         overflow:hidden
  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: 100px;
  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 first and last lines of text in the regions below should be clipped to the green box. The overflow
  43 section sizes itself independently in each region.</p>
  44
  45 <div id="content">
  46     <div id="first-box">
  47         <div id="second-box">
  48             <div style="width:500px">Clipped line of text that should not be visible.</div>
  49             <p>These lines will not spill out of the regions. These lines will not spill out of the regions.
  50             These lines will not spill out of the regions. </p>
  51             <div style="width:500px">Clipped line of text that should not be visible.</div>
  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>