src/third_party/WebKit/LayoutTests/fast/regions/webkit-flow-inlines-inside-regions-bounds-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-family: Ahem;
   9         font-size: 10px;
  10         -webkit-font-smoothing: none;
  11     }
  12
  13     /* Created to justify the last line of text in the div */
  14     #paragraph1:after {
  15         content: " ___________________";
  16         line-height: 0;
  17         visibility: hidden;
  18     }
  19
  20     #region1 {
  21         border: 1px solid black;
  22         width: 190px;
  23         height: 90px;
  24         padding: 5px;
  25     }
  26
  27     #first-box1 {
  28         border: 1px solid blue;
  29         border-bottom: none;
  30     }
  31
  32     #second-box1 {
  33         margin:10px;
  34         border: 1px solid green;
  35         border-bottom: none;
  36         width: 166px;
  37         height: 83px;
  38     }
  39
  40     #first-paragraph2 {
  41         margin-top: 0px;
  42     }
  43
  44     /* Created to justify the last line of text in the div */
  45     #third-paragraph2:after {
  46         content: " ___________________";
  47         line-height: 0;
  48         visibility: hidden;
  49     }
  50
  51     #region2 {
  52         border: 1px solid black;
  53         width: 290px;
  54         height: 170px;
  55         padding: 5px;
  56     }
  57
  58     #first-box2 {
  59         border: 1px solid blue;
  60         border-top: none;
  61         border-bottom: none;
  62     }
  63
  64     #second-box2 {
  65         margin-left:10px;
  66         margin-top: -5px;
  67         padding: 0px;
  68         border: 1px solid green;
  69         border-top: none;
  70         border-bottom: none;
  71         width: 266px;
  72         height: 180px;
  73     }
  74
  75     #paragraph3 {
  76         margin-top: 0px;
  77     }
  78
  79     #region3 {
  80         border: 1px solid black;
  81         width: 110px;
  82         height: 110px;
  83         padding: 5px;
  84     }
  85
  86     #first-box3 {
  87         border: 1px solid blue;
  88         border-top: none;
  89     }
  90
  91     #second-box3 {
  92         margin:10px;
  93         margin-top: -5px;
  94         border: 1px solid green;
  95         border-top: none;
  96         width: 86px;
  97     }
  98 </style>
  99
 100 <div id="content">
 101     <div id="region1">
 102         <div id="first-box1">
 103             <div id="second-box1">
 104                 <div class="test_paragraph" id="paragraph1">This line of text should not get out of the region. This line of text should not get out of the</div>
 105             </div>
 106         </div>
 107     </div>
 108
 109     <div id="region2">
 110         <div id="first-box2">
 111             <div id="second-box2">
 112                 <div class="test_paragraph" id="first-paragraph2">region. This line of text should not get out of the region. This line of text should not get out of the region.</div>
 113                 <div class="test_paragraph">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>
 114                 <div class="test_paragraph" id="third-paragraph2">This line of text should not get out of the region. This line of text should</div>
 115             </div>
 116         </div>
 117     </div>
 118
 119     <div id="region3">
 120         <div id="first-box3">
 121             <div id="second-box3">
 122                 <div class="test_paragraph" id="paragraph3">not get out of the region.</div>
 123             </div>
 124         </div>
 125     </div>
 126 </div>