letter-spacing-204.html (3608B)
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-204-ref.html'> 8 <meta name="assert" content="Letter spacing is not applied between atomic inlines, but is applied between a (run of) atomic inline(s) and an adjacent letter."> 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 .ls1 { 17 letter-spacing: 1em; 18 } 19 .block, .table, .flex, .grid { 20 display: inline-block; 21 width: 15px; 22 height: 15px; 23 background: orange; 24 } 25 .table { 26 display: inline-table; 27 } 28 .flex { 29 display: inline-flex; 30 } 31 .grid { 32 display: inline-grid; 33 } 34 .control p { 35 white-space: pre-wrap; 36 } 37 p { 38 letter-spacing: 0; 39 margin: 0; 40 } 41 span:not([class]) { 42 padding-top: 1em; 43 } 44 </style> 45 46 <div id='instructions'>Test passes if the pattern is identical in all blue boxes.</div> 47 48 <div class="contain"> 49 <p class="ls1">A<img src="support/swatch-orange.png"><img src="support/swatch-orange.png">D</p> 50 <p class="ls1">A<img class="block" src="support/swatch-orange.png"><img class="block" src="support/swatch-orange.png">D</p> 51 <p class="ls1">A<span class="block"></span><span class="block"></span>D</p> 52 <p class="ls1">A<span class="table"></span><span class="block"></span>D</p> 53 <p class="ls1">A<span class="flex"></span><span class="block"></span>D</p> 54 <p class="ls1">A<span class="grid"></span><span class="block"></span>D</p> 55 </div> 56 57 <div class="contain"> 58 <p class="ls1">A<span><img src="support/swatch-orange.png"></span><img src="support/swatch-orange.png">D</p> 59 <p class="ls1">A<span><img class="block" src="support/swatch-orange.png"></span><img class="block" src="support/swatch-orange.png">D</p> 60 <p class="ls1">A<span><span class="block"></span></span><span class="block"></span>D</p> 61 <p class="ls1">A<span><span class="table"></span></span><span class="block"></span>D</p> 62 <p class="ls1">A<span><span class="flex"></span></span><span class="block"></span>D</p> 63 <p class="ls1">A<span><span class="grid"></span></span><span class="block"></span>D</p> 64 </div> 65 66 <div class="contain"> 67 <p class="ls1"><span>A</span><img src="support/swatch-orange.png"><span><img src="support/swatch-orange.png"></span>D</p> 68 <p class="ls1"><span>A</span><img class="block" src="support/swatch-orange.png"><span><img class="block" src="support/swatch-orange.png"></span>D</p> 69 <p class="ls1"><span>A</span><span class="block"></span><span><span class="block"></span></span>D</p> 70 <p class="ls1"><span>A</span><span class="table"></span><span><span class="block"></span></span>D</p> 71 <p class="ls1"><span>A</span><span class="flex"></span><span><span class="block"></span></span>D</p> 72 <p class="ls1"><span>A</span><span class="grid"></span><span><span class="block"></span></span>D</p> 73 </div> 74 75 <div class="contain control"> 76 <p>A <img src="support/swatch-orange.png"><img src="support/swatch-orange.png"> D</p> 77 <p>A <img class="block" src="support/swatch-orange.png"><img class="block" src="support/swatch-orange.png"> D</p> 78 <p>A <span class="block"></span><span class="block"></span> D</p> 79 <p>A <span class="table"></span><span class="block"></span> D</p> 80 <p>A <span class="flex"></span><span class="block"></span> D</p> 81 <p>A <span class="grid"></span><span class="block"></span> D</p> 82 </div>