grid-item-aspect-ratio-justify-self-001.html (4731B)
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 an 'aspect-ratio' and 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 height: 100%; 20 background: fuchsia; 21 box-sizing: border-box; 22 aspect-ratio: 1/2; 23 } 24 .center { justify-self: center; } 25 .start { justify-self: start; } 26 .end { justify-self: end; } 27 .self-start { justify-self: self-start; } 28 .self-end { justify-self: self-end; } 29 .flex-start { justify-self: flex-start; } 30 .flex-end { justify-self: flex-end; } 31 .left { justify-self: left; } 32 .right { justify-self: right; } 33 .normal { justify-self: normal; } 34 .stretch { justify-self: stretch; } 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 <body onload="checkLayout('.item')"> 40 <div class="group"> 41 <div class="grid"> 42 <div class="item start" 43 data-expected-width="16" data-expected-height="32"></div> 44 </div> 45 <div class="grid"> 46 <div class="item end" 47 data-expected-width="16" data-expected-height="32"></div> 48 </div> 49 <div class="grid"> 50 <div class="item self-start" 51 data-expected-width="16" data-expected-height="32"></div> 52 </div> 53 <div class="grid"> 54 <div class="item self-end" 55 data-expected-width="16" data-expected-height="32"></div> 56 </div> 57 <div class="grid"> 58 <div class="item flex-start" 59 data-expected-width="16" data-expected-height="32"></div> 60 </div> 61 <div class="grid"> 62 <div class="item flex-end" 63 data-expected-width="16" data-expected-height="32"></div> 64 </div> 65 <div class="grid"> 66 <div class="item left" 67 data-expected-width="16" data-expected-height="32"></div> 68 </div> 69 <div class="grid"> 70 <div class="item right" 71 data-expected-width="16" data-expected-height="32"></div> 72 </div> 73 <div class="grid"> 74 <div class="item center" 75 data-expected-width="16" data-expected-height="32"></div> 76 </div> 77 <div class="grid"> 78 <div class="item normal" 79 data-expected-width="24" data-expected-height="48"></div> 80 </div> 81 <div class="grid"> 82 <div class="item stretch" 83 data-expected-width="24" data-expected-height="48"></div> 84 </div> 85 </div> 86 87 <!-- For these ones, the item's writing-mode will be orthogonal to the 88 grid container's writing-mode --> 89 <div class="group orthog"> 90 <div class="grid"> 91 <div class="item start" 92 data-expected-width="16" data-expected-height="32"></div> 93 </div> 94 <div class="grid"> 95 <div class="item end" 96 data-expected-width="16" data-expected-height="32"></div> 97 </div> 98 <div class="grid"> 99 <div class="item self-start" 100 data-expected-width="16" data-expected-height="32"></div> 101 </div> 102 <div class="grid"> 103 <div class="item self-end" 104 data-expected-width="16" data-expected-height="32"></div> 105 </div> 106 <div class="grid"> 107 <div class="item flex-start" 108 data-expected-width="16" data-expected-height="32"></div> 109 </div> 110 <div class="grid"> 111 <div class="item flex-end" 112 data-expected-width="16" data-expected-height="32"></div> 113 </div> 114 <div class="grid"> 115 <div class="item left" 116 data-expected-width="16" data-expected-height="32"></div> 117 </div> 118 <div class="grid"> 119 <div class="item right" 120 data-expected-width="16" data-expected-height="32"></div> 121 </div> 122 <div class="grid"> 123 <div class="item center" 124 data-expected-width="16" data-expected-height="32"></div> 125 </div> 126 <!-- TODO(dholbert): 127 These ones behave differently in every browser. Need to sort out 128 the expected rendering here... 129 <div class="grid"> 130 <div class="item normal" 131 data-expected-width="24" data-expected-height="48"></div> 132 </div> 133 <div class="grid"> 134 <div class="item stretch" 135 data-expected-width="24" data-expected-height="48"></div> 136 </div> 137 --> 138 </div> 139 </body>