grid-item-aspect-ratio-justify-self-003.html (5329B)
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 <!-- NOTE(dholbert) This should maybe move to the shared WPT directory, but I'm 6 putting it in the internal directory for now because tables with captions 7 and aspect-ratio behave extremely differently in each engine right now, 8 and I'm not sure the behavior is well-specified. --> 9 <meta name="assert" content="For a grid item with display:table, a caption, 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' (after subtracting away the space needed for the caption)"> 10 <style> 11 .group { margin-bottom: 20px;} 12 .group.orthog .item { writing-mode: vertical-rl } 13 .grid { 14 height: 32px; 15 width: 24px; 16 display: inline-grid; 17 border: 2px solid black; 18 vertical-align: top; 19 background: cyan; 20 } 21 22 .item { 23 display: table; 24 height: 100%; 25 background: fuchsia; 26 box-sizing: border-box; 27 aspect-ratio: 1/2; 28 } 29 cap { 30 display: table-caption; 31 height: 4px; 32 width: 6px; 33 background: orange; 34 } 35 .center { justify-self: center; } 36 .start { justify-self: start; } 37 .end { justify-self: end; } 38 .self-start { justify-self: self-start; } 39 .self-end { justify-self: self-end; } 40 .flex-start { justify-self: flex-start; } 41 .flex-end { justify-self: flex-end; } 42 .left { justify-self: left; } 43 .right { justify-self: right; } 44 .normal { justify-self: normal; } 45 .stretch { justify-self: stretch; } 46 </style> 47 <script src="/resources/testharness.js"></script> 48 <script src="/resources/testharnessreport.js"></script> 49 <script src="/resources/check-layout-th.js"></script> 50 <body onload="checkLayout('.item')"> 51 <div class="group"> 52 <div class="grid"> 53 <div class="item start" 54 data-expected-width="14" data-expected-height="32"><cap></cap></div> 55 </div> 56 <div class="grid"> 57 <div class="item end" 58 data-expected-width="14" data-expected-height="32"><cap></cap></div> 59 </div> 60 <div class="grid"> 61 <div class="item self-start" 62 data-expected-width="14" data-expected-height="32"><cap></cap></div> 63 </div> 64 <div class="grid"> 65 <div class="item self-end" 66 data-expected-width="14" data-expected-height="32"><cap></cap></div> 67 </div> 68 <div class="grid"> 69 <div class="item flex-start" 70 data-expected-width="14" data-expected-height="32"><cap></cap></div> 71 </div> 72 <div class="grid"> 73 <div class="item flex-end" 74 data-expected-width="14" data-expected-height="32"><cap></cap></div> 75 </div> 76 <div class="grid"> 77 <div class="item left" 78 data-expected-width="14" data-expected-height="32"><cap></cap></div> 79 </div> 80 <div class="grid"> 81 <div class="item right" 82 data-expected-width="14" data-expected-height="32"><cap></cap></div> 83 </div> 84 <div class="grid"> 85 <div class="item center" 86 data-expected-width="14" data-expected-height="32"><cap></cap></div> 87 </div> 88 <div class="grid"> 89 <div class="item normal" 90 data-expected-width="24" data-expected-height="52"><cap></cap></div> 91 </div> 92 <div class="grid"> 93 <div class="item stretch" 94 data-expected-width="24" data-expected-height="52"><cap></cap></div> 95 </div> 96 </div> 97 98 <!-- For these ones, the item's writing-mode will be orthogonal to the 99 grid container's writing-mode --> 100 <div class="group orthog"> 101 <div class="grid"> 102 <div class="item start" 103 data-expected-width="22" data-expected-height="32"><cap></cap></div> 104 </div> 105 <div class="grid"> 106 <div class="item end" 107 data-expected-width="22" data-expected-height="32"><cap></cap></div> 108 </div> 109 <div class="grid"> 110 <div class="item self-start" 111 data-expected-width="22" data-expected-height="32"><cap></cap></div> 112 </div> 113 <div class="grid"> 114 <div class="item self-end" 115 data-expected-width="22" data-expected-height="32"><cap></cap></div> 116 </div> 117 <div class="grid"> 118 <div class="item flex-start" 119 data-expected-width="22" data-expected-height="32"><cap></cap></div> 120 </div> 121 <div class="grid"> 122 <div class="item flex-end" 123 data-expected-width="22" data-expected-height="32"><cap></cap></div> 124 </div> 125 <div class="grid"> 126 <div class="item left" 127 data-expected-width="22" data-expected-height="32"><cap></cap></div> 128 </div> 129 <div class="grid"> 130 <div class="item right" 131 data-expected-width="22" data-expected-height="32"><cap></cap></div> 132 </div> 133 <div class="grid"> 134 <div class="item center" 135 data-expected-width="22" data-expected-height="32"><cap></cap></div> 136 </div> 137 <div class="grid"> 138 <div class="item normal" 139 data-expected-width="22" data-expected-height="32"><cap></cap></div> 140 </div> 141 <div class="grid"> 142 <div class="item stretch" 143 data-expected-width="24" data-expected-height="32"><cap></cap></div> 144 </div> 145 </div> 146 </body>