1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>CSS Test: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:inside')</title>
6 <link rel="author" title="James Hopkins" href="http://idreamincode.co.uk/css21testsuite">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style">
8 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">
10 <meta name="flags" content="">
11 <meta name="assert" content="When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The presence of the :before pseudo element in this context, must have no affect on the position of the marker box of the associated element as it must still appear to the outside left edge of it's own principal box (since 'list-style-position:outside').">
12 <style type="text/css">
13 #test{
14 background:silver;
15 color:blue;
16 display:list-item;
17 font-size:85px;
18 margin:100px;
19 }
20 #test:before{
21 color:yellow;
22 content:'T';
23 display:list-item;
24 list-style-position:inside;
25 }
26 </style>
27 </head>
28 <body>
29 <p>To pass, there <strong>must</strong> be a blue bullet (filled-in circle) to the left outside edge of a grey box. Also, there <strong>must</strong> be a yellow bullet to the left inside edge of the grey box, with a yellow letter to the right of the yellow bullet, and there <strong>must</strong> be a blue letter below the yellow bullet, within the grey box.</p>
30 <div id="test">
31 T
32 </div>
33 </body>
34 </html>