contain-paint-clip-017.html (2044B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: paint' and clipping at padding edge (generated ::before content)</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 <meta content="This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element." name="assert"> 12 13 <!-- 14 15 contain-paint-clip-011: content overflows horizontally, principal box has no padding 16 17 contain-paint-clip-012: content overflows vertically, principal box has no padding 18 19 contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding 20 21 contain-paint-clip-014: content overflows vertically, principal box has vertical padding 22 23 contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved 24 25 contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved 26 27 contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner 28 29 contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner 30 31 --> 32 33 34 <style> 35 div 36 { 37 background-color: green; 38 border-radius: 100px; 39 contain: paint; 40 height: 50px; 41 padding: 25px; 42 width: 50px; 43 } 44 45 div::before 46 { 47 background-color: red; 48 content: ""; 49 display: block; 50 height: 18px; 51 margin-left: 61px; 52 margin-top: -28px; 53 width: 18px; 54 } 55 </style> 56 57 <p>Test passes if there is a filled green circle and <strong>no red</strong>. 58 59 <div></div>