layout/reftests/text-overflow/anonymous-block-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     Any copyright is dedicated to the Public Domain.
   4     http://creativecommons.org/licenses/publicdomain/
   5 -->
   6 <html><head>
   7 <title>text-overflow: anonymous block</title>
   8 <style type="text/css">
   9 @font-face {
  10   font-family: DejaVuSansMono;
  11   src: url(../fonts/DejaVuSansMono.woff);
  12 }
  13 html,body {
  14     color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  15 }
  16
  17 .test {
  18   overflow:hidden;
  19   width:50%;
  20   height:10em;
  21
  22   border:1px solid black;
  23   white-space:pre;
  24   margin-left:2em;
  25   margin-bottom:2em;
  26   line-height:1.5em;
  27 }
  28 i {
  29   display:inline-block;
  30   height: 3em;
  31   width: 5em;
  32   background: blue;
  33   font-style:normal;
  34 }
  35 span {
  36   position:relative;
  37   background:pink;
  38   top:40px;
  39   left:16em;
  40 }
  41
  42 .t1 {width:6em;}
  43 .t2 {width:2em;}
  44 .t3 {width:25em;}
  45 .t4 {width:17.5em;}
  46
  47 input { font-family:DejaVuSansMono; }
  48
  49 </style>
  50
  51 </head><body>
  52
  53
  54 <div class="test t1"><x>Some ove<m>&#x2026;</m><span><i style="display:block;">anonymous<br>block</i>and</span> unin<m>&#x2026;</m></x></div>
  55 <div class="test t2"><x>So<m>&#x2026;</m><i style="display:block;">anonymous<br>block</i>an<m>&#x2026;</m></x></div>
  56 <div style="position:absolute;"><div class="test t3" style="border-style:none;padding:1px"><x>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m style="padding-left:16em">&#x2026;</m></div></div>
  57 <div class="test t3"><x>Some overly <span>l&nbsp;&nbsp;&nbsp;</span><span><i style="display:block;">anonymous<br>block</i>and</span> uninformative sentence</x></div>
  58 <div class="test t4"><x>Some overly <m>&#x2026;</m><span>long<i style="display:block;">anonymous<br>block</i>a&nbsp;&nbsp;</span> uninformative sentence</x></div>
  59
  60 <input size="4" placeholder="pla&#x2026;">
  61 <input size="4" dir="rtl" placeholder="der&#x2026;">
  62 <input size="4" placeholder="plaX">
  63 <input size="4" dir="rtl" placeholder="Xder">
  64
  65 </body>
  66 </html>