list-marker-symbol-bidi.html (5412B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Symbol markers with unicode-bidi</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-lists/#markers" title="3. Markers"> 6 <link rel="match" href="list-marker-symbol-bidi-ref.html"> 7 <meta name="assert" content="This test checks that symbol markers are painted independently of unicode-bidi."> 8 <style> 9 section { 10 float: left; 11 } 12 .inside { 13 list-style-position: inside; 14 } 15 .embed-item, .embed-both { 16 unicode-bidi: embed; 17 } 18 .isolate-item, .isolate-both { 19 unicode-bidi: isolate; 20 } 21 .override-item, .override-both { 22 unicode-bidi: bidi-override; 23 } 24 .isolateoverride-item, .isolateoverride-both { 25 unicode-bidi: isolate-override; 26 } 27 .plaintext-item, .plaintext-both { 28 unicode-bidi: plaintext; 29 } 30 .embed-item::marker, .embed-none::marker, 31 .isolate-item::marker, .isolate-none::marker, 32 .override-item::marker, .override-none::marker, 33 .paintext-item::marker, .paintext-none::marker, 34 .isolateoverride-item::marker, .isolateoverride-none::marker { 35 unicode-bidi: normal; 36 } 37 ::marker { font-family: inherit; } 38 </style> 39 <section> 40 <ul dir="ltr"> 41 <li class="outside embed-none">text</li> 42 <li class="outside embed-item">text</li> 43 <li class="outside embed-marker">text</li> 44 <li class="outside embed-both">text</li> 45 <li class="inside embed-none">text</li> 46 <li class="inside embed-item">text</li> 47 <li class="inside embed-marker">text</li> 48 <li class="inside embed-both">text</li> 49 </ul> 50 <ul dir="rtl"> 51 <li class="outside isolate-none">text</li> 52 <li class="outside isolate-item">text</li> 53 <li class="outside isolate-marker">text</li> 54 <li class="outside isolate-both">text</li> 55 <li class="inside isolate-none">text</li> 56 <li class="inside isolate-item">text</li> 57 <li class="inside isolate-marker">text</li> 58 <li class="inside isolate-both">text</li> 59 </ul> 60 </section> 61 <section> 62 <ul dir="ltr"> 63 <li class="outside isolate-none">text</li> 64 <li class="outside isolate-item">text</li> 65 <li class="outside isolate-marker">text</li> 66 <li class="outside isolate-both">text</li> 67 <li class="inside isolate-none">text</li> 68 <li class="inside isolate-item">text</li> 69 <li class="inside isolate-marker">text</li> 70 <li class="inside isolate-both">text</li> 71 </ul> 72 <ul dir="rtl"> 73 <li class="outside isolate-none">text</li> 74 <li class="outside isolate-item">text</li> 75 <li class="outside isolate-marker">text</li> 76 <li class="outside isolate-both">text</li> 77 <li class="inside isolate-none">text</li> 78 <li class="inside isolate-item">text</li> 79 <li class="inside isolate-marker">text</li> 80 <li class="inside isolate-both">text</li> 81 </ul> 82 </section> 83 <section> 84 <ul dir="ltr"> 85 <li class="outside override-none">text</li> 86 <li class="outside override-item">text</li> 87 <li class="outside override-marker">text</li> 88 <li class="outside override-both">text</li> 89 <li class="inside override-none">text</li> 90 <li class="inside override-item">text</li> 91 <li class="inside override-marker">text</li> 92 <li class="inside override-both">text</li> 93 </ul> 94 <ul dir="rtl"> 95 <li class="outside override-none">text</li> 96 <li class="outside override-item">text</li> 97 <li class="outside override-marker">text</li> 98 <li class="outside override-both">text</li> 99 <li class="inside override-none">text</li> 100 <li class="inside override-item">text</li> 101 <li class="inside override-marker">text</li> 102 <li class="inside override-both">text</li> 103 </ul> 104 </section> 105 <section> 106 <ul dir="ltr"> 107 <li class="outside isolateoverride-none">text</li> 108 <li class="outside isolateoverride-item">text</li> 109 <li class="outside isolateoverride-marker">text</li> 110 <li class="outside isolateoverride-both">text</li> 111 <li class="inside isolateoverride-none">text</li> 112 <li class="inside isolateoverride-item">text</li> 113 <li class="inside isolateoverride-marker">text</li> 114 <li class="inside isolateoverride-both">text</li> 115 </ul> 116 <ul dir="rtl"> 117 <li class="outside isolateoverride-none">text</li> 118 <li class="outside isolateoverride-item">text</li> 119 <li class="outside isolateoverride-marker">text</li> 120 <li class="outside isolateoverride-both">text</li> 121 <li class="inside isolateoverride-none">text</li> 122 <li class="inside isolateoverride-item">text</li> 123 <li class="inside isolateoverride-marker">text</li> 124 <li class="inside isolateoverride-both">text</li> 125 </ul> 126 </section> 127 <section> 128 <ul dir="ltr"> 129 <li class="outside plaintext-none">text</li> 130 <li class="outside plaintext-item">text</li> 131 <li class="outside plaintext-marker">text</li> 132 <li class="outside plaintext-both">text</li> 133 <li class="inside plaintext-none">text</li> 134 <li class="inside plaintext-item">text</li> 135 <li class="inside plaintext-marker">text</li> 136 <li class="inside plaintext-both">text</li> 137 </ul> 138 <ul dir="rtl"> 139 <li class="outside plaintext-none">text</li> 140 <li class="outside plaintext-item">text</li> 141 <li class="outside plaintext-marker">text</li> 142 <li class="outside plaintext-both">text</li> 143 <li class="inside plaintext-none">text</li> 144 <li class="inside plaintext-item">text</li> 145 <li class="inside plaintext-marker">text</li> 146 <li class="inside plaintext-both">text</li> 147 </ul> 148 </section>