contain-paint-022.html (1402B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</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-022-ref.html"> 10 11 <meta content="This test checks that paint containment applies to atomic inline elements and then they act as containing block for absolutely positioned descendants." name="assert"> 12 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 14 <style> 15 div#incorrect-containing-block 16 { 17 color: transparent; 18 font-family: Ahem; 19 font-size: 100px; 20 height: 2em; 21 line-height: 1; 22 position: relative; 23 width: 2em; 24 } 25 26 div#correct-containing-block 27 { 28 background-color: red; 29 contain: paint; 30 display: inline-block; 31 height: 1em; 32 width: 1em; 33 } 34 35 div#abspos 36 { 37 background-color: green; 38 height: 1em; 39 left: 0; 40 position: absolute; 41 top: 0; 42 width: 1em; 43 } 44 </style> 45 46 <p>Test passes if there is a filled green square and <strong>no red</strong>. 47 48 <div id="incorrect-containing-block"> 49 50 AB C<div id="correct-containing-block"> 51 52 <div id="abspos"></div> 53 54 </div> 55 56 </div>