padding-004

Padding set using four values

WeasyPrint

This browser

Assertion
The 'padding' property set using three values properly assigns the first value to the top padding, the second value to the left padding, the third value to the bottom padding, and the fourth value to the right padding.

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: Padding set using four values</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties">
 8         <meta name="flags" content="">
 9         <meta name="assert" content="The 'padding' property set using three values properly assigns the first value to the top padding, the second value to the left padding, the third value to the bottom padding, and the fourth value to the right padding.">
10         <style type="text/css">
11             #wrapper
12             {
13                 position: relative;
14             }
15             #div1
16             {
17                 border: 10px solid green;
18                 left: 0;
19                 padding: 96px 48px 192px 24px;
20                 position: absolute;
21                 top: 0;
22             }
23             #div2
24             {
25                 border: 10px solid green;
26                 height: 96px;
27                 width: 288px;
28             }
29             #reference
30             {
31                 border: 10px solid red;
32                 height: 404px;
33                 left: 0;
34                 position: absolute;
35                 top: 0;
36                 width: 380px;
37             }
38         </style>
39     </head>
40     <body>
41         <p>Test passes if there is no red visible on the page.</p>
42         <div id="wrapper">
43             <div id="reference"></div>
44             <div id="div1">
45                 <div id="div2"></div>
46             </div>
47         </div>
48     </body>
49 </html>