third_party/WebKit/LayoutTests/fast/multicol/overflow-into-columngap.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>MultiColumn: Content in normal flow that extends into column gaps is clipped in middle of column gap</title>
   5         <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements"/>
   6         <style>
   7             #parent
   8             {
   9                 font: 20px/1 monospace;
  10                 position: relative;
  11             }
  12             #multicolumn
  13             {
  14                 -moz-column-width: 5em;
  15                 -o-column-width: 5em;
  16                 -webkit-column-width: 5em;
  17                 column-width: 5em;
  18                 position: absolute;
  19             }
  20             #multicolumn, #reference
  21             {
  22                 height: 6em;
  23                 width: 11em;
  24             }
  25             #multicolumn div
  26             {
  27                 background: green;
  28                 height: 6em;
  29             }
  30             #reference
  31             {
  32                 position: absolute;
  33                 top: 0;
  34             }
  35             #reference div
  36             {
  37                 position: absolute;
  38                 top: 0;
  39                 background:red;
  40                 height: 6em;
  41             }
  42             #right
  43             {
  44                 right: 0;
  45             }
  46         </style>
  47     </head>
  48     <body>
  49         <p>Test passes if there is no red visible on the page.</p>
  50         <div id="parent">
  51             <div id="reference">
  52                 <div style="width:5.5em;"></div>
  53                 <div id="right" style="width:5em;"></div>
  54             </div>
  55             <div id="multicolumn">
  56                 <div style="width:5.5em;"></div>
  57                 <div style="width:5em;"></div>
  58             </div>
  59         </div>
  60     </body>
  61 </html>