<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bug 1017335</title> <style> body { font-family:monospace; font-size:24px; } .outer { position:absolute; top:0; width:300px; } ul { margin:0; list-style-type:none; } span { display:inline-block; } .L { width:40px; text-align:right; } .R { width:40px; text-align:left; } .bullet { background:yellow; padding:0 2px; } .spacer { width:calc(0.5em - 2px); } </style> </head> <body> <div class="outer"> <div> <ul> <li>foo</li> </ul> </div> <div dir="rtl"> <ul> <li>bar</li> </ul> </div> </div> <!-- The yellow background of the bullet spans here should completely cover the bullets from the <ul> items above, even though the exact positioning of the list item images may not match the plain-text version of the bullets. Therefore, the testcase (with list-style-type:disc) and reference (none) should match. --> <div class="outer"> <div> <span class="L"><span class="bullet">•</span><span class="spacer"></span></span>foo </div> <div dir="rtl"> <span class="R"><span class="bullet">•</span><span class="spacer"></span></span>bar </div> </div> </body> </html>