marker-text-align-001.html (1557B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="match" href="marker-text-align-001-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 7 <link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property"> 8 <meta name="assert" content="Checks that 'text-align' doesn't apply nor inherit to ::marker."> 9 <style> 10 li { 11 /* Should not be inherited by ::marker */ 12 text-align: start; 13 text-align-all: start; 14 text-align-last: start; 15 } 16 ::marker { 17 /* Should have no effect */ 18 text-align: start; 19 text-align-all: start; 20 text-align-last: start; 21 } 22 li > div { 23 text-align: initial; 24 text-align-all: initial; 25 text-align-last: initial; 26 } 27 ol { 28 padding-left: 13ch; 29 } 30 li { 31 line-height: 16px; 32 height: 32px; 33 white-space: pre; 34 } 35 .disc { 36 list-style-type: disc; 37 } 38 .decimal { 39 list-style-type: decimal; 40 } 41 .string { 42 list-style-type: "[m]\a longtext"; 43 } 44 .content::marker { 45 content: "[m]\a longtext"; 46 } 47 .rtl-marker ::marker { 48 direction: rtl; 49 } 50 </style> 51 <ol> 52 <li class="disc"><div>disc</div></li> 53 <li class="decimal"><div>decimal</div></li> 54 <li class="string"><div>string</div></li> 55 <li class="content"><div>content</div></li> 56 </ol> 57 <ol class="rtl-marker"> 58 <li class="disc"><div>disc</div></li> 59 <li class="decimal"><div>decimal</div></li> 60 <li class="string"><div>string</div></li> 61 <li class="content"><div>content</div></li> 62 </ol>