letter-spacing-206-ref.html (2064B)
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 <style type='text/css'> 7 @import "/fonts/ahem.css"; 8 .contain { 9 font: 20px/1 Ahem; 10 border: solid blue; 11 margin: 1em; 12 float: left; } 13 .control p { 14 white-space: pre; 15 } 16 p { 17 letter-spacing: 0; 18 margin: 0; 19 word-break: break-all; 20 float: left; 21 clear: left; 22 border-right: solid orange 1em; 23 background: yellow; 24 } 25 </style> 26 27 <div id='instructions'>Test passes if the pattern is identical in all three blue boxes.</div> 28 29 <div class="contain control"> 30 <p>A A A B B B</p> 31 <!-- middle owned by containing block: simple --> 32 <p>AAA BBB</p> 33 <p>A A AB B B</p> 34 <!-- middle owned by containing block: double nesting --> 35 <p>AAA B B B</p> 36 <p>A A A B B B</p> 37 <!-- middle owned by inline: simple --> 38 <p>AAA BBB</p> 39 <p>A A AB B B</p> 40 <!-- middle owned by inline: double nesting --> 41 <p>AAAB B B</p> 42 <p>A A A B B B</p> 43 <!-- middle containing space --> 44 <p>AAA BBB</p> 45 <p>AAA B B B</p> 46 </div> 47 48 <div class="contain control"> 49 <p>A A A B B B</p> 50 <!-- middle owned by containing block: simple --> 51 <p>AAA BBB</p> 52 <p>A A AB B B</p> 53 <!-- middle owned by containing block: double nesting --> 54 <p>AAA B B B</p> 55 <p>A A A B B B</p> 56 <!-- middle owned by inline: simple --> 57 <p>AAA BBB</p> 58 <p>A A AB B B</p> 59 <!-- middle owned by inline: double nesting --> 60 <p>AAAB B B</p> 61 <p>A A A B B B</p> 62 <!-- middle containing space --> 63 <p>AAA BBB</p> 64 <p>AAA B B B</p> 65 </div> 66 67 <div class="contain control"> 68 <p>A A A B B B</p> 69 <!-- middle owned by containing block: simple --> 70 <p>AAA BBB</p> 71 <p>A A AB B B</p> 72 <!-- middle owned by containing block: double nesting --> 73 <p>AAA B B B</p> 74 <p>A A A B B B</p> 75 <!-- middle owned by inline: simple --> 76 <p>AAA BBB</p> 77 <p>A A AB B B</p> 78 <!-- middle owned by inline: double nesting --> 79 <p>AAAB B B</p> 80 <p>A A A B B B</p> 81 <!-- middle containing space --> 82 <p>AAA BBB</p> 83 <p>AAA B B B</p> 84 </div>