layout/reftests/text-overflow/float-edges-1.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <title>Testcase for bug 944200</title>
   9   <style type="text/css">
  10 html,body {
  11   color:black; background-color:white; font:20px/1 Courier New, Courier, monospace; padding:0; margin:0;
  12 }
  13
  14 .container {
  15   border: 1px solid black;
  16   width: 150px;
  17   overflow: hidden;
  18   text-overflow: ellipsis;
  19   text-overflow: ellipsis ellipsis;
  20   white-space: nowrap;
  21 }
  22
  23 .float {
  24   float: right;
  25   background: yellow;
  26   width: 50px;
  27   text-indent: 0;
  28 }
  29 .left { float: left; }
  30 .h { height: 3.5em; }
  31   </style>
  32 </head>
  33 <body>
  34
  35 <div style="float:left">
  36 <div class="container"><div class="float">FF</div>aaaaaaaaaaaaaaaaaaaaaa</div>
  37 <div class="container"><div class="float">FF</div>aaaaaaaaaa</div>
  38 <div class="container"><div class="float">FF</div>aaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaa</div>
  39 <div class="container"><div class="float">FF</div>aaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaa</div>
  40
  41 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa</div>
  42 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa<br>aaaaaaaaaaaaaaaaaaaaaa</div>
  43 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa<br>aaaaaaaaaa</div>
  44 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa<br><span style="margin-left:-20px">aaaaaaaaaa</span></div>
  45 </div>
  46
  47
  48 <div style="float:right">
  49 <div class="container">
  50 aaaaaaaaaa<br>
  51 aaaaaaaaaaaaaaaaaaaaaa<br><div class="float h">FF</div>
  52 aaaaaaaaaaaaaaaaaaaaaa<br>
  53 aaaaaaa<br>
  54 aaaaaaaaaa<br>
  55 aaaaaaaaaaaaaaaaaaaaaa<br>
  56 aaaaaaaaaa<br>
  57 aaaaaaaaaaaaaaaaaaaaaa<br>
  58 </div>
  59
  60 <div class="container" style="text-indent:-20px">
  61 aaaaaaaaaa<br>
  62 aaaaaaaaaaaaaaaaaaaaaa<br><div class="float left h">FF</div>
  63 <span style="margin-left:-20px">aaaaaaaaaaaaaaaaaaaaaa</span><br>
  64 aaaaaaaaaaaaaaaaaaaaaa<br>
  65 aaaa<br>
  66 <span style="margin-left:-20px">aaaaaaaaaa</span><br>
  67 aaaaaaaaaa<br>
  68 aaaaaaaaaaaaaaaaaaaaaa<br>
  69 </div>
  70
  71 </div>
  72 </body>
  73 </html>