| OLD | NEW | 
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> | 
| 2 <html> | 2 <html> | 
| 3   <head> | 3   <head> | 
| 4     <title>Multicol edge clipping</title> | 4     <title>Multicol edge clipping</title> | 
| 5     <script> | 5     <script> | 
| 6       if (window.internals) | 6       if (window.internals) | 
| 7         internals.settings.setRegionBasedColumnsEnabled(true); | 7         internals.settings.setRegionBasedColumnsEnabled(true); | 
| 8     </script> | 8     </script> | 
| 9     <style> | 9     <style> | 
| 10       .mc { | 10       .mc { | 
| 11         columns: 3; | 11         columns: 3; | 
| 12         column-gap: 15px; | 12         column-gap: 15px; | 
| 13         column-fill: auto; | 13         column-fill: auto; | 
| 14         -webkit-columns: 3; | 14         -webkit-columns: 3; | 
| 15         -webkit-column-gap: 15px; | 15         -webkit-column-gap: 15px; | 
| 16         -webkit-column-fill: auto; |  | 
| 17         width: 600px; | 16         width: 600px; | 
| 18         height: 100px; | 17         height: 100px; | 
| 19         margin: 100px; | 18         margin: 100px; | 
| 20         overflow:hidden; | 19         overflow:hidden; | 
| 21       } | 20       } | 
| 22     </style> | 21     </style> | 
| 23   </head> | 22   </head> | 
| 24   <body> | 23   <body> | 
| 25     <p>There should be a 100x100 blue square below.</p> | 24     <p>There should be a 100x100 blue square below.</p> | 
| 26     <div class="mc"> | 25     <div class="mc"> | 
| 27       <div style="width:150px; height:200px; margin-left:-50px; margin-top:-100p
    x; background:blue;"></div> | 26       <div style="width:150px; height:200px; margin-left:-50px; margin-top:-100p
    x; background:blue;"></div> | 
| 28     </div> | 27     </div> | 
| 29   </body> | 28   </body> | 
| 30 </html> | 29 </html> | 
| OLD | NEW | 
|---|