third_party/WebKit/LayoutTests/css2.1/20110323/margin-collapse-clear-017.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3
   4  <head>
   5
   6   <title>CSS Test: Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin</title>
   7
   8   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
   9   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  10   <link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de">
  11   <link rel="match" href="margin-collapse-clear-017-ref.htm">
  12
  13   <meta content="An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with 'clear' set to a value other than 'none' can create a clearance only if and only when there is an earlier (in the source document) floating box." name="assert">
  14   <meta content="image" name="flags">
  15
  16   <style type="text/css">
  17   body
  18   {
  19   background: white url("support/ruler-v-100px-200px-300px.png") no-repeat;
  20   margin: 34px 8px 8px 55px;
  21   /*
  22     34px : body's top margin collapsing with p's top margin: max(34px, 16px)
  23   + 20px : p's 1st line box height
  24   + 20px : p's 2nd line box height
  25   + 16px : p's bottom margin
  26   + 10px : height of topmost green bar
  27   ======
  28    100px
  29   */
  30   }
  31
  32   p
  33   {
  34   font-size: 16px;
  35   line-height: 20px;
  36   margin: 1em 8px;
  37   }
  38
  39   div#parent-block {margin-bottom: 100px;}
  40
  41   div.vertical-gap-separator
  42   {
  43   background-color: green;
  44   height: 10px;
  45   }
  46
  47   div#element-without-clearance
  48   {
  49   clear: both;
  50   margin-top: 100px;
  51   }
  52
  53   /*
  54   In this test, div#element-without-clearance
  55   is what the spec refers to as
  56   'collapsed through' box
  57   http://www.w3.org/TR/CSS21/box.html#collapsed-through
  58   */
  59   </style>
  60
  61  </head>
  62
  63  <body>
  64
  65   <p>Test passes if there is a vertical gap<br>
  66   of exactly 100px between 2 green bars.</p>
  67
  68   <div id="parent-block">
  69     <div class="vertical-gap-separator"></div>
  70     <div id="element-without-clearance"></div>
  71   </div>
  72
  73   <div class="vertical-gap-separator"></div>
  74
  75   <!--
  76   div#element-without-clearance's margin-top should collapse
  77   with #parent-block's margin-bottom: max(100px, 100px) = 100px
  78   -->
  79
  80  </body>
  81 </html>