layout/reftests/text-overflow/float-edges-1-ref.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>Reference: 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   white-space: nowrap;
  19 }
  20
  21 .float {
  22   float: right;
  23   background: yellow;
  24   width: 50px;
  25   text-indent: 0;
  26 }
  27 .left { float: left; }
  28 .h { height: 3.5em; }
  29   </style>
  30 </head>
  31 <body>
  32
  33 <div style="float:left">
  34 <div class="container"><div class="float">FF</div>aaaaaaa&#x2026;</div>
  35 <div class="container"><div class="float">FF</div>aaaaaaa&#x2026;</div>
  36 <div class="container"><div class="float">FF</div>aaaaaaa&#x2026;<br>aaaaaaaaaaa&#x2026;</div>
  37 <div class="container"><div class="float">FF</div>aaaaaaa&#x2026;<br>aaaaaaaaaa</div>
  38
  39 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa</div>
  40 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa<br>aaaaaaaaaaa&#x2026;</div>
  41 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa<br>aaaaaaaaaa</div>
  42 <div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa<br><span style="margin-left:-20px">&nbsp;&nbsp;&#x2026;aaaaaaa</span></div>
  43 </div>
  44
  45
  46 <div style="float:right">
  47 <div class="container">
  48 aaaaaaaaaa<br>
  49 aaaaaaaaaaa&#x2026;<br><div class="float h">FF</div>
  50 aaaaaaa&#x2026;<br>
  51 aaaaaaa<br>
  52 aaaaaaa&#x2026;<br>
  53 aaaaaaa&#x2026;<br>
  54 aaaaaaaaaa<br>
  55 aaaaaaaaaaa&#x2026;<br>
  56 </div>
  57
  58 <div class="container" style="text-indent:-20px">
  59 &nbsp;&nbsp;&#x2026;aaaaaaa<br>
  60 aaaaaaaaaaa&#x2026;<br><div class="float left h">FF</div>
  61 <span style="margin-left:-20px">&nbsp;&nbsp;&#x2026;aaaaaa&#x2026;</span><br>
  62 aaaaaaa&#x2026;<br>
  63 aaaa<br>
  64 <span style="margin-left:-20px">&nbsp;&nbsp;&#x2026;aaaaaaa</span><br>
  65 aaaaaaaaaa<br>
  66 aaaaaaaaaaa&#x2026;<br>
  67 </div>
  68
  69 </div>
  70 </body>
  71 </html>