containing-block-017

Containing Blocks - Block-level elements position based on left-to-right direction and parent element is relative

WeasyPrint

This browser

Flags
dom, interact
Assertion
The containing block of an absolutely positioned block-level element is formed by the padding edge of its nearest (closest) positioned ancestor element.

Source

 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>