contain-size-064.html (1527B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-contain test: size containment: layout in place</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <meta name=flags content=""> 7 <meta name=assert content="The size containment box's content (including any pseudo-elements) must be laid out into the now fixed-size size containment box normally."> 8 <link rel="match" href="reference/contain-size-064-ref.html"> 9 <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size"> 10 11 <style> 12 div { font-size: 50px; } 13 .red { background: red; } 14 .green { background: green; } 15 .grid { 16 display: grid; 17 grid-template-columns: min-content max-content; 18 } 19 #test { contain: size; } 20 #test::after { content: "\a0" ; } 21 </style> 22 23 <p>This test passes if there are two green rectangles and no red. 24 25 <div class=grid> 26 <div style="grid-area: 1/1"> </div> 27 <div style="grid-area: 1/2"class=red></div><!-- will show if the size containment doesn't result in 0x0--> 28 <div style="grid-area: 1/3"></div> 29 30 <div class=red></div><!-- will show if the size containment doesn't result in 0x0--> 31 <div id=test class="grid red"><!-- will show if the size containment doesn't result in 0x0--> 32 <div> </div> 33 <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized--> 34 <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized--> 35 </div> 36 </div>