third_party/WebKit/LayoutTests/fast/multicol/newmulticol/clipping.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Column clipping</title>
   5     <style>
   6       body {
   7         width: 450px;
   8         color: black;
   9         background: white;
  10       }
  11       #container { margin:0 60px; }
  12       .mc {
  13         columns: 3;
  14         column-gap: 15px;
  15         column-fill: auto;
  16         -webkit-columns: 3;
  17         -webkit-column-gap: 15px;
  18         height: 100px;
  19         background: red;
  20       }
  21       .hoverflow { margin:0 -60px; }
  22       .rect {
  23         box-sizing:border-box;
  24         height:100px;
  25         border:10px solid green;
  26         background:white;
  27       }
  28     </style>
  29   </head>
  30   <body>
  31     <p>There should be a rectangle with a solid 10px thick green border below, and no red.</p>
  32     <div id="container">
  33       <div class="mc">
  34         <div class="hoverflow">
  35           <div class="rect"></div>
  36         </div>
  37         <div class="hoverflow">
  38           <div class="rect"></div>
  39         </div>
  40         <div class="hoverflow">
  41           <div class="rect"></div>
  42         </div>
  43       </div>
  44     </div>
  45   </body>
  46 </html>