contain-paint-001.html (983B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-contain test: paint containment use the padding edge</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <meta name=flags content=""> 7 <meta name=assert content="paint containment clips at the padding edge, not content edge, and takes corner clipping into account"> 8 <link rel="match" href="reference/contain-paint-001-ref.html"> 9 <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint"> 10 11 <style> 12 div { 13 width: 100px; 14 height: 100px; 15 background: blue; 16 padding: 50px; 17 border-radius: 100px; 18 contain: paint; 19 } 20 div::before { 21 content:""; 22 display: block; 23 background: green; 24 width: 100px; 25 height: 100px; 26 } 27 div::after { 28 content:""; 29 display: block; 30 background: red; 31 width: 50px; 32 height: 50px; 33 margin-top: 38px; 34 margin-left: -50px; 35 } 36 </style> 37 38 <p>Test passes if there is a green square in a rounded blue box, and no red. 39 <div></div>