1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: list-style-position - text-indent</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="author" title="James Hopkins" href="james(a)idreamincode.co.uk">
10 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#lists">
11 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style">
12 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#propdef-text-indent">
13 <link rel="help" href="http://www.w3.org/TR/html4/struct/lists.html#h-10.3.1">
14 <meta name="flags" content="ahem">
15 <meta name="assert" content="Text-indent should only format the indentation of the first line of text of a list-item's principal block box when the list-item's list-style-position is set to outside">
16
17 <style type="text/css">
18 li
19 {
20 background-color: black;
21 color: lime;
22 font: 32px/1 Ahem;
23 list-style-position: outside;
24 }
25
26 li#left {text-indent: 10%;}
27
28 li#center {text-indent: 50%;}
29
30 li#right {text-indent: 90%;}
31 </style>
32
33 </head>
34
35 <body>
36
37 <p>There must be 3 thick horizontal black bars below, each preceded by a bright green bullet (filled-in circle). Such bullet must be located outside of and prior to each of the 3 thick horizontal black bars. Inside of the thick horizontal black bars, there must be a small bright green square located respectively toward the left side of the first thick horizontal black bar, in the center of the second thick horizontal black bar and toward the right side of third thick horizontal black bar.</p>
38
39 <ul>
40 <li id="left">X</li>
41 </ul>
42
43 <ul>
44 <li id="center">X</li>
45 </ul>
46
47 <ul>
48 <li id="right">X</li>
49 </ul>
50
51 </body>
52 </html>