third_party/WebKit/LayoutTests/fast/css/margin-collapse-top-margin-clearance-with-sibling.html

   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  <style type="text/css">
   9
  10   #parent-red
  11   {
  12   background-color: yellow;
  13   border-top: black solid 1px;
  14   width: 50%;
  15   height: 151px;
  16   }
  17   #parent-lime
  18   {
  19   background-color: lime;
  20   border-top: black solid 1px;
  21   width: 100%;
  22   }
  23
  24   #float-left-blue
  25   {
  26   background-color: lime;
  27   float: left;
  28   height: 100px;
  29   width: 100px;
  30   }
  31
  32   #clear-left
  33   {
  34   clear: left;
  35   margin-top: 10px;
  36   margin-bottom: 10px;
  37   }
  38
  39   #other
  40   {
  41   height: 30px;
  42   margin-bottom: 20px;
  43   }
  44
  45  </style>
  46
  47  </head>
  48
  49  <body>
  50
  51   <p>Test passes if there is a yellow rectangle below the lime rectangle.</p>
  52
  53   <div id="parent-red">
  54     <div id="parent-lime">
  55       <div id="float-left-blue"></div>
  56       <div id="clear-left"></div>
  57       <div id="other"></div>
  58     </div>
  59   </div>
  60  </body>
  61 </html>