src/third_party/WebKit/LayoutTests/fast/regions/auto-size/autoheight-break-after-expected.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <style>
   5             .region {
   6                 width: 200px;
   7                 margin: 10px;
   8                 float: left;
   9                 overflow: hidden;
  10             }
  11             .regionAuto {
  12                 border: thick solid red;
  13             }
  14             .regionNonAuto {
  15                 height: 200px;
  16                 border: thick solid blue;
  17             }
  18             #break_after {
  19                 -webkit-region-break-after: always;
  20                 margin-bottom: 100px;
  21             }
  22             .region > p {
  23                 font-family: Ahem;
  24                 font-size: 10px;
  25             }
  26         </style>
  27     </head>
  28     <body>
  29         <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=112241"> [CSS Regions] Break after doesn't work correctly with auto-height regions</a>.</p>
  30         <p>There are three regions: one with auto-height (red), one with a specified height (blue) and the last one with auto-height (red). The first region contains a paragraph with a break after. The last auto-height region should fit the lorem ipsum content fragment.</p>
  31         <p>On success, you should not see overflow in the last region.</p>
  32         <div class="region regionAuto"><p id="break_after">BreakAfter</p></div>
  33         <div class="region regionNonAuto"><p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor est eu turpis tincidunt at sollicitudin felis fermentum. Nullam sollicitudin eros at elit facilisis condimentum. Ut tempor, nunc at volutpat cursus, sapien mi gravida velit, ut ullamcorper felis nunc ac risus. Suspendisse vel eros</p></div>
  34         <div class="region regionAuto"><p style="margin-top: 0px;">tortor, non cursus metus. Nam hendrerit pharetra sapien, sodales mattis arcu varius a. Curabitur non arcu id sem hendrerit tincidunt vel a nisi. Phasellus at erat nec nunc consectetur posuere. Aliquam consequat tempus pulvinar. Pellentesque ut sapien quis urna vestibulum dignissim.</p></div>
  35     </body>
  36 </html>