marker-letter-spacing.html (2181B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>::marker supports 'letter-spacing'</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 6 <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> 7 <!-- It's unclear whether letter-spacing should add trailing spacing (https://github.com/w3c/csswg-drafts/issues/1518). 8 The 1st reference assumes no trailing spacing, the 2nd one does. --> 9 <link rel="match" href="marker-letter-spacing-ref-001.html"> 10 <link rel="match" href="marker-letter-spacing-ref-002.html"> 11 <meta name="assert" content="Checks that ::marker supports 'letter-spacing', both explicitly set or inherited from an ancestor"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 div { 15 float: left; 16 font: 25px/1 Ahem; 17 } 18 .inside { 19 list-style-position: inside; 20 width: 250px; 21 } 22 .outside { 23 list-style-position: outside; 24 width: 100px; 25 margin-left: 150px; 26 } 27 ol { 28 padding: 0; 29 } 30 .letter-spacing.explicit ::marker, 31 .letter-spacing.inherit { 32 letter-spacing: 25px; 33 } 34 .marker-disc { 35 list-style-type: disc; 36 } 37 .marker-decimal { 38 list-style-type: decimal; 39 } 40 .marker-string { 41 list-style-type: "Xp"; 42 } 43 .marker-content::marker { 44 content: "Xpp"; 45 } 46 </style> 47 <div class="inside"> 48 <ol class="letter-spacing explicit"> 49 <li class="marker-disc">É</li> 50 <li class="marker-decimal">É</li> 51 <li class="marker-string">É</li> 52 <li class="marker-content">É</li> 53 </ol> 54 <ol class="letter-spacing inherit"> 55 <li class="marker-disc">É</li> 56 <li class="marker-decimal">É</li> 57 <li class="marker-string">É</li> 58 <li class="marker-content">É</li> 59 </ol> 60 </div> 61 <div class="outside"> 62 <ol class="letter-spacing explicit"> 63 <li class="marker-disc">É</li> 64 <li class="marker-decimal">É</li> 65 <li class="marker-string">É</li> 66 <li class="marker-content">É</li> 67 </ol> 68 <ol class="letter-spacing inherit"> 69 <li class="marker-disc">É</li> 70 <li class="marker-decimal">É</li> 71 <li class="marker-string">É</li> 72 <li class="marker-content">É</li> 73 </ol> 74 </div>