white-space-mixed-004.xht (3366B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-29 --> 12 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/text/white-space/mixed/dynamic/001.html" type="text/html"/> 13 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#white-space-model" /> 14 15 <meta name="flags" content="ahem interact"/> 16 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 17 <style type="text/css"> 18 div { font: 1em/1 Ahem, monospace; color: navy; } 19 .bn { white-space: normal; } 20 .bp { white-space: pre; } 21 div:hover .an { white-space: normal; } 22 div:hover .ap { white-space: pre; } 23 div:hover .aG { color: green; } 24 div:hover .aB { color: brown; } 25 div:hover .abG { background: green; } 26 div:hover .abL { background: lime; } 27 </style> 28 </head> 29 <body> 30 <p>The picture below should change from a smiley-face to a landscape when you hover over it.</p> 31 32 <!-- note that spaces at the start of a line collapse in white-space: normal --> 33 34 <div> 35 <span class="bp an"> </span><span class="bn ap aG"> ###</span><span class="bp ap"><!-- keep newline --> 36 </span><span class="bp an aG"> ##<span class="abL"> </span> </span><span class="bp ap aG">## 37 </span><span class="bp an aG"> #<span class="abL"> # 38 <!-- keep newline --></span> #</span><span class="bn ap"><!-- keep newline --> 39 </span><span class="bp an aG"> #</span><span class="bp an aG abL"><!-- keep newline --> 40 #</span><span class="bn ap"><!-- keep newline --> 41 </span><span class="bp an aB"> #</span><span class="bn ap"><!-- keep newline --> 42 </span><span class="bp ap aB"> #</span><span class="bn ap"><!-- keep newline --> 43 </span><span class="bp an aB"> #</span><span class="bp ap"><!-- keep newline --> 44 <!-- keep newline --></span><span class="bn ap aB"> #</span><span class="bn an"><!-- keep newline --> 45 <!-- keep newline --></span><span class="bp an"> </span><span class="bp ap aG"> #</span><span class="bn ap"><!-- keep newline --> 46 </span><span class="bp an"><!-- keep newline --> 47 <!-- keep newline --></span><span class="bn an aB"># 48 </span><span class="bp ap"> </span><span class="bp an aG"> <span class="abL"> # 49 #</span></span><span class="bn ap"><!-- keep newline --> 50 </span><span class="bp an aB"> #<span class="bn ap"> </span> 51 </span><span class="bp an aG"># </span><span class="bn ap aB"><!-- keep newline --> 52 #</span><span class="bp ap"> </span><span class="bn ap aB"> # 53 </span><span class="bp an aB"> #<span class="bn ap"> </span> 54 #</span><span class="bn ap"><!-- keep newline --> 55 </span><span class="bp ap aG abL"> ##</span><span class="bp an aG abL"># # 56 # # 57 ##<span class="abG"> </span> ## 58 ###</span><span class="bn ap abL"> </span> 59 </div> 60 61 </body> 62 </html>