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