alignment-in-subgridded-axes-001.html (3692B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Test: Specified alignment properties in subgridded axes</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 <style> 7 body { 8 margin: 0; 9 padding: 0; 10 font-size: 0; 11 } 12 13 .grid { 14 background: gray; 15 display: inline-grid; 16 grid-auto-rows: 100px; 17 grid-template-columns: 100px; 18 } 19 20 .subgrid { 21 margin: 10px; 22 padding: 10px; 23 display: grid; 24 background: orangered; 25 border: blue solid 10px; 26 grid-template: subgrid / subgrid; 27 } 28 29 .as { align-self: start; } 30 .ae { align-self: end; } 31 .ac { align-self: center; } 32 .ab { align-self: baseline; } 33 34 .js { justify-self: start; } 35 .je { justify-self: end; } 36 .jc { justify-self: center; } 37 .jb { justify-self: baseline; } 38 </style> 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="/resources/check-layout-th.js"></script> 42 <body onload="checkLayout('.item')"> 43 <div class="grid"> 44 <div class="subgrid as js"> 45 <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> 46 </div> 47 <div class="subgrid as je"> 48 <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> 49 </div> 50 <div class="subgrid as jc"> 51 <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> 52 </div> 53 <div class="subgrid as jb"> 54 <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> 55 </div> 56 </div> 57 58 <div class="grid"> 59 <div class="subgrid ae js"> 60 <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> 61 </div> 62 <div class="subgrid ae je"> 63 <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> 64 </div> 65 <div class="subgrid ae jc"> 66 <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> 67 </div> 68 <div class="subgrid ae jb"> 69 <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> 70 </div> 71 </div> 72 73 <div class="grid"> 74 <div class="subgrid ac js"> 75 <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> 76 </div> 77 <div class="subgrid ac je"> 78 <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> 79 </div> 80 <div class="subgrid ac jc"> 81 <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> 82 </div> 83 <div class="subgrid ac jb"> 84 <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> 85 </div> 86 </div> 87 88 <div class="grid"> 89 <div class="subgrid ab js"> 90 <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div> 91 </div> 92 <div class="subgrid ab je"> 93 <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div> 94 </div> 95 <div class="subgrid ab jc"> 96 <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div> 97 </div> 98 <div class="subgrid ab jb"> 99 <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div> 100 </div> 101 </div> 102 </body>