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 padding 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.4 Padding properties" href="http://www.w3.org/TR/CSS21/box.html#padding-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 font-size: 32px;
27 width: 400px;
28 }
29
30 div#parent
31 {
32 background-color: lime;
33 font-size: 24px;
34 padding: 2em 3em 1em 4em; /* 48px 72px 24px 96px */
35 }
36
37 div#child
38 {
39 font-size: 40px;
40 padding: inherit;
41 /* What is inherited is a computed length value: so it is 48px 72px 24px 96px and not 80px 120px 40px 160px */
42 }
43
44 div#abs-pos-overlapping-lime
45 {
46 left: 200px;
47 position: absolute;
48 top: 168px;
49 }
50
51 /*
52 8px (body's margin-left)
53 + 96px (#parent's padding-left)
54 + 96px (#child's padding-left)
55 ==================
56 200px
57 */
58
59 /*
60 max(8px, 16px) (margin collapsing between body's margin-top and p's margin-top)
61 + 20px (first line)
62 + 20px (second line)
63 + 16px (p's margin-bottom)
64 + 48px (#parent's padding-top)
65 + 48px (#child's padding-top)
66 ==================
67 168px
68 */
69 </style>
70
71 </head>
72
73 <body>
74
75 <p>Test passes if there is a filled<br>
76 bright green rectangle and no red.</p>
77
78 <div id="grand-parent">
79 <div id="parent">
80 <div id="child"><img src="support/red_box.png" alt="Image download support must be enabled"></div>
81 </div>
82 </div>
83
84 <div id="abs-pos-overlapping-lime"><img src="support/lime_color.png" alt="Image download support must be enabled"></div>
85
86 </body>
87 </html>