contain-size-grid-002.html (1206B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: Size containment on grid container with explicit non-intrinsically sized tracks (and gaps)</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> 6 <meta name=assert content="grid-gap, grid-template-columns, and grid-template-rows do affect the size of the grid, even with size containment"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 9 <style> 10 body { 11 overflow: hidden; 12 } 13 div { 14 position: absolute; 15 } 16 #red { 17 background: red; 18 width: 100px; 19 height: 100px; 20 } 21 #test { 22 background: green; 23 24 contain: size; 25 display: grid; 26 grid-gap: 20px; 27 grid-template-columns: auto 80px; /* 0 + 20 + 80 = 100 */ 28 grid-template-rows: 40px 40px; /* 40 + 20 + 40 = 100 */ 29 font-size: 800px; 30 } 31 </style> 32 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 <div id=red></div> 35 <div id=test> </div> 36 37 <!-- 38 The , auto sized column, and 800px font size 39 are to make the test fail in browsers 40 that do not implement contain:size at all, 41 by making the box non square. 42 -->