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: Containing Blocks - Block-level elements position based on left-to-right direction and parent element is relative</title>
5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
6 <link rel="author" title="Alan Gresley" href="alan{at}css-class.com">
7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
8 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
9 <meta name="flags" content="dom interact">
10 <meta name="assert" content="The containing block of an absolutely positioned block-level element is formed by the padding edge of its nearest (closest) positioned ancestor element.">
11 <style type="text/css">
12 div
13 {
14 border: solid silver;
15 direction: ltr;
16 margin-bottom: 20px;
17 padding: 100px;
18 width: 450px;
19 }
20 #first-box, #last-box
21 {
22 color: silver;
23 }
24 .position
25 {
26 height: 30px;
27 position: absolute;
28 width: 30px;
29 }
30 #tl-control
31 {
32 border-top: 30px solid red;
33 margin-left: -50px;
34 margin-right: 20px;
35 padding: 20px 15px;
36 }
37 #br-control
38 {
39 border-bottom: 30px solid red;
40 margin-left: 20px;
41 margin-right: -50px;
42 padding: 20px 15px;
43 }
44 .top-left
45 {
46 background: green;
47 left: 0;
48 top: 0;
49 }
50 .bottom-right
51 {
52 background: green;
53 bottom: 0;
54 right: 0;
55 }
56 #test
57 {
58 border: 5px solid silver;
59 padding: 50px;
60 position: relative;
61 }
62 </style>
63 </head>
64 <body>
65 <p>Test passes if there is no red visible on the page.</p>
66 <div>
67 <span id="test">
68 <span id="first-box"><span id="tl-control"></span>Filler Text Filler Text Filler Text Filler Text</span>
69 <span class="position bottom-right">BR</span>
70 <span class="position top-left">TL</span>
71 <span id="last-box">Filler Text Filler Text Filler Text Filler Text<span id="br-control"></span></span>
72 </span>
73 </div>
74 </body>
75 </html>