src/third_party/WebKit/LayoutTests/fast/regions/webkit-flow-double-pagination-float-push-expected.html

   1 <!doctype html>
   2
   3  <style>
   4     .test_paragraph {
   5         margin-top: 1em;
   6         margin-bottom: 1em;
   7         text-align: justify;
   8         font-size: 10px;
   9         font-family: Ahem;
  10         -webkit-font-smoothing: none;
  11     }
  12
  13     #top_paragraph {
  14         margin-top: 1em;
  15         margin-bottom: 1em;
  16     }
  17
  18     #region1 {
  19         border: 1px solid black;
  20         width: 390px;
  21         height: 90px;
  22         padding: 5px;
  23     }
  24
  25     #first-box1 {
  26         border: 1px solid blue;
  27         border-bottom: none;
  28     }
  29
  30     #second-box1 {
  31         margin:10px;
  32         border: 1px solid green;
  33         border-bottom: none;
  34         width: 366px;
  35         height: 83px;
  36     }
  37
  38     #region2 {
  39         border: 1px solid black;
  40         width: 290px;
  41         height: 110px;
  42         padding: 5px;
  43     }
  44
  45     #first-box2 {
  46         border: 1px solid blue;
  47         border-top: none;
  48         border-bottom: none;
  49     }
  50
  51     #second-box2 {
  52         margin-left:10px;
  53         margin-top: -5px;
  54         padding: 0px;
  55         border: 1px solid green;
  56         border-top: none;
  57         border-bottom: none;
  58         width: 266px;
  59         height: 120px;
  60     }
  61
  62     #first-paragraph3 {
  63         margin-top: 0px;
  64     }
  65
  66     #region3 {
  67         border: 1px solid black;
  68         width: 390px;
  69         height: 290px;
  70         padding: 5px;
  71     }
  72
  73     #first-box3 {
  74         border: 1px solid blue;
  75         border-top: none;
  76     }
  77
  78     #second-box3 {
  79         margin:10px;
  80         margin-top: -5px;
  81         border: 1px solid green;
  82         border-top: none;
  83         width: 366px;
  84     }
  85
  86     #imgFloat1 {
  87         float: left;
  88         background-color:green;
  89         width: 130px;
  90         height: 110px;
  91     }
  92
  93     #imgFloat2 {
  94         float: right;
  95         background-color:yellow;
  96         width: 130px;
  97         height: 130px;
  98     }
  99 </style>
 100
 101 <div id="top_paragraph">In the example below, the first float pushes content into region #2, and the second float pushes both floats into region #3.</div>
 102
 103 <div id="content">
 104     <div id="region1">
 105         <div id="first-box1">
 106             <div id="second-box1"></div>
 107         </div>
 108     </div>
 109
 110     <div id="region2">
 111         <div id="first-box2">
 112             <div id="second-box2"></div>
 113         </div>
 114     </div>
 115
 116     <div id="region3">
 117         <div id="first-box3">
 118             <div id="second-box3">
 119                 <div class="test_paragraph" id="first-paragraph3">This <img id="imgFloat1"><img id="imgFloat2">line of text should not get out of the region. This line of text should not get out of the region. This line of text should not get out of the region. This line of text should not get out of the region.</div>
 120                 <div class="test_paragraph" id="second-paragraph3">This line of text should not get out of the region. This line of text should not get out of the region. This line of text should not get out of the region. This line of text should not get out of the region.</div>
 121                 <div class="test_paragraph">This line of text should not get out of the region.</div>
 122             </div>
 123         </div>
 124     </div>
 125 </div>