| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #multicol { |
| width: 401px; |
| height: 200px; |
| border: 5px solid black; |
| border-radius: 10%; |
| overflow: hidden; |
| background-color: orange; |
| } |
| |
| #multicol:hover { background-color: lime; } |
| |
| .col { |
| background-color: pink; |
| width: 123px; |
| height: 200px; |
| float: left; |
| color: pink; |
| } |
| |
| #col2 { |
| margin-left: 16px; |
| } |
| |
| #col3 { |
| position: relative; |
| left: 16px; |
| } |
| </style> |
| </head> |
| <body> |
| <a href="https://bugs.webkit.org/show_bug.cgi?id=133941">Bug 133941 - [New Multicolumn] Elements with rounded corners and overflow:hidden do not properly clip their content</a> |
| <p>The text passes if the columns are correctly clipped by the parent having border-radius.</p> |
| |
| <div id="multicol"> |
| <div id="col1" class="col"> |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer |
| </div> |
| <div id="col2" class="col"> |
| took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining |
| </div> |
| <div id="col3" class="col"> |
| essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like |
| </div> |
| </div> |
| </body> |
| </html> |
