5 <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge
</title>
7 <link rel=
"author" title=
"GĂ©rard Talbot" href=
"http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8 <link rel=
"help" href=
"https://www.w3.org/TR/css-contain-1/#containment-paint">
9 <link rel=
"match" href=
"../reference/ref-filled-green-100px-square.xht">
11 <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." name=
"assert">
15 contain-paint-clip-011: content overflows horizontally, principal box has no padding
17 contain-paint-clip-012: content overflows vertically, principal box has no padding
19 contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
21 contain-paint-clip-014: content overflows vertically, principal box has vertical padding
23 contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
25 contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
27 contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
29 contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
40 div#red-overlapped-test
42 background-color: red;
48 vertical-align: bottom;
51 div#green-overlapping-reference
53 background-color: green;
60 <p>Test passes if there is a filled green square and
<strong>no red
</strong>.
62 <div id=
"red-overlapped-test"><img src=
"support/swatch-red.png" width=
"200" height=
"100" alt=
"Image download support must be enabled"></div>
64 <div id=
"green-overlapping-reference"></div>