| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Test: 'contain: paint' on li with overflowing text contents and |
| bullet, and 'overflow-y: scroll'.</title> |
| <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint"> |
| <link rel="match" href="contain-paint-clip-003-ref.html"> |
| <style> |
| ul { |
| padding: 0; |
| margin: 0; |
| } |
| .root { |
| contain: paint; |
| overflow-y: scroll; |
| width: 100px; |
| height: 100px; |
| background: green; |
| margin: 25px; |
| padding: 25px; |
| } |
| </style> |
| </head> |
| <body> |
| <ul> |
| <li class="root"> |
| AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should |
| be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing |
| elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. |
| Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis |
| ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris |
| massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu |
| ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur |
| sodales ligula in libero. |
| </li> |
| </ul> |
| </body> |
| </html> |
