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: containing block - absolutely positioned elements inside inline-level relative elements</title>
7
8 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
9 <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
10 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
11 <meta content="If the nearest positioned ancestor of an absolutely positioned element is inline-level and direction is 'ltr', then the top and left of the containing block are the top and left padding edges of the first box generated by the ancestor, and the bottom and right are the bottom and right padding edges of the last box of the ancestor" name="assert">
12 <meta content="ahem" name="flags">
13
14 <style type="text/css">
15 div
16 {
17 color: white;
18 direction: ltr;
19 font: 100px/2 Ahem;
20 width: 7em;
21 }
22
23 span
24 {
25 color: red;
26 position: relative;
27 }
28
29 span span
30 {
31 background-color: green;
32 height: 1em;
33 position: absolute;
34 width: 1em;
35 }
36
37 #top-left
38 {
39 left: 0;
40 top: 0;
41 }
42
43 #top-right
44 {
45 right: 0;
46 top: 0;
47 }
48
49 #bottom-left
50 {
51 bottom: 0;
52 left: 0;
53 }
54
55 #bottom-right
56 {
57 bottom: 0;
58 right: 0;
59 }
60 </style>
61
62 </head>
63
64 <body>
65
66 <p>Test passes if there is no red. Four distinct green squares should appear.</p>
67
68 <div>
69 x
70 <span>
71 <span id="top-left"></span>
72 <span id="top-right"></span>
73 <span id="bottom-left"></span>
74 <span id="bottom-right"></span>
75 a b
76 c d</span>
77 </div>
78
79 </body>
80 </html>