third_party/WebKit/LayoutTests/css1/box_properties/margin_top.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2 <HTML>
   3 <HEAD>
   4 <TITLE>CSS1 Test Suite: 5.5.01 margin-top</TITLE>
   5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   6 <META http-equiv="Content-Style-Type" content="text/css">
   7
   8 <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
   9 <STYLE type="text/css">
  10 .zero {background-color: silver; margin-top: 0;}
  11 .one {margin-top: 0.5in; background-color: aqua;}
  12 .two {margin-top: 25px; background-color: aqua;}
  13 .three {margin-top: 5em; background-color: aqua;}
  14 .four {margin-top: 25%; background-color: aqua;}
  15 .five {margin-top: 25px;}
  16 .six {margin-top: -10px; background-color: aqua;}
  17 P, UL {margin-bottom: 0;}</STYLE>
  18
  19 </HEAD>
  20
  21 <BODY><P>The style declarations which apply to the text below are:</P>
  22 <PRE>.zero {background-color: silver; margin-top: 0;}
  23 .one {margin-top: 0.5in; background-color: aqua;}
  24 .two {margin-top: 25px; background-color: aqua;}
  25 .three {margin-top: 5em; background-color: aqua;}
  26 .four {margin-top: 25%; background-color: aqua;}
  27 .five {margin-top: 25px;}
  28 .six {margin-top: -10px; background-color: aqua;}
  29 P, UL {margin-bottom: 0;}
  30 </PRE>
  31 <HR>
  32 <P class="zero">
  33 This element has a class of zero.
  34 </P>
  35 <P class="zero">
  36 This element also has a class of zero.
  37 </P>
  38
  39 <P class="one">
  40 This element should have a top margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
  41 </P>
  42 <P class="two">
  43 This element should have a top margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
  44 </P>
  45 <P class="three">
  46 This element should have a top margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
  47 </P>
  48 <P class="four">
  49 This element should have a top margin of 25%, which is calculated with respect to the width of the parent element.  This will require extra text in order to test.
  50 </P>
  51 <UL class="two">
  52 <LI>This list has a margin-top of 25px, and a light blue background.
  53 <LI>Therefore, it ought to have such a margin.
  54 <LI class="five">This list item has a top margin of 25px, which should cause it to be offset in some fashion.
  55 <LI>This list item has no special styles applied to it.
  56 </UL>
  57 <P class="zero">
  58 This element has a class of zero.
  59 </P>
  60 <P class="six">
  61 This element has a top margin of -10px, which should cause it to be shifted "upward" on the page, and no bottom margin.  No other styles have been applied to it besides a light blue background color.  In all other respects, the element should be normal.
  62 </P>
  63
  64 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  65 <TR>
  66 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  67 </TR>
  68 <TR>
  69 <TD bgcolor="silver">&nbsp;</TD>
  70 <TD><P class="zero">
  71 This element has a class of zero.
  72 </P>
  73 <P class="zero">
  74 This element also has a class of zero.
  75 </P>
  76
  77 <P class="one">
  78 This element should have a top margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
  79 </P>
  80 <P class="two">
  81 This element should have a top margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
  82 </P>
  83 <P class="three">
  84 This element should have a top margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
  85 </P>
  86 <P class="four">
  87 This element should have a top margin of 25%, which is calculated with respect to the width of the parent element.  This will require extra text in order to test.
  88 </P>
  89 <UL class="two">
  90 <LI>This list has a margin-top of 25px, and a light blue background.
  91 <LI>Therefore, it ought to have such a margin.
  92 <LI class="five">This list item has a top margin of 25px, which should cause it to be offset in some fashion.
  93 <LI>This list item has no special styles applied to it.
  94 </UL>
  95 <P class="zero">
  96 This element has a class of zero.
  97 </P>
  98 <P class="six">
  99 This element has a top margin of -10px, which should cause it to be shifted "upward" on the page, and no bottom margin.  No other styles have been applied to it besides a light blue background color.  In all other respects, the element should be normal.
 100 </P></TD></TR></TABLE></BODY>
 101 </HTML>