| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title> | |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | |
| <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint"> | |
| <link rel="match" href="reference/contain-paint-clip-015-ref.html"> | |
| <!-- | |
| This test fails in Chromium 66.0.3359.117 | |
| --> | |
| <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account." name="assert"> | |
| <!-- | |
| contain-paint-clip-011: content overflows horizontally, principal box has no padding | |
| contain-paint-clip-012: content overflows vertically, principal box has no padding | |
| contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding | |
| contain-paint-clip-014: content overflows vertically, principal box has vertical padding | |
| contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved | |
| contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved | |
| contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner | |
| contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner | |
| --> | |
| <meta name="flags" content=""> | |
| <style> | |
| div#red-container-circle | |
| { | |
| background-color: red; | |
| border-radius: 50%; | |
| contain: paint; | |
| height: 50px; | |
| padding: 25px 0px; | |
| width: 100px; | |
| } | |
| img | |
| { | |
| vertical-align: bottom; | |
| } | |
| div#green-overlapping-reference | |
| { | |
| background-color: green; | |
| border-radius: 50%; | |
| bottom: 100px; | |
| height: 100px; | |
| position: relative; | |
| width: 100px; | |
| } | |
| </style> | |
| <p>Test passes if there is a filled green circle and <strong>no red</strong>. | |
| <div id="red-container-circle"><img src="support/swatch-red.png" width="100" height="175" alt="Image download support must be enabled"></div> | |
| <div id="green-overlapping-reference"></div> |