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