src/third_party/WebKit/LayoutTests/fast/regions/overflow-in-variable-width-regions-expected.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: 40px;
   8     }
   9
  10     #region1, #region2, #region3 {
  11         border: 1px solid black;
  12     }
  13
  14     #region1 {
  15         width: 200px;
  16         height: 100px;
  17         overflow-y: hidden;
  18     }
  19
  20     #region2 {
  21         width: 300px;
  22         height: 180px;
  23         overflow-y: hidden;
  24     }
  25
  26     #region3 {
  27         width: 120px;
  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 independently in each region.</p>
  33
  34 <div id="container">
  35     <div id="region1">
  36         <div class="overflowContent">
  37             <div class="overflowFirstBox">
  38                 <div class="overflowSecondBox secondBox">
  39                     <div style="width: 500px">Clipped line of text that should not be visible.</div>
  40                     <br/>
  41                     <br/>
  42                 </div>
  43             </div>
  44         </div>
  45     </div>
  46     <div id="region2">
  47         <div class="overflowContent" style="padding-top: 0px;">
  48             <div class="overflowFirstBox" style="border-top-width: 0px;">
  49                 <div class="overflowSecondBox secondBox" style="margin-top: 0px; border-top-width: 0px;">
  50                     <p style="margin-top: 0px;">These lines will not spill out of the regions. These lines will not spill out of the regions.
  51                     These lines will not spill out of the regions.</p>
  52                     <br/>
  53                 </div>
  54             </div>
  55         </div>
  56     </div>
  57     <div id="region3">
  58         <div class="overflowContent" style="padding-top: 0px;">
  59             <div class="overflowFirstBox" style="border-top-width: 0px;">
  60                 <div class="overflowSecondBox secondBox" style="margin-top: 0px; border-top-width: 0px;">
  61                     <div style="width: 500px">Clipped line of text that should not be visible.</div>
  62                 </div>
  63             </div>
  64         </div>
  65     </div>
  66 </div>