grid-item-aspect-ratio-justify-self-002.html (4766B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> 5 <meta name="assert" content="For a grid item with display:table, an 'aspect-ratio', a resolvable percent height, and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio'"> 6 <style> 7 .group { margin-bottom: 20px;} 8 .group.orthog .item { writing-mode: vertical-rl } 9 .grid { 10 height: 32px; 11 width: 24px; 12 display: inline-grid; 13 border: 2px solid black; 14 vertical-align: top; 15 background: cyan; 16 } 17 18 .item { 19 display: table; 20 height: 100%; 21 background: fuchsia; 22 box-sizing: border-box; 23 aspect-ratio: 1/2; 24 } 25 .center { justify-self: center; } 26 .start { justify-self: start; } 27 .end { justify-self: end; } 28 .self-start { justify-self: self-start; } 29 .self-end { justify-self: self-end; } 30 .flex-start { justify-self: flex-start; } 31 .flex-end { justify-self: flex-end; } 32 .left { justify-self: left; } 33 .right { justify-self: right; } 34 .normal { justify-self: normal; } 35 .stretch { justify-self: stretch; } 36 </style> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script src="/resources/check-layout-th.js"></script> 40 <body onload="checkLayout('.item')"> 41 <div class="group"> 42 <div class="grid"> 43 <div class="item start" 44 data-expected-width="16" data-expected-height="32"></div> 45 </div> 46 <div class="grid"> 47 <div class="item end" 48 data-expected-width="16" data-expected-height="32"></div> 49 </div> 50 <div class="grid"> 51 <div class="item self-start" 52 data-expected-width="16" data-expected-height="32"></div> 53 </div> 54 <div class="grid"> 55 <div class="item self-end" 56 data-expected-width="16" data-expected-height="32"></div> 57 </div> 58 <div class="grid"> 59 <div class="item flex-start" 60 data-expected-width="16" data-expected-height="32"></div> 61 </div> 62 <div class="grid"> 63 <div class="item flex-end" 64 data-expected-width="16" data-expected-height="32"></div> 65 </div> 66 <div class="grid"> 67 <div class="item left" 68 data-expected-width="16" data-expected-height="32"></div> 69 </div> 70 <div class="grid"> 71 <div class="item right" 72 data-expected-width="16" data-expected-height="32"></div> 73 </div> 74 <div class="grid"> 75 <div class="item center" 76 data-expected-width="16" data-expected-height="32"></div> 77 </div> 78 <div class="grid"> 79 <div class="item normal" 80 data-expected-width="24" data-expected-height="48"></div> 81 </div> 82 <div class="grid"> 83 <div class="item stretch" 84 data-expected-width="24" data-expected-height="48"></div> 85 </div> 86 </div> 87 88 <!-- For these ones, the item's writing-mode will be orthogonal to the 89 grid container's writing-mode --> 90 <div class="group orthog"> 91 <div class="grid"> 92 <div class="item start" 93 data-expected-width="16" data-expected-height="32"></div> 94 </div> 95 <div class="grid"> 96 <div class="item end" 97 data-expected-width="16" data-expected-height="32"></div> 98 </div> 99 <div class="grid"> 100 <div class="item self-start" 101 data-expected-width="16" data-expected-height="32"></div> 102 </div> 103 <div class="grid"> 104 <div class="item self-end" 105 data-expected-width="16" data-expected-height="32"></div> 106 </div> 107 <div class="grid"> 108 <div class="item flex-start" 109 data-expected-width="16" data-expected-height="32"></div> 110 </div> 111 <div class="grid"> 112 <div class="item flex-end" 113 data-expected-width="16" data-expected-height="32"></div> 114 </div> 115 <div class="grid"> 116 <div class="item left" 117 data-expected-width="16" data-expected-height="32"></div> 118 </div> 119 <div class="grid"> 120 <div class="item right" 121 data-expected-width="16" data-expected-height="32"></div> 122 </div> 123 <div class="grid"> 124 <div class="item center" 125 data-expected-width="16" data-expected-height="32"></div> 126 </div> 127 <!-- TODO(dholbert): 128 These ones behave differently in every browser. Need to sort out 129 the expected rendering here... 130 <div class="grid"> 131 <div class="item normal" 132 data-expected-width="24" data-expected-height="48"></div> 133 </div> 134 <div class="grid"> 135 <div class="item stretch" 136 data-expected-width="24" data-expected-height="48"></div> 137 </div> 138 --> 139 </div> 140 </body>