third_party/WebKit/LayoutTests/css1/box_properties/margin.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.05 margin</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 body {overflow: hidden;}
  11 .zero {background-color: silver; margin: 0;}
  12 .one {margin: 0.5in; background-color: aqua;}
  13 .two {margin: 25px; background-color: aqua;}
  14 .three {margin: 5em; background-color: aqua;}
  15 .four {margin: 25%; background-color: aqua;}
  16 .five {margin: 25px;}
  17 .six {margin: -10px; background-color: aqua;}</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: 0;}
  23 .one {margin: 0.5in; background-color: aqua;}
  24 .two {margin: 25px; background-color: aqua;}
  25 .three {margin: 5em; background-color: aqua;}
  26 .four {margin: 25%; background-color: aqua;}
  27 .five {margin: 25px;}
  28 .six {margin: -10px; background-color: aqua;}
  29 </PRE>
  30 <HR>
  31 <P>
  32 NOTE: The following tests are separated by class-zero paragraphs, so as to prevent margin-collapsing as described in section 4.1.1 of the CSS1 specification.
  33 </P>
  34 <P class="zero">
  35 This element has a class of zero.
  36 </P>
  37 <P class="one">
  38 This sentence should have an overall margin of half an inch, which will require extra text in order to test.
  39 </P>
  40 <P class="zero">
  41 This element has a class of zero.
  42 </P>
  43 <P class="two">
  44 This sentence should have an overall margin of 25 pixels, which will require extra text in order to test.
  45 </P>
  46 <P class="zero">
  47 This element has a class of zero.
  48 </P>
  49 <P class="three">
  50 This sentence should have an overall margin of 5 em, which will require extra text in order to test.
  51 </P>
  52 <P class="zero">
  53 This element has a class of zero.
  54 </P>
  55 <P class="four">
  56 This sentence should have an overall margin of 25%, which is calculated with respect to the width of the parent element.  This will require extra text in order to test.
  57 </P>
  58 <P class="zero">
  59 This element has a class of zero.
  60 </P>
  61 <UL class="two">
  62 <LI>This list has a margin of 25px, and a light blue background.
  63 <LI>Therefore, it ought to have such a margin.
  64 <LI class="five">This list item has a margin of 25px, which should cause it to be offset in some fashion.
  65 <LI>This list item has no special styles applied to it.
  66 </UL>
  67 <P class="zero">
  68 This element has a class of zero.
  69 </P>
  70 <P class="six">
  71 This paragraph has an overall margin of -10px, which should make it wider than usual as well as shift it upward and pull subsequent text up toward it, and a light blue background.  In all other respects, however, the element should be normal.  No styles have been applied to it besides the negative margin and the background color.
  72 </P>
  73 <P class="zero">
  74 This element has a class of zero.
  75 </P>
  76
  77
  78 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  79 <TR>
  80 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  81 </TR>
  82 <TR>
  83 <TD bgcolor="silver">&nbsp;</TD>
  84 <TD><P>
  85 NOTE: The following tests are separated by class-zero paragraphs, so as to prevent margin-collapsing as described in section 4.1.1 of the CSS1 specification.
  86 </P>
  87 <P class="zero">
  88 This element has a class of zero.
  89 </P>
  90 <P class="one">
  91 This sentence should have an overall margin of half an inch, which will require extra text in order to test.
  92 </P>
  93 <P class="zero">
  94 This element has a class of zero.
  95 </P>
  96 <P class="two">
  97 This sentence should have an overall margin of 25 pixels, which will require extra text in order to test.
  98 </P>
  99 <P class="zero">
 100 This element has a class of zero.
 101 </P>
 102 <P class="three">
 103 This sentence should have an overall margin of 5 em, which will require extra text in order to test.
 104 </P>
 105 <P class="zero">
 106 This element has a class of zero.
 107 </P>
 108 <P class="four">
 109 This sentence should have an overall margin of 25%, which is calculated with respect to the width of the parent element.  This will require extra text in order to test.
 110 </P>
 111 <P class="zero">
 112 This element has a class of zero.
 113 </P>
 114 <UL class="two">
 115 <LI>This list has a margin of 25px, and a light blue background.
 116 <LI>Therefore, it ought to have such a margin.
 117 <LI class="five">This list item has a margin of 25px, which should cause it to be offset in some fashion.
 118 <LI>This list item has no special styles applied to it.
 119 </UL>
 120 <P class="zero">
 121 This element has a class of zero.
 122 </P>
 123 <P class="six">
 124 This paragraph has an overall margin of -10px, which should make it wider than usual as well as shift it upward and pull subsequent text up toward it, and a light blue background.  In all other respects, however, the element should be normal.  No styles have been applied to it besides the negative margin and the background color.
 125 </P>
 126 <P class="zero">
 127 This element has a class of zero.
 128 </P>
 129 </TD></TR></TABLE></BODY>
 130 </HTML>