third_party/WebKit/LayoutTests/fast/css/absolute-inline-alignment.html

   1 <!DOCTYPE html>
   2 <style>
   3     body {
   4         height: 200%;
   5     }
   6     div {
   7         width: 400px;
   8         height: 25px;
   9         background-color: silver;
  10         text-align: center;
  11         margin: 8px 0;
  12     }
  13
  14     #float {
  15         float: left;
  16         width: 25px;
  17         height: 25px;
  18         background-color: rgba(0, 0, 255, 0.5);
  19     }
  20     #absolute {
  21         position: absolute;
  22         width: 25px;
  23         height: 25px;
  24         background-color: rgba(0, 0, 255, 0.5);
  25     }
  26 </style>
  27 <div><span id="absolute"></span>Lorem ipsum dolor sit amet</div>
  28 <div> <span id="absolute"></span> Lorem ipsum dolor sit amet</div>
  29 <div><span id="absolute"></span> Lorem ipsum<span id="absolute"></span>    dolor sit amet</div>
  30 <div><span id="absolute"></span> <span id="absolute"></span> Lorem ipsum dolor sit amet</div>
  31 <div>  <span id="absolute"></span> <span id="absolute"></span>    Lorem ipsum dolor sit amet</div>
  32 <div> <span id="absolute"></span>     Lorem ipsum dolor sit amet</div>
  33 <div> <span id="absolute"></span> Lorem ipsum dolor sit amet</div>
  34 <div><span id="float"></span>Lorem ipsum dolor sit amet</div>
  35 <div><span id="absolute"></span> Lorem ipsum<span id="absolute"></span>    dolor sit amet</div>
  36 <div> <span id="absolute"></span> <span id="float"></span> Lorem ipsum dolor sit amet</div>
  37 <div> <span id="float"></span> <span id="absolute"></span> Lorem ipsum dolor sit amet</div>
  38 <div>  <span id="absolute"></span> <span id="float"></span>    Lorem ipsum dolor sit amet</div>