third_party/WebKit/LayoutTests/css1/formatting_model/vertical_formatting.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: 4.1.1 Vertical Formatting</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 P.one {margin-bottom: 2cm; padding-bottom: 0;}
  11 P.two {margin-top: 2cm; padding-top: 0;}
  12 P.three {margin-top: 0; padding-top: 0;}
  13 P.four {margin-top: -1cm; margin-bottom: 0;
  14         padding-top: 0; padding-bottom: 0;}
  15 DIV.five {margin-top: 1cm; margin-bottom: 1cm;
  16           padding-top: 1cm; padding-bottom: 0;}
  17 P.six {margin-top: 1cm; margin-bottom: 1cm;
  18        padding-top: 0; padding-bottom: 0;}
  19 P.seven {margin-top: 1cm; padding-top: 0;}
  20 P.eight {margin-bottom: -1cm; padding-bottom: 2cm;}
  21 P.nine {margin-top: -1cm; padding-top: 1cm;
  22         padding-bottom: 0; margin-bottom: 1cm;}
  23 P.ten {margin-top: 1cm;padding-top: 0;
  24        float: left;width: 50%;}
  25 P.eleven {margin-top: 1cm; padding-top: 0; clear: none;}
  26 P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;}
  27 P.thirteen {margin-top: 0; padding-top: 1cm;}
  28 TABLE {clear: both;}
  29 </STYLE>
  30
  31 </HEAD>
  32
  33 <BODY><P>The style declarations which apply to the text below are:</P>
  34 <PRE>P.one {margin-bottom: 2cm; padding-bottom: 0;}
  35 P.two {margin-top: 2cm; padding-top: 0;}
  36 P.three {margin-top: 0; padding-top: 0;}
  37 P.four {margin-top: -1cm; margin-bottom: 0;
  38         padding-top: 0; padding-bottom: 0;}
  39 DIV.five {margin-top: 1cm; margin-bottom: 1cm;
  40           padding-top: 1cm; padding-bottom: 0;}
  41 P.six {margin-top: 1cm; margin-bottom: 1cm;
  42        padding-top: 0; padding-bottom: 0;}
  43 P.seven {margin-top: 1cm; padding-top: 0;}
  44 P.eight {margin-bottom: -1cm; padding-bottom: 2cm;}
  45 P.nine {margin-top: -1cm; padding-top: 1cm;
  46         padding-bottom: 0; margin-bottom: 1cm;}
  47 P.ten {margin-top: 1cm;padding-top: 0;
  48        float: left;width: 50%;}
  49 P.eleven {margin-top: 1cm; padding-top: 0; clear: none;}
  50 P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;}
  51 P.thirteen {margin-top: 0; padding-top: 1cm;}
  52 TABLE {clear: both;}
  53
  54 </PRE>
  55 <HR>
  56 <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.</P>
  57
  58 <P CLASS="two">This is another paragraph.</P>
  59
  60 <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next.</P>
  61
  62 <P CLASS="three">This is another paragraph.</P>
  63
  64 <P CLASS="one">There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).</P>
  65
  66 <P CLASS="four">This is another paragraph.</P>
  67
  68 <DIV CLASS="five">
  69 <P CLASS="six">
  70 There should be three centimeters between this text and the text above,
  71 but only one centimeter between this text and the text below, because
  72 vertical margins of nested elements should collapse only if there is no
  73 border or padding between the margins.
  74 </P></DIV>
  75
  76 <P CLASS="seven">This is more text.</P>
  77
  78 <P CLASS="eight">There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.</P>
  79
  80 <P CLASS="nine">This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.</P>
  81
  82 <P CLASS="ten">There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.</P>
  83
  84 <P CLASS="eleven">There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.</P>
  85
  86 <P CLASS="twelve">There should be two centimeters of padding between
  87 this paragraph and the one below.  Padding does not collapse, and there
  88 is 1cm of padding on each side.</P>
  89
  90 <P CLASS="thirteen">This is the next paragraph.</P>
  91
  92
  93 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  94 <TR>
  95 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  96 </TR>
  97 <TR>
  98 <TD bgcolor="silver">&nbsp;</TD>
  99 <TD><P CLASS="one">There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.</P>
 100
 101 <P CLASS="two">This is another paragraph.</P>
 102
 103 <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next.</P>
 104
 105 <P CLASS="three">This is another paragraph.</P>
 106
 107 <P CLASS="one">There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).</P>
 108
 109 <P CLASS="four">This is another paragraph.</P>
 110
 111 <DIV CLASS="five">
 112 <P CLASS="six">
 113 There should be three centimeters between this text and the text above,
 114 but only one centimeter between this text and the text below, because
 115 vertical margins of nested elements should collapse only if there is no
 116 border or padding between the margins.
 117 </P></DIV>
 118
 119 <P CLASS="seven">This is more text.</P>
 120
 121 <P CLASS="eight">There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.</P>
 122
 123 <P CLASS="nine">This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.</P>
 124
 125 <P CLASS="ten">There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.</P>
 126
 127 <P CLASS="eleven">There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.</P>
 128
 129 <P CLASS="twelve">There should be two centimeters of padding between
 130 this paragraph and the one below.  Padding does not collapse, and there
 131 is 1cm of padding on each side.</P>
 132
 133 <P CLASS="thirteen">This is the next paragraph.</P>
 134 </TD></TR></TABLE></BODY>
 135 </HTML>