Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / css2.1 / t0803-c5501-mrgn-t-00-b-a.html
blob2bf32eba09eedfe7e27f8e6895da34f237a6856e
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2 <html>
3 <head>
4 <title>CSS 2.1 Test Suite: margin-top</title>
5 <script src="../resources/ahem.js"></script>
6 <style type="text/css">
7 .test { font: 10px/1 Ahem; width: 10em; border: solid black; padding: 0; background: yellow; color: orange; }
8 .zero {background-color: teal; margin-top: 0;}
9 .one {margin-top: 5.29166mm; background-color: aqua;}
10 .two {margin-top: 20px; background-color: blue;}
11 .three {margin-top: 2em; background-color: aqua;}
12 .four {margin-top: 20%; background-color: teal;}
13 .five {margin-top: 20px;}
14 .six {margin-top: -10px; background-color: aqua;}
15 p, ul, li {margin: 0; padding: 0; list-style:none;}
17 .control { border: solid black; padding: 0; background: red; }
18 .control .teal { background: teal; }
19 .control .aqua { background: aqua; }
20 .control .blue { background: blue; }
21 .control .yellow { background: yellow; }
22 .control .long { width: 70px; height: 10px; background: orange; }
23 .control .short { width: 40px; height: 10px; background: orange; }
24 .control .blank { width: 100px; height: 20px; }
25 </style>
26 <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'">
27 </head>
28 <body>
29 <p>The two diagrams below should be identical, with no red present.</p>
30 <table>
31 <tr>
32 <td class="test">
33 <p class="zero">
34 xxxxxxx
35 </p>
36 <p class="zero">
37 xxxx
38 </p>
39 <p class="one">
40 xxxxxxx xxxx
41 </p>
42 <p class="two">
43 xxxxxxx xxxx
44 </p>
45 <p class="three">
46 xxxxxxx xxxx
47 </p>
48 <p class="four">
49 xxxxxxx xxxx
50 </p>
51 <ul class="two">
52 <li>xxxxxxx</li>
53 <li>xxxx</li>
54 <li class="five">xxxxxxx</li>
55 <li>xxxx</li>
56 </ul>
57 <p class="zero">
58 xxxxxxx
59 </p>
60 <p class="six">
61 xxxxxxx xxxx
62 </p>
63 </td>
64 <td class="control">
65 <div class="teal"><div class="long"></div><div class="short"></div></div>
66 <div class="yellow"><div class="blank"></div></div>
67 <div class="aqua"><div class="long"></div><div class="short"></div></div>
68 <div class="yellow"><div class="blank"></div></div>
69 <div class="blue"><div class="long"></div><div class="short"></div></div>
70 <div class="yellow"><div class="blank"></div></div>
71 <div class="aqua"><div class="long"></div><div class="short"></div></div>
72 <div class="yellow"><div class="blank"></div></div>
73 <div class="teal"><div class="long"></div><div class="short"></div></div>
74 <div class="yellow"><div class="blank"></div></div>
75 <div class="blue"><div class="long"></div><div class="short"></div></div>
76 <div class="blue"><div class="blank"></div></div>
77 <div class="blue"><div class="long"></div><div class="short"></div></div>
78 <div class="aqua"><div class="long"></div><div class="short"></div></div>
79 </td>
80 </tr>
81 </table>
82 </body>
83 </html>