marker-unicode-bidi-default.html (2245B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>::marker has 'unicode-bidi: isolate' by default</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-default-ref.html"> 7 <meta name="assert" content="Checks that the markers are isolated from the list items by the bidi algorithm"> 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 color: blue; 36 } 37 span { 38 background: yellow; 39 } 40 </style> 41 <ol class="string ltr"> 42 <li><span>0</span></li> 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 </ol> 52 <ol class="string rtl"> 53 <li><span>0</span></li> 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 </ol> 63 <ol class="marker ltr"> 64 <li><span>0</span></li> 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 </ol> 74 <ol class="marker rtl"> 75 <li><span>0</span></li> 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 </ol>