subgrid-baseline-008.html (2466B)
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 margin-block-start: 3px; 13 margin-block-end: 5px; 14 } 15 .small { 16 width: 20px; 17 height: 20px; 18 border: solid 5px cyan; 19 } 20 .first { 21 align-self: baseline; 22 } 23 .last { 24 align-self: last baseline; 25 } 26 .item.small.first { 27 block-size: 50px; 28 } 29 .item.small.last { 30 block-size: 100px; 31 } 32 span { 33 width: 20px; 34 height: 20px; 35 box-sizing: border-box; 36 border: solid 5px orange; 37 display: inline-block; 38 } 39 </style> 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="/resources/check-layout-th.js"></script> 43 <body onload="checkLayout('.item')"> 44 45 <div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;"> 46 <div style="display: grid; 47 grid-column: 1 / span 2; 48 grid-row: 1 / span 3; 49 grid-template: subgrid / subgrid;"> 50 <div style="display: grid; 51 grid-column: 1 / span 2; 52 grid-row: 1 / span 2; 53 grid-template: subgrid / subgrid;"> 54 <div data-offset-x="537" class="item first"> 55 <span></span><br><span></span> 56 </div> 57 <div data-offset-x="440" class="item last"> 58 <span></span><br><span></span> 59 </div> 60 <div data-offset-x="337" class="item first"> 61 <span></span><br><span></span> 62 </div> 63 <div data-offset-x="240" class="item last"> 64 <span></span><br><span></span> 65 </div> 66 </div> 67 <div data-offset-x="137" class="item first"> 68 <span></span><br><span></span> 69 </div> 70 <div data-offset-x="40" class="item last"> 71 <span></span><br><span></span> 72 </div> 73 </div> 74 <div data-offset-x="547" class="item small first"></div> 75 <div data-offset-x="405" class="item small last"></div> 76 <div data-offset-x="347" class="item small first"></div> 77 <div data-offset-x="205" class="item small last"></div> 78 <div data-offset-x="147" class="item small first"></div> 79 <div data-offset-x="5" class="item small last"></div> 80 </div>