src/third_party/WebKit/LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/overflow-content.html

   1 <script>
   2     if (window.internals)
   3         internals.settings.setRegionBasedColumnsEnabled(true);
   4 </script>
   5 <style>
   6     div.test {
   7         -webkit-logical-width: 100px;
   8         -webkit-border-before: 5px solid;
   9         -webkit-border-after: 15px solid;
  10         -webkit-column-count: 2;
  11         -webkit-column-gap: 0;
  12         column-count: 2;
  13         column-gap: 0;
  14         column-fill: auto;
  15         background-color: lightblue;
  16     }
  17     div.container {
  18         -webkit-logical-height: 120px;
  19         background-color: red;
  20         -webkit-logical-width: 100px;
  21         -webkit-margin-after: 8px;
  22     }
  23 </style>
  24 <div>
  25     <div class="container">
  26         <div class="test" style="-webkit-logical-height: 100px;">
  27             <div style="-webkit-logical-height: 20px;">
  28                 <div style="-webkit-logical-height: 300px; background-color: yellow;"></div>
  29             </div>
  30         </div>
  31     </div>
  32
  33     <div class="container">
  34         <div class="test">
  35             <div style="-webkit-logical-height: 20px;">
  36                 <div style="-webkit-logical-height: 200px; background-color: yellow;"></div>
  37             </div>
  38         </div>
  39     </div>
  40
  41     <div class="container">
  42         <div class="test">
  43             <div style="-webkit-logical-height: 10px;"></div>
  44             <div style="-webkit-column-break-before: always; -webkit-logical-height: 10px;">
  45                 <div style="-webkit-logical-height: 100px; background-color: yellow;"></div>
  46             </div>
  47             <div style="-webkit-logical-height: 20px;"></div>
  48         </div>
  49     </div>
  50 </div>
  51 <div style="-webkit-writing-mode: vertical-rl;">
  52     <div class="container">
  53         <div class="test" style="-webkit-logical-height: 100px;">
  54             <div style="-webkit-logical-height: 20px;">
  55                 <div style="-webkit-logical-height: 300px; background-color: yellow;"></div>
  56             </div>
  57         </div>
  58     </div>
  59
  60     <div class="container">
  61         <div class="test">
  62             <div style="-webkit-logical-height: 20px;">
  63                 <div style="-webkit-logical-height: 200px; background-color: yellow;"></div>
  64             </div>
  65         </div>
  66     </div>
  67
  68     <div class="container">
  69         <div class="test">
  70             <div style="-webkit-logical-height: 10px;"></div>
  71             <div style="-webkit-column-break-before: always; -webkit-logical-height: 10px;">
  72                 <div style="-webkit-logical-height: 100px; background-color: yellow;"></div>
  73             </div>
  74             <div style="-webkit-logical-height: 20px;"></div>
  75         </div>
  76     </div>
  77 </div>