marker-text-combine-upright.html (1426B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: ::marker supports 'text-combine-upright'</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="match" href="marker-text-combine-upright-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-writing-modes-4/#propdef-text-combine-upright"> 8 <meta name="assert" content="Checks that 'text-combine-upright' works well in ::marker, and doesn't crash."> 9 <style> 10 body { 11 writing-mode: vertical-lr; 12 } 13 ol, ul { 14 display: flow-root; 15 } 16 ul { 17 list-style-position: inside; 18 } 19 .decimal { 20 list-style-type: decimal; 21 } 22 .string { 23 list-style-type: "2. "; 24 } 25 .content ::marker { 26 content: "3. "; 27 } 28 ::marker { 29 /* Try to undo whatever styles browsers might have set on ::marker. */ 30 all: unset; 31 /* However, Blink still enforces `white-space: pre` on markers with outside position. 32 As a workaround, the reference expects `white-space: pre` too, but then we need 33 to set it here for Firefox. */ 34 white-space: pre; 35 text-combine-upright: all; 36 } 37 </style> 38 <ol class="decimal"><li>outside decimal</li></ol> 39 <ol class="string"><li>outside string</li></ol> 40 <ol class="content"><li>outside content</li></ol> 41 42 <ul class="decimal"><li>inside decimal</li></ul> 43 <ul class="string"><li>inside string</li></ul> 44 <ul class="content"><li>inside content</li></ul>