third_party/WebKit/LayoutTests/fast/text/text-letter-spacing.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2  "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <title>letter-spacing.html</title>
   6 <style type="text/css">
   7 body { overflow: hidden; }
   8 p {
   9     text-indent: 10em;
  10     background-color: #eee;
  11 }
  12 p.desc {
  13     text-indent: 0em;
  14     background-color: white;
  15 }
  16 .opaque {
  17     opacity: 0.5;
  18     background-color: #ccf;
  19 }
  20
  21 .ls0 {
  22     letter-spacing: 0em;
  23 }
  24 .ls05 {
  25     letter-spacing: 0.5em;
  26 }
  27 .ls200 {
  28     letter-spacing: 200em;
  29 }
  30 .ls10000 {
  31     letter-spacing: 100000em;
  32 }
  33
  34 .ls-05 {
  35     letter-spacing: -0.5em;
  36 }
  37 .ls-200 {
  38     letter-spacing: -200em;
  39 }
  40 .ls-10000 {
  41     letter-spacing: -10000em;
  42 }
  43
  44 .rtl {
  45     direction: rtl;
  46     unicode-bidi: bidi-override;
  47 }
  48
  49 </style>
  50 </head>
  51 <body>
  52 <!-- these should render fine (tests regular, partially opaque text) -->
  53 <p class="desc">The following lines test various combinations of
  54 letter-spacing (especially negative values) and opacity. All of the lines
  55 should say "Hello, world" but the spacing and background shading will vary
  56 from test to test. The W3C specs are fairly silent on how user agents
  57 should handle unusual values of letter-spacing, especially negative ones,
  58 which are explicitly implementation-dependent. Different browsers will
  59 render these differently, but hopefully the WebKit ports will be consistent,
  60 at least.</p>
  61
  62 <p class="desc">The first line should be normally spaced.</p>
  63 <p><span class="ls0">Hello, world</span></p>
  64
  65 <p class="desc">The next line tests a slight positive letter spacing, and
  66 should be slightly spaced out (wider than normal).</p>
  67 <p><span class="ls05">Hello, world</span></p>
  68
  69 <p class="desc">The next line tests a large positive letter spacing, and
  70 should be *very* spaced out. You may only see an 'H' and a 'w', perhaps
  71 on two different lines, unless you scroll way to the right.</p>
  72 <p><span class="ls200">Hello, world</span></p>
  73
  74 <p class="desc">The next line tests a very large positive letter spacing,
  75 and should also be *very* spaced out. You may only see an 'H' and a 'w',
  76 perhaps on two different lines, unless you scroll way to the right.</p>
  77 <p><span class="ls10000">Hello, world</span></p>
  78
  79 <p class="desc">The next line tests a small negative line spacing, and
  80 should be crammed backwards</p>
  81 <p><span class="ls-05">Hello, world</span></p>
  82
  83 <p class="desc">The next line tests a large negative line spacing, and
  84 should be just display an 'H'</p>
  85 <p><span class="ls-200">Hello, world</span></p>
  86
  87 <p class="desc">The next line tests a very large negative line spacing,
  88 and should just have an 'H'.</p>
  89 <p><span class="ls-10000">Hello, world</span></p>
  90
  91 <p class="desc">The next few lines test the interaction with opacity.
  92 The first line should be normally spaced out, slightly opaque,
  93 and on a differently-colored background</p>
  94 <p><span class="ls0 opaque">Hello, world</span></p>
  95
  96 <p class="desc">The next line tests a small positive line spacing, and
  97 should be slightly spaced out, opaque, and on a background.</p>
  98 <p><span class="ls05 opaque">Hello, world</span></p>
  99
 100 <p class="desc">The next line tests a large positive line spacing, and
 101 should be very widely spaced, on a background.</p>
 102 <p><span class="ls200 opaque">Hello, world</span></p>
 103
 104 <p class="desc">The next line tests a very large positive line spacing,
 105 and should be very widely spaced but blank, and on a background.</p>
 106 <p><span class="ls10000 opaque">Hello, world</span></p>
 107
 108 <p class="desc">The next line tests a small negative line spacing, and should
 109 be blank.</p>
 110 <p><span class="ls-05 opaque">Hello, world</span></p>
 111
 112 <p class="desc">The next line tests a large negative line spacing, and
 113 should be blank.</p>
 114 <p><span class="ls-200 opaque">Hello, world</span></p>
 115
 116 <p class="desc">The next line tests a very large negative line spacing,
 117 and should be blank.</p>
 118 <p><span class="ls-10000 opaque">Hello, world</span></p>
 119
 120 <p class="desc">Now we do a few basic right-to-left tests:</p>
 121
 122 <p class="desc">The first line should be normally spaced.</p>
 123 <p><span class="ls0 rtl">Hello, world</span></p>
 124
 125 <p class="desc">The next line should be slightly spaced out (wider than
 126 normal).</p>
 127 <p><span class="ls05 rtl">Hello, world</span></p>
 128 <p class="desc">The next line should be crammed backwards, just as if
 129 it wasn't right-to-left</p>
 130 <p><span class="ls-05 rtl">Hello, world</span></p>
 131
 132 <p class="desc">The next line tests a large negative line spacing, and
 133 should just print a 'd'</p>
 134 <p><span class="ls-200 rtl">Hello, world</span></p>
 135
 136 <p class="desc">Now, opacity as well -
 137 The next line should be printed right to left, slightly spaced out
 138 (wider than normal), and on a background.</p>
 139 <p><span class="ls05 rtl opaque">Hello, world</span></p>
 140
 141 <p class="desc">The next line tests a small negative line spacing, and
 142 should be blank.</p>
 143 <p><span class="ls-05 rtl opaque">Hello, world</span></p>
 144
 145 <p class="desc">The next line tests a large negative line spacing, and
 146 it should be blank.</p>
 147 <p><span class="ls-200 rtl opaque">Hello, world</span></p>
 148
 149 </body>
 150 </html>