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