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: margin - inherit applied on margin percentage</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" title="8.3 Margin properties" href="http://www.w3.org/TR/CSS21/box.html#margin-properties">
10 <link rel="help" title="6.2.1 The 'inherit' value" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">
11 <meta content="A margin percentage is calculated with respect to the width of the generated box's containing block. When inherit keyword is used, the property takes the same computed value - a percentage value in this testcase - as the property for the element's parent." name="assert">
12 <meta content="image" name="flags">
13
14 <style type="text/css">
15 body {margin: 8px;}
16
17 p
18 {
19 font: 16px/20px serif;
20 margin: 1em 0em;
21 }
22
23 div#grand-parent
24 {
25 width: 400px;
26 }
27
28 div#parent
29 {
30 background-color: lime;
31 border: white solid 3px; /* Such border prevents margin collapsing among vertical margins */
32 margin: 25%; /* 25% of 400px == 100px; */
33 width: 200px;
34 }
35
36 div#child
37 {
38 margin: inherit;
39 /* computes to 25% which is then applied on #child's containing block width: 25% of 200px == 50px */
40 }
41
42 div#abs-pos-overlapping-lime
43 {
44 left: 161px;
45 position: absolute;
46 top: 209px;
47 }
48
49 /*
50 8px (body's margin-left)
51 + 100px (#parent's margin-left)
52 + 3px (#parent's border-left)
53 + 50px (#child's margin-left)
54 ==================
55 161px
56 */
57
58 /*
59 16px (max(8px, 16px): body's margin-top collapses with p's margin-top)
60 + 20px (first line)
61 + 20px (second line)
62 + 100px (max(16px, 100px): p's margin-bottom collapses with #parent's margin-top)
63 + 3px (#parent's border-top)
64 + 50px (#child's margin-top)
65 ==================
66 209px
67 */
68 </style>
69
70 </head>
71
72 <body>
73
74 <p>Test passes if there is a filled bright<br>
75 green square and if there is no red.</p>
76
77 <div id="grand-parent">
78 <div id="parent">
79 <div id="child"><img src="support/red_box.png" alt="Image download support must be enabled"></div>
80 </div>
81 </div>
82
83 <div id="abs-pos-overlapping-lime"><img src="support/lime_color.png" alt="Image download support must be enabled"></div>
84
85 </body>
86 </html>