contain-paint-023.html (1509B)
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/ref-filled-green-100px-square.xht"> 10 11 <meta content="This test checks that paint containment applies to atomic inline elements so that they can 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#rel-pos-red 16 { 17 background-image: url("support/pattern-gg-gr-100x100.png"); 18 color: green; 19 font-family: Ahem; 20 font-size: 50px; 21 height: 2em; 22 line-height: 1; 23 position: relative; 24 width: 2em; 25 } 26 27 div#containing-block 28 { 29 contain: paint; 30 display: inline-block; 31 height: 50%; 32 vertical-align: top; 33 width: 50%; 34 } 35 36 div#abspos 37 { 38 background-color: green; 39 height: 50px; 40 position: absolute; 41 left: 0px; 42 width: 50px; 43 } 44 </style> 45 46 <p>Test passes if there is a filled green square and <strong>no red</strong>. 47 48 <div id="rel-pos-red"> 49 50 AB C<div id="containing-block"> 51 52 <div id="abspos"></div> 53 54 </div> 55 56 </div> 57 58 <!-- 59 60 |--------| 61 | A B | 62 | .---| 63 | C |c-b| 64 |----|---| 65 66 -->