third_party/WebKit/LayoutTests/css2.1/20110323/margin-collapse-clear-013.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 do 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: 140px;
  39   margin-top: 40px;
  40   }
  41
  42   #next-yellow
  43   {
  44   background-color: yellow;
  45   height: 100px;
  46   }
  47
  48   .ref-overlapped-red
  49   {
  50   background-color: red;
  51   position: absolute;
  52   z-index: -1;
  53   }
  54
  55   #ref1
  56   {
  57   height: 200px;
  58   top: 1px;
  59   width: 50%;
  60   }
  61
  62   #ref2
  63   {
  64   height: 100px;
  65   top: 201px;
  66   width: 100%;
  67   }
  68   </style>
  69
  70  </head>
  71
  72  <body>
  73
  74   <p>Test passes if there is <strong>no red</strong>.</p>
  75
  76   <div id="rel-pos-wrapper">
  77
  78   <!--
  79
  80      clearance
  81    +
  82      margin-top of #clear-left (40px)
  83    ====================================
  84      height of #float-left-blue (100px)
  85
  86      therefore, clearance is equal to +60px
  87
  88   -->
  89
  90   <!--
  91
  92   #parent-lime should have height 200px, sum of:
  93
  94     100px          : height of #float-left-blue
  95   +
  96     (140px - 40px) : part of #sole-following-sibling's margin-bottom
  97                      "exceeding" the amount collapsed with
  98                      #clear-left's margin-top (140px - 40px)
  99   =======
 100    200px
 101
 102   -->
 103
 104     <div id="parent-lime">
 105       <div id="float-left-blue"></div>
 106       <div id="clear-left"></div>
 107     </div>
 108
 109    <!--
 110    #next-yellow should immediately follow #parent-lime (no margins in between)
 111    -->
 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>