c412-hz-box-000

Horizontal Formatting

WeasyPrint

This browser

Flags
ahem

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: Horizontal Formatting</title>
 5   <meta name="flags" content="ahem">
 6   <link rel="help" href="http://www.w3.org/TR/REC-CSS1#horizontal-formatting">
 7   <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
 8   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 9   <style type="text/css">
10    p#ruled {
11      font: 40px/1 Ahem;
12      width: 360px; background-color: aqua; color: blue;
13      border-style: solid; border-color: fuchsia;
14      border-top-width: 0px; border-right-width: 40px; border-bottom-width: 0px; border-left-width: 40px;
15      padding-top: 0px; padding-right: 40px; padding-bottom: 0px; padding-left: 40px;
16      margin-top: 0px; margin-right: 40px; margin-bottom: 0px; margin-left: 40px;
17    }
18   </style>
19   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions" title="8.1 Box dimensions">
20   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-properties" title="8.5 Border properties">
21   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" title="8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'">
22   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" title="8.3 Margin properties: 'margin-top',  'margin-right',  'margin-bottom', 'margin-left', and 'margin'">
23  </head>
24  <body>
25   <p>The two diagrams below should be identical.</p>
26   <div class="test">
27    <p id="ruled">X X X X X</p>
28    <p id="control">
29     <img src="support/css1test412a.png" alt="The diagram above should be as described here: A 40px white      square (which will appear as a 40px indent from the left margin),      a 40px fuchsia square, six 40px aqua squares separated by five      40px blue squares, and a final fuchsia square.">
30    </p>
31   </div>
32  </body>
33 </html>