marker-font-variant-numeric-normal-ref.html (2618B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Reftest Reference</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="mismatch" href="marker-font-variant-numeric-default-ref.html"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 @font-face { 9 /* This font looks different with 'font-variant-numeric: tabular-nums' */ 10 font-family: 'Exo 2'; 11 src: local('Exo 2'), 12 url('/css/css-fonts/support/fonts/Exo2-SemiBold.otf') format("opentype"); 13 } 14 ol { 15 float: left; 16 width: 50px; 17 line-height: 25px; 18 list-style-type: none; 19 font-family: "Exo 2"; 20 } 21 span { 22 display: inline-block; 23 font: 25px/1 Ahem; 24 vertical-align: top; 25 width: 25px; 26 height: 25px; 27 } 28 @supports not (selector(::before::marker) and selector(::after::marker)) { 29 /* Allow the test to pass on browsers that support ::marker but not nested 30 ::before::marker nor ::after::marker. On these browsers, the test isn't 31 able to set `font-variant-numeric: normal` on the nested pseudo-elements, 32 so expect `font-variant-numeric: tabular-nums` instead. */ 33 .before, .after { 34 font-variant-numeric: tabular-nums; 35 } 36 } 37 </style> 38 <ol class="decimal"> 39 <li>1. <span>X</span></li> 40 <li>2. <span>X</span></li> 41 <li>3. <span>X</span></li> 42 <li>4. <span>X</span></li> 43 <li>5. <span>X</span></li> 44 <li>6. <span>X</span></li> 45 <li>7. <span>X</span></li> 46 <li>8. <span>X</span></li> 47 <li>9. <span>X</span></li> 48 </ol> 49 <ol class="string"> 50 <li>1. <span>X</span></li> 51 <li>2. <span>X</span></li> 52 <li>3. <span>X</span></li> 53 <li>4. <span>X</span></li> 54 <li>5. <span>X</span></li> 55 <li>6. <span>X</span></li> 56 <li>7. <span>X</span></li> 57 <li>8. <span>X</span></li> 58 <li>9. <span>X</span></li> 59 </ol> 60 <ol class="marker"> 61 <li>1. <span>X</span></li> 62 <li>2. <span>X</span></li> 63 <li>3. <span>X</span></li> 64 <li>4. <span>X</span></li> 65 <li>5. <span>X</span></li> 66 <li>6. <span>X</span></li> 67 <li>7. <span>X</span></li> 68 <li>8. <span>X</span></li> 69 <li>9. <span>X</span></li> 70 </ol> 71 <ol class="before"> 72 <li>1. <span>X</span></li> 73 <li>2. <span>X</span></li> 74 <li>3. <span>X</span></li> 75 <li>4. <span>X</span></li> 76 <li>5. <span>X</span></li> 77 <li>6. <span>X</span></li> 78 <li>7. <span>X</span></li> 79 <li>8. <span>X</span></li> 80 <li>9. <span>X</span></li> 81 </ol> 82 <ol class="after"> 83 <li>1. <span>X</span></li> 84 <li>2. <span>X</span></li> 85 <li>3. <span>X</span></li> 86 <li>4. <span>X</span></li> 87 <li>5. <span>X</span></li> 88 <li>6. <span>X</span></li> 89 <li>7. <span>X</span></li> 90 <li>8. <span>X</span></li> 91 <li>9. <span>X</span></li> 92 </ol>