marker-tab-size.html (1468B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>::marker supports 'tab-size'</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/#propdef-tab-size"> 7 <link rel="match" href="marker-tab-size-ref.html"> 8 <meta name="assert" content="Checks that ::marker supports 'tab-size', both explicitly set or inherited from an ancestor"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 10 <style> 11 div { 12 float: left; 13 font: 25px/1 Ahem; 14 } 15 .inside { 16 list-style-position: inside; 17 width: 250px; 18 } 19 .outside { 20 list-style-position: outside; 21 width: 100px; 22 margin-left: 150px; 23 } 24 ol { 25 padding: 0; 26 } 27 .tab-size.explicit ::marker, 28 .tab-size.inherit { 29 tab-size: 1; 30 } 31 .marker-string { 32 list-style-type: "X\9p"; 33 } 34 .marker-content::marker { 35 content: "X\9p\9p"; 36 } 37 </style> 38 <div class="inside"> 39 <ol class="tab-size explicit"> 40 <li class="marker-string">É</li> 41 <li class="marker-content">É</li> 42 </ol> 43 <ol class="tab-size inherit"> 44 <li class="marker-string">É</li> 45 <li class="marker-content">É</li> 46 </ol> 47 </div> 48 <div class="outside"> 49 <ol class="tab-size explicit"> 50 <li class="marker-string">É</li> 51 <li class="marker-content">É</li> 52 </ol> 53 <ol class="tab-size inherit"> 54 <li class="marker-string">É</li> 55 <li class="marker-content">É</li> 56 </ol> 57 </div>