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:outside')</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 and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The position of the marker box of the associated element must still appear to the outside left edge of it's principal box (since 'list-style-position:outside') and should be positioned towards the top of this principal box. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).">
12 <style type="text/css">
13 #test{
14 background:silver;
15 color:blue;
16 display:list-item;
17 font-size:85px;
18 list-style-position:outside;
19 margin:100px;
20 }
21 #test:before{
22 color:yellow;
23 content:'T';
24 display:list-item;
25 }
26 </style>
27 </head>
28 <body>
29 <p>To pass, there <strong>must</strong> be <em>either</em> a blue <em>or</em> yellow bullet (filled-in circle) to the outside left edge of a grey box, with a yellow letter to the right of that bullet. There <strong>must</strong> also be a blue letter below the yellow letter.</p>
30 <div id="test">
31 T
32 </div>
33 </body>
34 </html>