1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: text-indent on anonymous blocks</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop">
7 <meta name="flags" content="">
8 <meta name="assert" content="text-indent affects only the first line of a block container if that line is also the first formatted line of an element.">
9 <style type="text/css">
10 .container {
11 font: 20px/1 Ahem;
12 border: solid orange;
13 width: 12em;
14 }
15 .outer {
16 text-indent: 6em;
17 }
18 .inner {
19 text-indent: 0;
20 }
21 .outer {
22 }
23 .outer:before {
24 content: "BlockA";
25 display: block;
26 }
27
28 .controlA, .controlB {
29 background: red;
30 height: 3em;
31 width: 6em;
32 }
33 .controlA {
34 margin-left: 6em;
35 margin-bottom: -3em;
36 }
37 .controlB {
38 margin-top: -3em;
39 }
40 </style>
41 </head>
42 <body>
43 <p>There must be a 4-square checkerboard pattern in the orange box below
44 and no red present.</p>
45 <div class="container">
46 <div class="controlA"></div>
47 <div class="outer">
48 <div>
49 BlockA
50 <div>BlockA</div>
51 BlockB
52 <div class="inner">BlockB</div>
53 BlockB
54 </div>
55 </div>
56 <div class="controlB"></div>
57 </div>
58 </body>
59 </html>