third_party/WebKit/LayoutTests/css2.1/20110323/word-spacing-characters-002-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 Fixed-Width Space 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 fixed-width spaces.">
   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    <!-- IDEOGRAPHIC SPACE -->
  36    <div class="ws-normal">
  37      <p class="control"><span>A&#x3000;&#x3000;&#x3000;&#x3000;B</span></p>
  38      <p class="test"><span>A&#x3000;&#x3000;&#x3000;&#x3000;B</span></p>
  39    </div>
  40    <div class="ws-pre">
  41      <p class="control"><span>A&#x3000;&#x3000;&#x3000;&#x3000;B</span></p>
  42      <p class="test"><span>A&#x3000;&#x3000;&#x3000;&#x3000;B</span></p>
  43    </div>
  44
  45    <!-- EN QUAD -->
  46    <div class="ws-normal">
  47      <p class="control"><span>A&#x2000;&#x2000;&#x2000;&#x2000;B</span></p>
  48      <p class="test"><span>A&#x2000;&#x2000;&#x2000;&#x2000;B</span></p>
  49    </div>
  50    <div class="ws-pre">
  51      <p class="control"><span>A&#x2000;&#x2000;&#x2000;&#x2000;B</span></p>
  52      <p class="test"><span>A&#x2000;&#x2000;&#x2000;&#x2000;B</span></p>
  53    </div>
  54
  55    <!-- EM QUAD -->
  56    <div class="ws-normal">
  57      <p class="control"><span>A&#x2001;&#x2001;&#x2001;&#x2001;B</span></p>
  58      <p class="test"><span>A&#x2001;&#x2001;&#x2001;&#x2001;B</span></p>
  59    </div>
  60    <div class="ws-pre">
  61      <p class="control"><span>A&#x2001;&#x2001;&#x2001;&#x2001;B</span></p>
  62      <p class="test"><span>A&#x2001;&#x2001;&#x2001;&#x2001;B</span></p>
  63    </div>
  64
  65    <!-- EN SPACE -->
  66    <div class="ws-normal">
  67      <p class="control"><span>A&ensp;&ensp;&ensp;&ensp;B</span></p>
  68      <p class="test"><span>A&ensp;&ensp;&ensp;&ensp;B</span></p>
  69    </div>
  70    <div class="ws-pre">
  71      <p class="control"><span>A&ensp;&ensp;&ensp;&ensp;B</span></p>
  72      <p class="test"><span>A&ensp;&ensp;&ensp;&ensp;B</span></p>
  73    </div>
  74
  75    <!-- EM SPACE -->
  76    <div class="ws-normal">
  77      <p class="control"><span>A&emsp;&emsp;&emsp;&emsp;B</span></p>
  78      <p class="test"><span>A&emsp;&emsp;&emsp;&emsp;B</span></p>
  79    </div>
  80    <div class="ws-pre">
  81      <p class="control"><span>A&emsp;&emsp;&emsp;&emsp;B</span></p>
  82      <p class="test"><span>A&emsp;&emsp;&emsp;&emsp;B</span></p>
  83    </div>
  84
  85    <!-- THREE-PER-EM SPACE -->
  86    <div class="ws-normal">
  87      <p class="control"><span>A&#x2004;&#x2004;&#x2004;&#x2004;B</span></p>
  88      <p class="test"><span>A&#x2004;&#x2004;&#x2004;&#x2004;B</span></p>
  89    </div>
  90    <div class="ws-pre">
  91      <p class="control"><span>A&#x2004;&#x2004;&#x2004;&#x2004;B</span></p>
  92      <p class="test"><span>A&#x2004;&#x2004;&#x2004;&#x2004;B</span></p>
  93    </div>
  94
  95    <!-- FOUR-PER-EM SPACE -->
  96    <div class="ws-normal">
  97      <p class="control"><span>A&#x2005;&#x2005;&#x2005;&#x2005;B</span></p>
  98      <p class="test"><span>A&#x2005;&#x2005;&#x2005;&#x2005;B</span></p>
  99    </div>
 100    <div class="ws-pre">
 101      <p class="control"><span>A&#x2005;&#x2005;&#x2005;&#x2005;B</span></p>
 102      <p class="test"><span>A&#x2005;&#x2005;&#x2005;&#x2005;B</span></p>
 103    </div>
 104
 105    <!-- SIX-PER-EM SPACE -->
 106    <div class="ws-normal">
 107      <p class="control"><span>A&#x2006;&#x2006;&#x2006;&#x2006;B</span></p>
 108      <p class="test"><span>A&#x2006;&#x2006;&#x2006;&#x2006;B</span></p>
 109    </div>
 110    <div class="ws-pre">
 111      <p class="control"><span>A&#x2006;&#x2006;&#x2006;&#x2006;B</span></p>
 112      <p class="test"><span>A&#x2006;&#x2006;&#x2006;&#x2006;B</span></p>
 113    </div>
 114
 115    <!-- FIGURE SPACE -->
 116    <div class="ws-normal">
 117      <p class="control"><span>A&#x2007;&#x2007;&#x2007;&#x2007;B</span></p>
 118      <p class="test"><span>A&#x2007;&#x2007;&#x2007;&#x2007;B</span></p>
 119    </div>
 120    <div class="ws-pre">
 121      <p class="control"><span>A&#x2007;&#x2007;&#x2007;&#x2007;B</span></p>
 122      <p class="test"><span>A&#x2007;&#x2007;&#x2007;&#x2007;B</span></p>
 123    </div>
 124
 125    <!-- PUNCTUATION SPACE -->
 126    <div class="ws-normal">
 127      <p class="control"><span>A&#x2008;&#x2008;&#x2008;&#x2008;B</span></p>
 128      <p class="test"><span>A&#x2008;&#x2008;&#x2008;&#x2008;B</span></p>
 129    </div>
 130    <div class="ws-pre">
 131      <p class="control"><span>A&#x2008;&#x2008;&#x2008;&#x2008;B</span></p>
 132      <p class="test"><span>A&#x2008;&#x2008;&#x2008;&#x2008;B</span></p>
 133    </div>
 134
 135    <!--THIN SPACE  -->
 136    <div class="ws-normal">
 137      <p class="control"><span>A&thinsp;&thinsp;&thinsp;&thinsp;B</span></p>
 138      <p class="test"><span>A&thinsp;&thinsp;&thinsp;&thinsp;B</span></p>
 139    </div>
 140    <div class="ws-pre">
 141      <p class="control"><span>A&thinsp;&thinsp;&thinsp;&thinsp;B</span></p>
 142      <p class="test"><span>A&thinsp;&thinsp;&thinsp;&thinsp;B</span></p>
 143    </div>
 144
 145    <!-- HAIR SPACE -->
 146    <div class="ws-normal">
 147      <p class="control"><span>A&#x200A;&#x200A;&#x200A;&#x200A;B</span></p>
 148      <p class="test"><span>A&#x200A;&#x200A;&#x200A;&#x200A;B</span></p>
 149    </div>
 150    <div class="ws-pre">
 151      <p class="control"><span>A&#x200A;&#x200A;&#x200A;&#x200A;B</span></p>
 152      <p class="test"><span>A&#x200A;&#x200A;&#x200A;&#x200A;B</span></p>
 153    </div>
 154
 155    <!-- NARROW NO-BREAK SPACE -->
 156    <div class="ws-normal">
 157      <p class="control"><span>A&#x202F;&#x202F;&#x202F;&#x202F;B</span></p>
 158      <p class="test"><span>A&#x202F;&#x202F;&#x202F;&#x202F;B</span></p>
 159    </div>
 160    <div class="ws-pre">
 161      <p class="control"><span>A&#x202F;&#x202F;&#x202F;&#x202F;B</span></p>
 162      <p class="test"><span>A&#x202F;&#x202F;&#x202F;&#x202F;B</span></p>
 163    </div>
 164
 165    <!-- MEDIUM MATHEMATICAL SPACE -->
 166    <div class="ws-normal">
 167      <p class="control"><span>A&#x205F;&#x205F;&#x205F;&#x205F;B</span></p>
 168      <p class="test"><span>A&#x205F;&#x205F;&#x205F;&#x205F;B</span></p>
 169    </div>
 170    <div class="ws-pre">
 171      <p class="control"><span>A&#x205F;&#x205F;&#x205F;&#x205F;B</span></p>
 172      <p class="test"><span>A&#x205F;&#x205F;&#x205F;&#x205F;B</span></p>
 173    </div>
 174
 175
 176  </body>
 177 </html>