subgrid-baseline-010.html (1034B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Test: Subgrid with baseline-aligned standalone axis</title> 4 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <style> 8 body { 9 margin: 0; 10 padding: 0; 11 font: 15px/1 Ahem; 12 } 13 div { 14 align-items: baseline; 15 display: inline-grid; 16 grid-template: 30px / 60px; 17 } 18 .subgrid { grid-template: subgrid / repeat(2, 30px) } 19 .item { grid-template: auto / subgrid } 20 .item:nth-child(2) { font-size: 30px } 21 </style> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script src="/resources/check-layout-th.js"></script> 25 <body onload="checkLayout('.item')"> 26 <div> 27 <div class="subgrid"> 28 <div class="item" data-offset-y="12" data-expected-height="15">X</div> 29 <div class="item" data-offset-y="0" data-expected-height="30">X</div> 30 </div> 31 </div> 32 </body>