1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <!-- ================================================================ -->
5 <!-- WARNING! This document contains significant trailing whitespace! -->
6 <!-- ================================================================ -->
7
8 <head>
9 <title>CSS Test: white-space: mixed tests</title>
10 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
11 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/text/white-space/mixed/001.html" type="text/html">
12 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#white-space-model">
13 <style type="text/css">
14 .control { display: inline; font: 1em/1 Ahem, sans-serif; background: red; color: white; }
15 .test { border: solid blue; font: 1em/1 Ahem; background: yellow; color: orange; width: 19em; }
16 .normal { white-space: normal; }
17 .nowrap { white-space: nowrap; }
18 .pre { white-space: pre; }
19 </style>
20 </head>
21 <body>
22 <div class="control">Ahem_font_required_for_this_test.</div>
23 <p>There should be a pretty yellow and orange pattern and the word "PASS" in orange on white below.</p>
24 <div class="test pre">1234567890123456789<span class="normal">
25 x <span>
26 x <span class="pre"></span> x<span>
27
28 </span> x x</span> x <span> x x </span> x <span class="pre">x</span>
29 1234</span>567890123456789 xxxx xxxx xx<span class="normal">x<span class="nowrap">x
30 xxxx </span> </span>x<span class="normal"> <span class="pre"> </span> <span class="pre"> </span> <span class="pre"> </span>
31 <span class="nowrap">
32 </span> </span> <span class="pre"> </span><span class="normal"> </span> <span class="nowrap">
33 </span><span class="normal"> </span> x x x x x x x
34 <span class="nowrap">x
35 x x x x x x x x x xxxx
36 xxxx xxxx xxxx </span>
37 x x x x x x x<span class="normal"> xxxxxxxxxxxxxxxxxxx<span class="pre"> x x x xxxx xxxx </span></span>
38 </div>
39
40 <p>The pattern inside the blue box above should look exactly like the reference rendering below:</p>
41
42 <div class="test pre">1234567890123456789
43 x x x x x x x x x x
44 1234567890123456789 xxxx xxxx xxxx xxxx
45 x x x x x x x x
46 x x x x x x x x x x xxxx xxxx xxxx xxxx
47 x x x x x x x
48 xxxxxxxxxxxxxxxxxxx x x x xxxx xxxx</div>
49
50 </body>
51 </html>