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/dynamic/001.html" type="text/html">
12 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#white-space-model">
13 <meta name="flags" content="ahem interact">
14 <style type="text/css">
15 div { font: 1em/1 Ahem, monospace; color: navy; }
16 .bn { white-space: normal; }
17 .bp { white-space: pre; }
18 div:hover .an { white-space: normal; }
19 div:hover .ap { white-space: pre; }
20 div:hover .aG { color: green; }
21 div:hover .aB { color: brown; }
22 div:hover .abG { background: green; }
23 div:hover .abL { background: lime; }
24 </style>
25 </head>
26 <body>
27 <p>The picture below should change from a smiley-face to a landscape when you hover over it.</p>
28
29 <!-- note that spaces at the start of a line collapse in white-space: normal -->
30
31 <div>
32 <span class="bp an"> </span><span class="bn ap aG"> ###</span><span class="bp ap"><!-- keep newline -->
33 </span><span class="bp an aG"> ##<span class="abL"> </span> </span><span class="bp ap aG">##
34 </span><span class="bp an aG"> #<span class="abL"> #
35 <!-- keep newline --></span> #</span><span class="bn ap"><!-- keep newline -->
36 </span><span class="bp an aG"> #</span><span class="bp an aG abL"><!-- keep newline -->
37 #</span><span class="bn ap"><!-- keep newline -->
38 </span><span class="bp an aB"> #</span><span class="bn ap"><!-- keep newline -->
39 </span><span class="bp ap aB"> #</span><span class="bn ap"><!-- keep newline -->
40 </span><span class="bp an aB"> #</span><span class="bp ap"><!-- keep newline -->
41 <!-- keep newline --></span><span class="bn ap aB"> #</span><span class="bn an"><!-- keep newline -->
42 <!-- keep newline --></span><span class="bp an"> </span><span class="bp ap aG"> #</span><span class="bn ap"><!-- keep newline -->
43 </span><span class="bp an"><!-- keep newline -->
44 <!-- keep newline --></span><span class="bn an aB">#
45 </span><span class="bp ap"> </span><span class="bp an aG"> <span class="abL"> #
46 #</span></span><span class="bn ap"><!-- keep newline -->
47 </span><span class="bp an aB"> #<span class="bn ap"> </span>
48 </span><span class="bp an aG"># </span><span class="bn ap aB"><!-- keep newline -->
49 #</span><span class="bp ap"> </span><span class="bn ap aB"> #
50 </span><span class="bp an aB"> #<span class="bn ap"> </span>
51 #</span><span class="bn ap"><!-- keep newline -->
52 </span><span class="bp ap aG abL"> ##</span><span class="bp an aG abL"># #
53 # #
54 ##<span class="abG"> </span> ##
55 ###</span><span class="bn ap abL"> </span>
56 </div>
57
58 </body>
59 </html>