letter-spacing-206.html (4020B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <meta charset="utf-8"> 4 <title>letter-spacing at element boundaries</title> 5 <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> 6 <link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> 7 <link rel='match' href='reference/letter-spacing-206-ref.html'> 8 <meta name="assert" content="Letter spacing affects unwrapped min-content and max-content sizes."> 9 <style type='text/css'> 10 @import "/fonts/ahem.css"; 11 .contain { 12 font: 20px/1 Ahem; 13 border: solid blue; 14 margin: 1em; 15 float: left; } 16 .ls0 { 17 letter-spacing: 0; 18 } 19 .ls1 { 20 letter-spacing: 1em; 21 } 22 .ls3 { 23 letter-spacing: 3em; 24 } 25 .control p { 26 white-space: pre; 27 } 28 p { 29 letter-spacing: 0; 30 margin: 0; 31 word-break: break-all; 32 float: left; 33 clear: left; 34 border-right: solid orange 1em; 35 background: yellow; 36 } 37 .squash { 38 width: 0; 39 } 40 </style> 41 42 <div id='instructions'>Test passes if the pattern is identical in all three blue boxes.</div> 43 44 <div class="contain"> 45 <p class="ls1">AAA<span>BBB</span></p> 46 <!-- middle owned by containing block: simple --> 47 <p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p> 48 <p><span class="ls1">AAA</span><span class="ls1">BBB</span></p> 49 <!-- middle owned by containing block: double nesting --> 50 <p class="ls3"><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p> 51 <p class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p> 52 <!-- middle owned by inline: simple --> 53 <p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p> 54 <p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p> 55 <!-- middle owned by inline: double nesting --> 56 <p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p> 57 <p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p> 58 <!-- middle containing space --> 59 <p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p> 60 <p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p> 61 </div> 62 63 <div class="contain" style="white-space: nowrap; width: 14em;"> 64 <div class="squash"> 65 <p class="ls1"><span>AAA</span><span>BBB</span></p> 66 <!-- middle owned by containing block: simple --> 67 <p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p> 68 <p><span class="ls1">AAA</span><span class="ls1">BBB</span></p> 69 <!-- middle owned by containing block: double nesting --> 70 <p class="ls3"><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p> 71 <p class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p> 72 <!-- middle owned by inline: simple --> 73 <p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p> 74 <p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p> 75 <!-- middle owned by inline: double nesting --> 76 <p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p> 77 <p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p> 78 <!-- middle containing space --> 79 <p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p> 80 <p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p> 81 </div> 82 </div> 83 84 <div class="contain control"> 85 <p>A A A B B B</p> 86 <!-- middle owned by containing block: simple --> 87 <p>AAA BBB</p> 88 <p>A A AB B B</p> 89 <!-- middle owned by containing block: double nesting --> 90 <p>AAA B B B</p> 91 <p>A A A B B B</p> 92 <!-- middle owned by inline: simple --> 93 <p>AAA BBB</p> 94 <p>A A AB B B</p> 95 <!-- middle owned by inline: double nesting --> 96 <p>AAAB B B</p> 97 <p>A A A B B B</p> 98 <!-- middle containing space --> 99 <p>AAA BBB</p> 100 <p>AAA B B B</p> 101 </div>