outside-marker-paint-order.html (1007B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Pseduo: painting order of outside ::marker box</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 12 <link rel="match" href="outside-marker-paint-order-ref.html"> 13 <style> 14 li { 15 margin-left: 100px; 16 text-indent: -100px; 17 font: 20px/1 Ahem; 18 color: red; 19 } 20 21 x { color: grey; } 22 .before::before { content: "XXXXXXXX"; color: grey; } 23 .after::after { content: "XXXXXXXX"; color: grey; } 24 .both::before,.both::after {content: "XXXX"; color: grey; } 25 </style> 26 </head> 27 <body> 28 29 <pre>There should be no red areas.<pre> 30 <ol><li><x>XXXXXXXX</x></ol> 31 <ol><li class="before"></ol> 32 <ol><li class="after"></ol> 33 <ol><li class="both"></ol> 34 35 </body> 36 </html>