letter-spacing-204-ref.html (2865B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <meta charset="utf-8"> 4 <title>CSS Test Reference</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 14 .block, .table, .flex, .grid { 15 display: inline-block; 16 width: 15px; 17 height: 15px; 18 background: orange; 19 } 20 .table { 21 display: inline-table; 22 } 23 .flex { 24 display: inline-flex; 25 } 26 .grid { 27 display: inline-grid; 28 } 29 .control p { 30 white-space: pre-wrap; 31 } 32 p { 33 letter-spacing: 0; 34 margin: 0; 35 } 36 </style> 37 38 <div id='instructions'>Test passes if the pattern is identical in all blue boxes.</div> 39 40 <div class="contain control"> 41 <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> 42 <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> 43 <p>A <span class="block"></span><span class="block"></span> D</p> 44 <p>A <span class="table"></span><span class="block"></span> D</p> 45 <p>A <span class="flex"></span><span class="block"></span> D</p> 46 <p>A <span class="grid"></span><span class="block"></span> D</p> 47 </div> 48 49 <div class="contain control"> 50 <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> 51 <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> 52 <p>A <span class="block"></span><span class="block"></span> D</p> 53 <p>A <span class="table"></span><span class="block"></span> D</p> 54 <p>A <span class="flex"></span><span class="block"></span> D</p> 55 <p>A <span class="grid"></span><span class="block"></span> D</p> 56 </div> 57 58 <div class="contain control"> 59 <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> 60 <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> 61 <p>A <span class="block"></span><span class="block"></span> D</p> 62 <p>A <span class="table"></span><span class="block"></span> D</p> 63 <p>A <span class="flex"></span><span class="block"></span> D</p> 64 <p>A <span class="grid"></span><span class="block"></span> D</p> 65 </div> 66 67 <div class="contain control"> 68 <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p> 69 <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p> 70 <p>A <span class="block"></span><span class="block"></span> D</p> 71 <p>A <span class="table"></span><span class="block"></span> D</p> 72 <p>A <span class="flex"></span><span class="block"></span> D</p> 73 <p>A <span class="grid"></span><span class="block"></span> D</p> 74 </div>