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) - floated :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#float-position">
10 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">
11 <meta name="flags" content="">
12 <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). Since the :before pseudo element is floated left, The document tree content of the associated element must appear alongside (after) the :before pseudo element. 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).">
13 <style type="text/css">
14 #test{
15 background:silver;
16 color:blue;
17 display:list-item;
18 font-size:85px;
19 list-style-position:outside;
20 margin:100px;
21 }
22 #test:before{
23 color:yellow;
24 content:'T';
25 display:list-item;
26 float:left;
27 }
28 </style>
29 </head>
30 <body>
31 <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. Also, there <strong>must</strong> be a yellow letter to the inside left edge of the grey box, and a blue letter to the right of a yellow letter.</p>
32 <div id="test">
33 T
34 </div>
35 </body>
36 </html>