subgrid-baseline-007.html (2798B)
1 <!DOCTYPE html> 2 <!-- TODO: Remove this test once bug 1871719 is addressed. This test is just a 3 modified copy of a more-robust WPT test, with several forms of padding 4 removed to provide test coverage while working around bug 1871719. --> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/"> 6 <style> 7 .item { 8 inline-size: 40px; 9 box-sizing: border-box; 10 border: solid 5px hotpink; 11 line-height: 0; 12 /* Note: the original test has margins here on every .item that we don't 13 handle properly for the items-in-the-subgrid for some reason, but we do 14 handle the margins properly on the items that aren't in a subgrid, so 15 I've just moved the margin declaration over to .small which 16 more-specifically-targets those items where we do handle things properly. 17 */ 18 } 19 .small { 20 width: 20px; 21 height: 20px; 22 border: solid 5px cyan; 23 margin-block-start: 3px; 24 margin-block-end: 5px; 25 } 26 .first { 27 align-self: baseline; 28 } 29 .last { 30 align-self: last baseline; 31 } 32 .item.small.first { 33 block-size: 50px; 34 } 35 .item.small.last { 36 block-size: 100px; 37 } 38 span { 39 width: 20px; 40 height: 20px; 41 box-sizing: border-box; 42 border: solid 5px orange; 43 display: inline-block; 44 } 45 </style> 46 <script src="/resources/testharness.js"></script> 47 <script src="/resources/testharnessreport.js"></script> 48 <script src="/resources/check-layout-th.js"></script> 49 <body onload="checkLayout('.item')"> 50 51 <div style="position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;"> 52 <div style="display: grid; 53 grid-column: 1 / span 2; 54 grid-row: 1 / span 3; 55 grid-template: subgrid / subgrid;"> 56 <div style="display: grid; 57 grid-column: 1 / span 2; 58 grid-row: 1 / span 2; 59 grid-template: subgrid / subgrid;"> 60 <div data-offset-y="28" class="item first"> 61 <span></span><br><span></span> 62 </div> 63 <div data-offset-y="58" class="item last"> 64 <span></span><br><span></span> 65 </div> 66 <div data-offset-y="136" class="item first"> 67 <span></span><br><span></span> 68 </div> 69 <div data-offset-y="166" class="item last"> 70 <span></span><br><span></span> 71 </div> 72 </div> 73 <div data-offset-y="244" class="item first"> 74 <span></span><br><span></span> 75 </div> 76 <div data-offset-y="274" class="item last"> 77 <span></span><br><span></span> 78 </div> 79 </div> 80 <div data-offset-y="3" class="item small first"></div> 81 <div data-offset-y="3" class="item small last"></div> 82 <div data-offset-y="111" class="item small first"></div> 83 <div data-offset-y="111" class="item small last"></div> 84 <div data-offset-y="219" class="item small first"></div> 85 <div data-offset-y="219" class="item small last"></div> 86 </div>