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: padding - inherit applied on padding percentage</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" title="8.4 Padding properties" href="http://www.w3.org/TR/CSS21/box.html#padding-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 padding 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: 300px;
26 }
27
28 div#parent
29 {
30 background-color: lime;
31 padding: 20%; /* 20% of 300px == 60px; */
32 width: 150px;
33 }
34
35 div#child
36 {
37 padding: inherit;
38 /* computes to 20% which is then applied on #child's containing block width: 20% of 150px == 30px */
39 }
40
41 div#abs-pos-overlapping-lime
42 {
43 left: 98px;
44 position: absolute;
45 top: 162px;
46 }
47
48 /*
49 8px (body's margin-left)
50 + 60px (#parent's padding-left)
51 + 30px (#child's padding-left)
52 ==================
53 98px
54 */
55
56 /*
57 max(8px, 16px) (margin collapsing between body's margin-top and p's margin-top)
58 + 20px (first line)
59 + 20px (second line)
60 + 16px (p's margin-bottom)
61 + 60px (#parent's padding-top)
62 + 30px (#child's padding-top)
63 ==================
64 162px
65 */
66 </style>
67
68 </head>
69
70 <body>
71
72 <p>Test passes if there is a filled<br>
73 bright green square and no red.</p>
74
75 <div id="grand-parent">
76 <div id="parent">
77 <div id="child"><img src="support/red_box.png" alt="Image download support must be enabled"></div>
78 </div>
79 </div>
80
81 <div id="abs-pos-overlapping-lime"><img src="support/lime_color.png" alt="Image download support must be enabled"></div>
82
83 </body>
84 </html>