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: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#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 this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's principal box (since 'list-style-position:outside').">
13 <style type="text/css">
14 #test{
15 background:silver;
16 color:blue;
17 display:list-item;
18 font-size:85px;
19 margin:100px;
20 }
21 #test:before{
22 color:yellow;
23 content:'T';
24 display:list-item;
25 float:left;
26 list-style-position:inside;
27 }
28 </style>
29 </head>
30 <body>
31 <p>To pass, there <strong>must</strong> be blue bullet (filled-in circle) to the outside left edge of a grey box. Inside the grey box, there <strong>must</strong> be a yellow bullet to the left of a yellow letter. There <strong>must</strong> also be a blue letter to the right of the yellow letter.</p>
32 <div id="test">
33 T
34 </div>
35 </body>
36 </html>