third_party/WebKit/LayoutTests/css2.1/20110323/margin-collapse-clear-014.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 - clearance may be negative</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-014-ref.htm">
  13
  14   <meta content="Clearance is created above the top margin of the element with clear set. Clearance can be negative. Clearance stops the collapsing of the element's margins with the preceding siblings' margins and with the parent block's bottom margin." 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   width: 50%;
  24   }
  25
  26   #preceding-sibling-aqua
  27   {
  28   background-color: aqua;
  29   height: 60px;
  30   margin-bottom: 40px;
  31   }
  32
  33   #float-left-blue
  34   {
  35   background-color: blue;
  36   float: left;
  37   height: 100px;
  38   width: 100px;
  39   }
  40
  41   #clear-left
  42   {
  43   clear: left;
  44   margin-top: 120px;
  45   }
  46
  47   #next-yellow
  48   {
  49   background-color: yellow;
  50   height: 100px;
  51   }
  52
  53   .ref-overlapped-red
  54   {
  55   background-color: red;
  56   position: absolute;
  57   z-index: -1;
  58   }
  59
  60   #ref1
  61   {
  62   height: 200px;
  63   top: 0px;
  64   width: 50%;
  65   }
  66
  67   #ref2
  68   {
  69   height: 100px;
  70   top: 200px;
  71   width: 100%;
  72   }
  73   </style>
  74
  75  </head>
  76
  77  <body>
  78
  79   <p>Test passes if there is <strong>no red</strong>.</p>
  80
  81   <div id="rel-pos-wrapper">
  82
  83   <!--
  84
  85   #parent-lime should have height 200px, sum of:
  86
  87      60px  : height of #preceding-sibling-aqua
  88   +
  89      40px  : margin-bottom of #preceding-sibling-aqua
  90   +
  91     100px  : height of #float-left-blue
  92   =====================================================
  93     200px
  94
  95   -->
  96
  97     <div id="parent-lime">
  98       <div id="preceding-sibling-aqua"></div>
  99       <div id="float-left-blue"></div>
 100       <div id="clear-left"></div>
 101     </div>
 102
 103   <!--
 104
 105      clearance
 106    +
 107      margin-top of #clear-left (120px)
 108    ====================================
 109      height of #float-left-blue (100px)
 110
 111      therefore, clearance is equal to -20px
 112
 113   -->
 114
 115     <div id="next-yellow"></div>
 116
 117    <!--
 118    #ref1 and #ref2 boxes create a sort of 'reference rendering'
 119    where #ref1 should be covered, overlapped by #parent-lime
 120    while #ref2 should be covered, overlapped by #next-yellow.
 121    -->
 122
 123     <div id="ref1" class="ref-overlapped-red"></div>
 124     <div id="ref2" class="ref-overlapped-red"></div>
 125
 126   </div>
 127
 128  </body>
 129 </html>