third_party/WebKit/LayoutTests/css2.1/20110323/margin-collapse-clear-012.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 with clearance - margins of a 'collapsed through' box with clearance do not 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="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">
  10   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  11   <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
  12   <link rel="match" href="margin-collapse-clear-012-ref.htm">
  13
  14   <meta content="When an element has had clearance applied to it and its own margins collapse, these margins collapse with the adjoining margins of following siblings but the resulting margin does not collapse with the bottom margin of the parent block" name="assert">
  15   <meta content="" name="flags">
  16
  17   <style type="text/css">
  18   #rel-pos-wrapper {position: relative;}
  19
  20   #parent-lime
  21   {
  22   background-color: lime;
  23   border-top: black solid 1px;
  24   width: 50%;
  25   }
  26
  27   #float-left-blue
  28   {
  29   background-color: blue;
  30   float: left;
  31   height: 100px;
  32   width: 100px;
  33   }
  34
  35   #clear-left
  36   {
  37   clear: left;
  38   margin-bottom: 80px;
  39   margin-top: 40px;
  40   }
  41
  42   #following-sibling {margin-bottom: 140px;}
  43
  44   #next-yellow
  45   {
  46   background-color: yellow;
  47   height: 100px;
  48   }
  49
  50   .ref-overlapped-red
  51   {
  52   background-color: red;
  53   position: absolute;
  54   z-index: -1;
  55   }
  56
  57   #ref1
  58   {
  59   height: 200px;
  60   top: 1px;
  61   width: 50%;
  62   }
  63
  64   #ref2
  65   {
  66   height: 100px;
  67   top: 201px;
  68   width: 100%;
  69   }
  70   </style>
  71
  72  </head>
  73
  74  <body>
  75
  76   <p>Test passes if there is <strong>no red</strong>.</p>
  77
  78   <div id="rel-pos-wrapper">
  79
  80   <!--
  81
  82   #parent-lime should have height 200px, sum of:
  83
  84     100px          : height of #float-left-blue
  85   +
  86     (140px - 40px) : part of #following-sibling's margin-bottom
  87                      "exceeding" the amount collapsed with
  88                      #clear-left's margin-top (140px - 40px)
  89   =======
  90    200px
  91
  92   -->
  93
  94     <div id="parent-lime">
  95       <div id="float-left-blue"></div>
  96       <div id="clear-left"></div>
  97
  98    <!--
  99
 100      clearance
 101    +
 102      margin-top of #clear-left (40px)
 103    ====================================
 104      height of #float-left-blue (100px)
 105
 106      therefore, clearance is equal to +60px
 107
 108    -->
 109
 110       <div id="following-sibling"></div>
 111     </div>
 112
 113     <div id="next-yellow"></div>
 114
 115    <!--
 116    #ref1 and #ref2 boxes create a sort of 'reference rendering'
 117    where #ref1 should be covered, overlapped by #parent-lime
 118    while #ref2 should be covered, overlapped by #next-yellow.
 119    -->
 120
 121    <div id="ref1" class="ref-overlapped-red"></div>
 122    <div id="ref2" class="ref-overlapped-red"></div>
 123
 124   </div>
 125
 126  </body>
 127 </html>