bullet-space-1.html (1221B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Bug 1017335</title> 7 <style> 8 body { 9 font-family:monospace; 10 font-size:24px; 11 } 12 .outer { 13 position:absolute; 14 top:0; 15 width:300px; 16 } 17 ul { 18 margin:0; 19 list-style-type:disc; 20 } 21 span { 22 display:inline-block; 23 } 24 .L { 25 width:40px; 26 text-align:right; 27 white-space: pre; 28 } 29 .R { 30 width:40px; 31 text-align:left; 32 white-space: pre; 33 } 34 .bullet { 35 background:yellow; 36 } 37 ::marker { font-family:inherit; } 38 </style> 39 </head> 40 41 <body> 42 43 <div class="outer"> 44 <div> 45 <ul> 46 <li>foo</li> 47 </ul> 48 </div> 49 50 <div dir="rtl"> 51 <ul> 52 <li>bar</li> 53 </ul> 54 </div> 55 </div> 56 57 <!-- The yellow background of the bullet spans here should completely cover the 58 bullets from the <ul> items above, even though the exact positioning of the 59 list item images may not match the plain-text version of the bullets. 60 Therefore, the testcase (with list-style-type:disc) and reference (none) 61 should match. --> 62 <div class="outer"> 63 <div> 64 <span class="L"><span class="bullet">•</span> </span>foo 65 </div> 66 67 <div dir="rtl"> 68 <span class="R"><span class="bullet">•</span> </span>bar 69 </div> 70 </div> 71 72 </body> 73 74 </html>