src/third_party/WebKit/LayoutTests/fast/regions/regions-widows-float-top-aligned.html

   1 <!doctype html>
   2 <html style="font: 16px/1.25 monospace;">
   3     <head>
   4         <style>
   5             #content {
   6                 -webkit-flow-into: flow;
   7             }
   8
   9             .region {
  10                 -webkit-flow-from: flow;
  11                 width: 100px;
  12                 height: 100px;
  13             }
  14
  15             #region1 {
  16                 border: 5px solid green;
  17                 height: 150px;
  18             }
  19
  20             #region2 {
  21                 border: 5px solid blue;
  22                 height: 200px;
  23             }
  24
  25             #self_col {
  26                 margin-top: 0px;
  27                 margin-bottom: 0px;
  28                 float: left;
  29                 height: 30px;
  30                 border: thin solid black;
  31             }
  32
  33             #self_col_p {
  34                 margin-top: 30px;
  35                 widows: 4;
  36             }
  37
  38             #clear {
  39                 margin-top: 50px;
  40             }
  41
  42         </style>
  43     </head>
  44     <body>
  45         <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=122450">Bug 122450</a>. The test passes if the first three lines are in the green box and the last four lines in the blue box.</p>
  46         <div id="content">
  47             <div id="self_col_p">
  48                 <div id="self_col"></div>
  49                 <div id="clear">
  50                 Linetext1
  51                 Linetext2
  52                 Linetext3
  53                 Linetext4
  54                 Linetext5
  55                 Linetext6
  56                 Linetext7
  57                 </div>
  58             </div>
  59         </div>
  60         <div id="container">
  61             <div class="region" id="region1"></div>
  62             <div class="region" id="region2"></div>
  63         </div>
  64     </body>
  65 </html>