src/third_party/WebKit/LayoutTests/fast/block/margin-collapse/self-collapsing-block-creates-block-formatting-context.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <style>
   4 .item {
   5     margin-bottom: 5px;
   6 }
   7 fieldset {
   8     border: 0px;
   9     padding: 0px;
  10     margin: 0px;
  11     margin-bottom: 5px;
  12 }
  13 .ref {
  14     width: 40px;
  15     height:40px;
  16     background-color: green;
  17     position: absolute;
  18     top: 10px;
  19 }
  20 .test {
  21     width: 40px;
  22     height:40px;
  23     background-color: red;
  24 }
  25 .container {
  26     position: relative;
  27     margin: 0px;
  28     padding: 0px;
  29 }
  30 </style>
  31 <body>
  32 https://code.google.com/p/chromium/issues/detail?id=321295
  33 The top and bottom margins of a box collapse together only if they are the  "top and bottom margins of a box that does not establish a new block formatting context".
  34 <br>
  35 There should be no red below.
  36 <div class="container">
  37     <div class="ref"></div>
  38     <div style="display: flex; -webkit-flex-direction: column;">
  39         <div class="item"></div>
  40         <div class="item"></div>
  41         <div class="test"></div>
  42     </div>
  43 </div>
  44 <div class="container">
  45     <div class="ref"></div>
  46     <div>
  47         <div class="item" style="overflow:hidden;"></div>
  48         <div class="item" style="overflow:hidden;"></div>
  49         <div class="test"></div>
  50     </div>
  51 </div>
  52 <div class="container">
  53     <div class="ref"></div>
  54     <div>
  55         <div class="item" style="display: table-caption;"></div>
  56         <div class="item" style="display: table-caption;"></div>
  57         <div class="test"></div>
  58     </div>
  59 </div>
  60 <div class="container">
  61     <div class="ref"></div>
  62     <div>
  63         <div class="item" style="-webkit-writing-mode: horizontal-bt; "></div>
  64         <div class="item" style="-webkit-writing-mode: horizontal-bt; "></div>
  65         <div class="test"></div>
  66     </div>
  67 </div>
  68 <div class="container">
  69     <div class="ref"></div>
  70     <div>
  71         <fieldset></fieldset>
  72         <fieldset></fieldset>
  73         <div class="test"></div>
  74     </div>
  75 </div>
  76 </body>
  77 </html>