marker-unicode-bidi-normal.html (2282B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>::marker accepts 'unicode-bidi: normal'</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="match" href="marker-unicode-bidi-normal-ref.html"> 7 <meta name="assert" content="Checks that the marker default 'unicode-bidi: isolate' can be overridden with 'unicode-bidi: normal'"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 ol { 11 float: left; 12 list-style-position: inside; 13 } 14 .rtl { 15 direction: rtl; 16 } 17 18 li:nth-child(1) { --marker: "\627 \644 " } 19 li:nth-child(2) { --marker: "\61 \627 \644 " } 20 li:nth-child(3) { --marker: "\627 \644 \62 " } 21 li:nth-child(4) { --marker: "\61 \627 \644 \62 " } 22 li:nth-child(5) { --marker: "\61 \62 \627 \644 " } 23 li:nth-child(6) { --marker: "\627 \644 \61 \62 " } 24 li:nth-child(7) { --marker: "\31 \627 \644 " } 25 li:nth-child(8) { --marker: "\627 \644 \32 " } 26 li:nth-child(9) { --marker: "\31 \627 \644 \32 " } 27 28 .string > li { 29 list-style-type: var(--marker); 30 } 31 .marker > li::marker { 32 content: var(--marker); 33 } 34 ::marker { 35 unicode-bidi: normal; 36 color: blue; 37 } 38 span { 39 background: yellow; 40 } 41 </style> 42 <ol class="string ltr"> 43 <li><span>0</span></li> 44 <li><span>0</span></li> 45 <li><span>0</span></li> 46 <li><span>0</span></li> 47 <li><span>0</span></li> 48 <li><span>0</span></li> 49 <li><span>0</span></li> 50 <li><span>0</span></li> 51 <li><span>0</span></li> 52 </ol> 53 <ol class="string rtl"> 54 <li><span>0</span></li> 55 <li><span>0</span></li> 56 <li><span>0</span></li> 57 <li><span>0</span></li> 58 <li><span>0</span></li> 59 <li><span>0</span></li> 60 <li><span>0</span></li> 61 <li><span>0</span></li> 62 <li><span>0</span></li> 63 </ol> 64 <ol class="marker ltr"> 65 <li><span>0</span></li> 66 <li><span>0</span></li> 67 <li><span>0</span></li> 68 <li><span>0</span></li> 69 <li><span>0</span></li> 70 <li><span>0</span></li> 71 <li><span>0</span></li> 72 <li><span>0</span></li> 73 <li><span>0</span></li> 74 </ol> 75 <ol class="marker rtl"> 76 <li><span>0</span></li> 77 <li><span>0</span></li> 78 <li><span>0</span></li> 79 <li><span>0</span></li> 80 <li><span>0</span></li> 81 <li><span>0</span></li> 82 <li><span>0</span></li> 83 <li><span>0</span></li> 84 <li><span>0</span></li> 85 </ol>