third_party/WebKit/LayoutTests/fast/block/float/floats-do-not-overhang-from-block-formatting-context.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0px;
   6     padding: 0px;
   7 }
   8 .item {
   9     height: 40px;
  10     width: 40px;
  11 }
  12 fieldset {
  13     border: 0px;
  14     padding: 0px;
  15     margin: 0px;
  16 }
  17 .test {
  18     width: 40px;
  19     height:40px;
  20     background-color: red;
  21 }
  22 .container {
  23     position: relative;
  24     margin: 0px;
  25     padding: 0px;
  26 }
  27 .float {
  28     float: left;
  29     width: 40px;
  30     height:80px;
  31     background-color: blue;
  32 }
  33 </style>
  34 <script src="../../../resources/check-layout.js"></script>
  35 <body onload="checkLayout('.test')">
  36 http://www.w3.org/TR/CSS2/visuren.html#float-position:
  37 "References to [the elements] in the [rules that govern the behaviour of floats] refer only to other elements in the same block formatting context as the float."
  38 <br>
  39 <div class="container">
  40     <div class="item" style="display: inline-block;"><div class="float"></div></div>
  41     <div class="test" data-total-x=0></div>
  42 </div>
  43 <div class="container">
  44     <div class="item" style="display: inline-table;"><div class="float"></div></div>
  45     <div class="test" data-total-x=0></div>
  46 </div>
  47 <div class="container">
  48     <div class="item" style="display: table-caption;"><div class="float"></div></div>
  49     <div class="test" data-total-x=0 data-offset-y=40></div>
  50 </div>
  51 <div class="container">
  52     <div class="item" style="overflow:hidden;"><div class="float"></div></div>
  53     <div class="test" data-total-x=0 data-offset-y=40></div>
  54 </div>
  55 <div class="container">
  56     <div class="item" style="-webkit-columns: 10px 2;"><div class="float"></div></div>
  57     <div class="test" data-total-x=0 data-offset-y=40></div>
  58 </div>
  59 <div class="container">
  60     <div class="item" style="-webkit-column-span: all;"><div class="float"></div></div>
  61     <div class="test" data-total-x=0 data-offset-y=40></div>
  62 </div>
  63 <div class="container">
  64     <div style="display: flex; -webkit-flex-direction: column;">
  65         <div class="item"><div class="float"></div></div>
  66         <div class="test" data-total-x=0 data-offset-y=40></div>
  67     </div>
  68 </div>
  69 <div class="container">
  70     <fieldset class="item"><div class="float"></div></fieldset>
  71     <div class="test" data-total-x=0 data-offset-y=40></div>
  72 </div>
  73 </body>
  74 </html>