grid-item-intrinsic-ratio-stretch-004.html (5501B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> 11 <link rel="match" href="grid-item-intrinsic-ratio-stretch-004-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 14 .grid { 15 display: inline-grid; 16 border: 1px solid; 17 margin: 5px; 18 place-items: stretch stretch; 19 } 20 .vertical-tests img { writing-mode: vertical-rl; } 21 .vertical-tests div { vertical-align:bottom } 22 </style> 23 </head> 24 <body> 25 26 <!-- Group 1 --> 27 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> 28 <img src="support/lime-2x24.png"> 29 </div> 30 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> 31 <img src="support/lime-2x24.png"> 32 </div> 33 34 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> 35 <img src="support/lime-24x2.png"> 36 </div> 37 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> 38 <img src="support/lime-24x2.png"> 39 </div> 40 41 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 42 <img src="support/lime-2x24.png" style="align-self:start"> 43 </div> 44 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> 45 <img src="support/lime-2x24.png" style="align-self:start"> 46 </div> 47 48 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> 49 <img src="support/lime-24x2.png" style="justify-self:start"> 50 </div> 51 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)"> 52 <img src="support/lime-24x2.png" style="justify-self:start"> 53 </div> 54 55 <br> 56 57 <!-- Group 2 --> 58 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 59 <img src="support/lime-2x24.png" style="align-self:safe start;"> 60 </div> 61 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 62 <img src="support/lime-2x24.png" style="align-self:unsafe start;"> 63 </div> 64 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 65 <img src="support/lime-2x24.png" style="align-self:safe end;"> 66 </div> 67 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 68 <img src="support/lime-2x24.png" style="align-self:unsafe end;"> 69 </div> 70 71 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)"> 72 <img src="support/lime-24x2.png" style="justify-self:safe start"> 73 </div> 74 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> 75 <img src="support/lime-24x2.png" style="justify-self:unsafe start"> 76 </div> 77 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> 78 <img src="support/lime-24x2.png" style="justify-self:safe end"> 79 </div> 80 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 80px"> 81 <img src="support/lime-24x2.png" style="justify-self:unsafe end"> 82 </div> 83 84 <br> 85 86 <div class="vertical-tests"> 87 88 <!-- Group 3 --> 89 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)"> 90 <img src="support/lime-2x24.png"> 91 </div> 92 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> 93 <img src="support/lime-2x24.png"> 94 </div> 95 96 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)"> 97 <img src="support/lime-24x2.png"> 98 </div> 99 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> 100 <img src="support/lime-24x2.png"> 101 </div> 102 103 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 104 <img src="support/lime-2x24.png" style="align-self:start"> 105 </div> 106 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)"> 107 <img src="support/lime-2x24.png" style="align-self:start"> 108 </div> 109 110 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)"> 111 <img src="support/lime-24x2.png" style="justify-self:start"> 112 </div> 113 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)"> 114 <img src="support/lime-24x2.png" style="justify-self:start"> 115 </div> 116 117 <br> 118 119 <!-- Group 4 --> 120 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 121 <img src="support/lime-2x24.png" style="align-self:safe start;"> 122 </div> 123 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 124 <img src="support/lime-2x24.png" style="align-self:unsafe start;"> 125 </div> 126 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 127 <img src="support/lime-2x24.png" style="align-self:safe end;"> 128 </div> 129 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 10px)"> 130 <img src="support/lime-2x24.png" style="align-self:unsafe end;"> 131 </div> 132 133 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)"> 134 <img src="support/lime-24x2.png" style="justify-self:safe start"> 135 </div> 136 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> 137 <img src="support/lime-24x2.png" style="justify-self:unsafe start"> 138 </div> 139 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 40px"> 140 <img src="support/lime-24x2.png" style="justify-self:safe end"> 141 </div> 142 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px); margin-left: 80px"> 143 <img src="support/lime-24x2.png" style="justify-self:unsafe end"> 144 </div> 145 146 </div> 147 148 </body> 149 </html>