subgrid-baseline-006.html (2388B)
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: 30px; 17 height: 30px; 18 border: solid 5px cyan; 19 } 20 .first { 21 align-self: baseline; 22 } 23 .last { 24 align-self: last baseline; 25 } 26 span { 27 width: 20px; 28 height: 20px; 29 box-sizing: border-box; 30 border: solid 5px orange; 31 display: inline-block; 32 } 33 </style> 34 <script src="/resources/testharness.js"></script> 35 <script src="/resources/testharnessreport.js"></script> 36 <script src="/resources/check-layout-th.js"></script> 37 <body onload="checkLayout('.item')"> 38 39 <div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;"> 40 <div style="display: grid; 41 grid-column: 1 / span 2; 42 grid-row: 1 / span 3; 43 grid-template: subgrid / subgrid;"> 44 <div style="display: grid; 45 grid-column: 1 / span 2; 46 grid-row: 1 / span 2; 47 grid-template: subgrid / subgrid;"> 48 <div data-offset-x="547" class="item first"> 49 <span></span><br><span></span> 50 </div> 51 <div data-offset-x="455" class="item last"> 52 <span></span><br><span></span> 53 </div> 54 <div data-offset-x="397" class="item first"> 55 <span></span><br><span></span> 56 </div> 57 <div data-offset-x="305" class="item last"> 58 <span></span><br><span></span> 59 </div> 60 </div> 61 <div data-offset-x="247" class="item first"> 62 <span></span><br><span></span> 63 </div> 64 <div data-offset-x="155" class="item last"> 65 <span></span><br><span></span> 66 </div> 67 </div> 68 <div data-offset-x="567" class="item small first"></div> 69 <div data-offset-x="455" class="item small last"></div> 70 <div data-offset-x="417" class="item small first"></div> 71 <div data-offset-x="305" class="item small last"></div> 72 <div data-offset-x="267" class="item small first"></div> 73 <div data-offset-x="155" class="item small last"></div> 74 </div>