flex-sizing-rows-indefinite-height.html (901B)
1 <!DOCTYPE HTML> 2 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149627"> 3 <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"> 4 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 5 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4309" /> 6 <style> 7 .grid { 8 display: inline-grid; 9 position: relative; 10 grid-template-columns: minmax(0, .5fr); 11 grid-template-rows: minmax(0, .5fr); 12 } 13 .item { 14 width: 200px; 15 height: 200px; 16 background: linear-gradient(green, green) no-repeat; 17 background-size: 100px 100px; 18 } 19 .abspos { 20 grid-area: 1 / 1 / 2 / 2; 21 position: absolute; 22 width: 200%; 23 height: 200%; 24 background: red; 25 z-index: -1; 26 } 27 </style> 28 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 29 <div class="grid"> 30 <div class="item"></div> 31 <div class="abspos"></div> 32 </div>