third_party/WebKit/LayoutTests/fast/css/word-spacing-characters-complex-text.html

   1 <!DOCTYPE html PU&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;LIC "-//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 Flexible Space Characters (adapted from word-spacing-characters-001.htm)</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 affects each space (U+0020)         and non-breaking space (U+00A0).">
   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     .controlcontrol {
  19       background: orange;
  20       width: 4em;
  21     }
  22
  23     .control span {
  24       background: blue;
  25       color: blue;
  26     }
  27     .spacer {
  28       padding-left: 4em;
  29     }
  30     .test span {
  31       word-spacing: 4em;
  32       background: orange;
  33       color: orange;
  34     }
  35     .ws-pre p {
  36       white-space: pre;
  37     }
  38   </style>
  39  </head>
  40  <body>
  41    <p>In each of the following pairs, the blue and orange bars must have equal lengths.</p>
  42
  43     <div>
  44       <p class="control"><span class="spacer"></span>&nbsp;</p>
  45       <p class="controlcontrol">&nbsp;</p>
  46     </div>
  47
  48    <div class="ws-normal">
  49      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902; <span class="spacer"></span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  50      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902; &#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  51    </div>
  52    <div class="ws-normal">
  53      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902; <span class="spacer"></span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  54      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;  &#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  55    </div>
  56    <div class="ws-pre">
  57      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902; <span class="spacer"></span> <span class="spacer"></span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  58      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;  &#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  59    </div>
  60
  61    <div class="ws-normal">
  62      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;<span class="spacer"></span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  63      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  64    </div>
  65    <div class="ws-normal">
  66      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;&nbsp;<span class="spacer"></span><span class="spacer"></span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  67      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;&nbsp;&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  68    </div>
  69    <div class="ws-pre">
  70      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;&nbsp;<span class="spacer"></span><span class="spacer"></span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  71      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;&nbsp;&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  72    </div>
  73
  74    <div class="ws-normal">
  75      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp; &nbsp; <span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  76 <!-- The original test has two spaces between the non-breaking spaces below. This causes WebKit to split the text into two-runs and drop the second of the two spaces.
  77      This entire test can be replaced with word-spacing-characters-001.htm from the css test suite when https://bugs.webkit.org/show_bug.cgi?id=89827 is fixed.-->
  78      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp; &nbsp;
  79          &#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  80    </div>
  81    <div class="ws-pre">
  82      <p class="control"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;  &nbsp;  <span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span><span class="spacer"></span>        &#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  83      <p class="test"><span>&#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;&nbsp;  &nbsp;     &#x935;&#x93F;&#x937;&#x92F;&#x94B;&#x902;</span></p>
  84    </div>
  85
  86  </body>
  87 </html>