letter-spacing-nesting-003.xht (1531B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta charset="utf-8" /> 4 <title>CSS Text level 3 Test: letter spacing changes within element tree</title> 5 <link rel="author" title="Mike Bremford" href="http://bfo.com" /> 6 <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" /> 7 <link rel="match" href="reference/letter-spacing-nesting-003-ref.xht" /> 8 <meta name="assert" content="Changes in letter spacing affect the spacing between letters within that element only" /> 9 <style> 10 .test, .control { 11 font: 50px/1 monospace; 12 font-kerning: none; 13 } 14 .control { 15 position: absolute; 16 color: red; 17 z-index: -1; 18 white-space: pre; 19 } 20 .control span { 21 /* to ensure both background and text overlay correctly */ 22 background: linear-gradient(to bottom, red 50%, green 50%, green 100%); 23 } 24 .test span { 25 background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%); 26 } 27 .wide { 28 letter-spacing: 2ch; 29 } 30 .narrow { 31 letter-spacing: 1ch; 32 } 33 </style> 34 </head> 35 <body> 36 <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p> 37 <!-- A <ls> <ls> <bg>B <ls> <ls> C</bg> <ls> D --> 38 <div class="control">A <span>B C</span> D</div> 39 <div class="test narrow">A<span class="wide">BC</span>D</div> 40 </body> 41 </html>