contain-paint-clip-016.html (2359B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</title> 6 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/contain-paint-clip-015-ref.html"> 10 <!-- 11 This test fails in Chromium 66.0.3359.117 12 --> 13 14 <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"> 15 <meta name="fuzzy" content="maxDifference=0-99;totalPixels=0-410"> 16 17 <!-- 18 19 contain-paint-clip-011: content overflows horizontally, principal box has no padding 20 21 contain-paint-clip-012: content overflows vertically, principal box has no padding 22 23 contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding 24 25 contain-paint-clip-014: content overflows vertically, principal box has vertical padding 26 27 contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved 28 29 contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved 30 31 contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner 32 33 contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner 34 35 --> 36 37 38 <style> 39 div#red-container-circle 40 { 41 background-color: red; 42 border-radius: 50%; 43 contain: paint; 44 height: 50px; 45 padding: 25px 0px; 46 width: 100px; 47 } 48 49 img 50 { 51 vertical-align: bottom; 52 } 53 54 div#green-overlapping-reference 55 { 56 background-color: green; 57 border-radius: 50%; 58 bottom: 100px; 59 height: 100px; 60 position: relative; 61 width: 100px; 62 } 63 </style> 64 65 <p>Test passes if there is a filled green circle and <strong>no red</strong>. 66 67 <div id="red-container-circle"><img src="support/swatch-red.png" width="100" height="175" alt="Image download support must be enabled"></div> 68 69 <div id="green-overlapping-reference"></div>