contain-size-monolithic-002.html (1000B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"> 4 <title>CSS Containment Test: absolute positioned 'contain: size' element is monolithic</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> 8 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 9 <meta name="assert" content="This test checks that an absolute positioned element with size containment is monolithic."> 10 11 <style> 12 #multicol { 13 width: 300px; 14 column-count: 3; 15 } 16 #container { 17 position: relative; 18 } 19 #abs-size-contain { 20 position: absolute; 21 contain: size; 22 width: 100px; 23 height: 100px; 24 background: green; 25 } 26 </style> 27 28 <p>Test passes if there is a filled green square.</p> 29 <div id="multicol"> 30 <div id="container"> 31 <div id="abs-size-contain"></div> 32 </div> 33 </div> 34 </html>