third_party/WebKit/LayoutTests/fast/text/atsui-negative-spacing-features.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>ATSUI spacing features with negative values</title>
   6 <style type="text/css">
   7 div.test { width: 200px; border: solid blue 1px; margin-bottom: 5px; }
   8 div.rtl { direction: rtl; font-family: 'Lucida Grande'; line-height: 18px; }
   9 div.ref { width: 200px; border: solid green 1px; }
  10 div.word { word-spacing: -2px; }
  11 div.letter { letter-spacing: -1px; }
  12 </style>
  13 </head>
  14 <body>
  15 <p>
  16 Test for negative spacing values in complex text rendering.
  17 </p>
  18 Each green box should be identical to the blue box it follows, except for accents.
  19 <hr>
  20 <table>
  21 <tr style="text-align: center;">
  22 <td>Word spacing</td>
  23 <td>Letter spacing</td>
  24 </tr>
  25 <tr style="vertical-align: top;">
  26 <td>
  27 <div class="word">
  28 <div class="test rtl">
  29 &#x05d9;&#x05b0;&#x05d4;&#x05b4;&#x05d9;,
  30 &#x05d0;&#x05b8;&#x05d7;&#x05b4;&#x05d9;,
  31 &#x05dc;&#x05b0;&#x05da;&#x05b8;
  32 &#x05e1;&#x05b5;&#x05e4;&#x05b6;&#x05e8;
  33 &#x05e9;&#x05c1;&#x05b0;&#x05dc;&#x05b7;&#x05d7;&#x05b0;&#x05ea;&#x05bc;&#x05b4;&#x05d9;&#x05d5;
  34 &#x05d5;&#x05bc;&#x05de;&#x05b4;&#x05de;&#x05b0;&#x05db;&#x05bc;&#x05b6;&#x05e8;&#x05b6;&#x05ea;
  35 &#x05e6;&#x05b0;&#x05de;&#x05b4;&#x05d9;&#x05ea;&#x05d5;&#x05bc;&#x05ea;
  36 &#x05dc;&#x05b8;&#x05da;&#x05b0;
  37 &#x05de;&#x05b0;&#x05db;&#x05b7;&#x05e8;&#x05b0;&#x05ea;&#x05bc;&#x05b4;&#x05d9;&#x05d5;.
  38 </div>
  39 <div class="test">
  40 Lore&#x0300;m ipsum dolor sit ame&#x0300;t, consectetuer adipiscing e&#x0300;lit.
  41 </div>
  42 <div class="ref">
  43 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  44 </div>
  45 </div>
  46 </td>
  47 <td>
  48 <div class="letter">
  49 <div class="test rtl">
  50 &#x05d9;&#x05b0;&#x05d4;&#x05b4;&#x05d9;,
  51 &#x05d0;&#x05b8;&#x05d7;&#x05b4;&#x05d9;,
  52 &#x05dc;&#x05b0;&#x05da;&#x05b8;
  53 &#x05e1;&#x05b5;&#x05e4;&#x05b6;&#x05e8;
  54 &#x05e9;&#x05c1;&#x05b0;&#x05dc;&#x05b7;&#x05d7;&#x05b0;&#x05ea;&#x05bc;&#x05b4;&#x05d9;&#x05d5;
  55 &#x05d5;&#x05bc;&#x05de;&#x05b4;&#x05de;&#x05b0;&#x05db;&#x05bc;&#x05b6;&#x05e8;&#x05b6;&#x05ea;
  56 &#x05e6;&#x05b0;&#x05de;&#x05b4;&#x05d9;&#x05ea;&#x05d5;&#x05bc;&#x05ea;
  57 &#x05dc;&#x05b8;&#x05da;&#x05b0;
  58 &#x05de;&#x05b0;&#x05db;&#x05b7;&#x05e8;&#x05b0;&#x05ea;&#x05bc;&#x05b4;&#x05d9;&#x05d5;.
  59 </div>
  60 <div class="test">
  61 Lore&#x0300;m ipsum dolor sit ame&#x0300;t, consectetue&#x0300;r adipiscing e&#x0300;lit.
  62 </div>
  63 <div class="ref">
  64 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  65 </div>
  66 </div>
  67 </td>
  68 </tr>
  69 </table>
  70 </body>
  71 </html>