auto-track-sizing-003.html (1053B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Grid Test: Subgrid auto track sizing</title> 10 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 11 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> 12 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 14 <style> 15 .wrapper { 16 width: 100px; 17 height: 100px; 18 background: red; 19 } 20 .grid { 21 display: grid; 22 width: min-content; 23 background: green; 24 color: transparent; 25 font: 25px/1 Ahem; 26 } 27 .subgrid { 28 display: grid; 29 grid-row: 1 / -1; 30 grid-column: 1 / -1; 31 grid-template: subgrid / subgrid; 32 } 33 </style> 34 </head> 35 <body> 36 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 37 <div class="wrapper"> 38 <div class="grid"> 39 <div class="subgrid"> 40 X XXXX XX XXX 41 </div> 42 </div> 43 </div> 44 </body> 45 </html>