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

   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       background: orange;
  25       color: orange;
  26     }
  27     .ws-pre p {
  28       white-space: pre;
  29     }
  30   </style>
  31  </head>
  32  <body>
  33    <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p>
  34
  35    <!-- ZERO-WIDTH SPACE -->
  36    <div class="ws-normal">
  37      <p class="control"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  38      <p class="test"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  39    </div>
  40    <div class="ws-pre">
  41      <p class="control"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  42      <p class="test"><span>A&#x200B;&#x200B;&#x200B;&#x200B;B</span></p>
  43    </div>
  44
  45    <!-- ZERO-WIDTH NO-BREAK SPACE -->
  46    <div class="ws-normal">
  47      <p class="control"><span>AB</span></p>
  48      <p class="test"><span>AB</span></p>
  49    </div>
  50    <div class="ws-pre">
  51      <p class="control"><span>AB</span></p>
  52      <p class="test"><span>AB</span></p>
  53    </div>
  54
  55    <!-- ZERO-WIDTH NON-JOINER -->
  56    <div class="ws-normal">
  57      <p class="control"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  58      <p class="test"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  59    </div>
  60    <div class="ws-pre">
  61      <p class="control"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  62      <p class="test"><span>A&zwnj;&zwnj;&zwnj;&zwnj;B</span></p>
  63    </div>
  64
  65    <!-- ZERO-WIDTH JOINER -->
  66    <div class="ws-normal">
  67      <p class="control"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  68      <p class="test"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  69    </div>
  70    <div class="ws-pre">
  71      <p class="control"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  72      <p class="test"><span>A&zwj;&zwj;&zwj;&zwj;B</span></p>
  73    </div>
  74
  75  </body>
  76 </html>