1 <!DOCTYPE html>
2 <html><head><title>CSS Text Test: Word Spacing</title>
3 <link href="mailto:nnethercote@mozilla.com" rel="author" title="Nicholas Nethercote">
4 <link href="http://www.w3.org/TR/css-text-3/#word-spacing" rel="help">
5 <link href="support/ahem.css" type="text/css" rel="stylesheet">
6 <link href="reference/text-word-spacing-ref.htm" rel="match">
7 <meta content="ahem" name="flags">
8 <meta content="Test checks that word-spacing works with percentages." name="assert">
9 <style>
10 @font-face {
11 font-family: Ahem;
12 src: url(support/Ahem.ttf);
13 }
14 /* We use Ahem to avoid very minor differences between the test and the
15 reference that occur with certain font+platform combinations. */
16 div { font-family: Ahem; font-size: 20px; }
17 div.wsn100 { word-spacing: -100%; }
18 div.wsn40 { word-spacing: -40%; }
19 div.ws0 { word-spacing: 0%; }
20 div.ws25 { word-spacing: calc(25% + 0px); }
21 div.ws100 { word-spacing: 100%; }
22 div.ws300 { word-spacing: calc(100% + 6em + 50%*4 - 12em/2); }
23 div.ws400p1 { word-spacing: calc(400% + 1em); }
24 </style>
25 </head><body>
26 <p>Test passes if the space between the words starts at zero and increases by
27 one on each subsequent line.</p>
28 <div class="wsn100">A Bc Def Ghij</div>
29 <div class="ws0">A Bc Def Ghij</div>
30 <div class="ws100">A Bc Def Ghij</div>
31 <div class="wsn40">A Bc Def Ghij</div>
32 <div class="ws300">A Bc Def Ghij</div>
33 <div class="ws25">A Bc Def Ghij</div>
34 <div class="ws400p1">A Bc Def Ghij</div>
35
36 </body></html>