third_party/WebKit/LayoutTests/css2.1/20110323/word-spacing-characters-003.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3  <head>
   4   <title>CSS Test: word-spacing on Zero-Width Characters</title>
   5   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
   6   <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#spacing-props">
   7   <meta name="flags" content="">
   8   <meta name="assert" content="Word-spacing does not affect zero-width characters.">
   9   <style type="text/css">
  10     div {
  11       margin: 1em;
  12       font-family: monospace;
  13       page-break-inside: avoid;
  14     }
  15     div p {
  16       margin: 0;
  17     }
  18
  19     .control span {
  20       background: blue;
  21       color: blue;
  22     }
  23     .test span {
  24       word-spacing: 4em;
  25       background: orange;
  26       color: orange;
  27     }
  28     .ws-pre p {
  29       white-space: pre;
  30     }
  31   </style>
  32  </head>
  33  <body>
  34    <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p>
  35
  36    <!-- ZERO-WIDTH SPACE -->
  37    <div class="ws-normal">
  38      <p class="control"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  39      <p class="test"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  40    </div>
  41    <div class="ws-pre">
  42      <p class="control"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  43      <p class="test"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  44    </div>
  45
  46    <!-- ZERO-WIDTH NO-BREAK SPACE -->
  47    <div class="ws-normal">
  48      <p class="control"><span>AB</span></p>
  49      <p class="test"><span>AB</span></p>
  50    </div>
  51    <div class="ws-pre">
  52      <p class="control"><span>AB</span></p>
  53      <p class="test"><span>AB</span></p>
  54    </div>
  55
  56    <!-- ZERO-WIDTH NON-JOINER -->
  57    <div class="ws-normal">
  58      <p class="control"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  59      <p class="test"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  60    </div>
  61    <div class="ws-pre">
  62      <p class="control"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  63      <p class="test"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  64    </div>
  65
  66    <!-- ZERO-WIDTH JOINER -->
  67    <div class="ws-normal">
  68      <p class="control"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  69      <p class="test"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  70    </div>
  71    <div class="ws-pre">
  72      <p class="control"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  73      <p class="test"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  74    </div>
  75
  76  </body>
  77 </html>