grid-item-intrinsic-ratio-stretch-005-ref.html (5036B)
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>Reference: 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 <style type="text/css"> 11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 12 13 .grid { 14 display: inline-grid; 15 border: 1px solid; 16 margin: 5px; 17 align-items: start; 18 justify-items: start; 19 } 20 img { 21 min-width: 0; 22 min-height: 0; 23 } 24 .vertical-tests div { vertical-align:bottom } 25 </style> 26 </head> 27 <body> 28 29 <!-- Group 1 --> 30 <div class="grid" style="grid: 96px / 20px"> 31 <img src="support/lime-2x24.png" style="width:4px; height:96px"> 32 </div> 33 <div class="grid" style="grid: 96px / 4px"> 34 <img src="support/lime-2x24.png" style="height:12px; width:4px"> 35 </div> 36 37 <div class="grid" style="grid: 8px / 20px"> 38 <img src="support/lime-24x2.png" style="height:8px; width:12px"> 39 </div> 40 <div class="grid" style="grid: 8px / 100px"> 41 <img src="support/lime-24x2.png" style="height:6px; width:100px"> 42 </div> 43 44 <div class="grid" style="grid: 96px / 20px"> 45 <img src="support/lime-2x24.png" style="align-self:start; height:48px; width:20px"> 46 </div> 47 <div class="grid" style="grid: 96px / 4px"> 48 <img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> 49 </div> 50 51 <div class="grid" style="grid: 8px / 100px"> 52 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 53 </div> 54 <div class="grid" style="grid: 8px / 10px"> 55 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 56 </div> 57 58 <br> 59 60 <!-- Group 2 --> 61 <div class="grid" style="grid: 96px / 20px"> 62 <img src="support/lime-2x24.png" style="width:20px; height:96px"> 63 </div> 64 <div class="grid" style="grid: 96px / 4px; width:6px"> 65 <img src="support/lime-2x24.png" style="width:6px; height:96px"> 66 </div> 67 68 <div class="grid" style="grid: 8px / 20px"> 69 <img src="support/lime-24x2.png" style="width:20px; height:8px"> 70 </div> 71 <div class="grid" style="grid: 8px / 100px; height:10px"> 72 <img src="support/lime-24x2.png" style="width:100px; height:10px"> 73 </div> 74 75 <div class="grid" style="grid: 48px / 6px; height:80px"> 76 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> 77 </div> 78 <div class="grid" style="grid: 96px / 4px;"> 79 <img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> 80 </div> 81 82 <div class="grid" style="grid: 4px / 100px"> 83 <img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> 84 </div> 85 <div class="grid" style="grid: 4px / 10px; width:72px"> 86 <img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> 87 </div> 88 89 <br> 90 91 <div class="vertical-tests"> 92 93 <!-- Group 3 --> 94 <div class="grid" style="grid: 96px / 20px"> 95 <img src="support/lime-2x24.png" style="width:4px; height:96px"> 96 </div> 97 <div class="grid" style="grid: 96px / 4px"> 98 <img src="support/lime-2x24.png" style="height:12px; width:4px"> 99 </div> 100 101 <div class="grid" style="grid: 8px / 20px"> 102 <img src="support/lime-24x2.png" style="height:8px; width:12px"> 103 </div> 104 <div class="grid" style="grid: 8px / 100px"> 105 <img src="support/lime-24x2.png" style="height:6px; width:100px"> 106 </div> 107 108 <div class="grid" style="grid: 96px / 20px"> 109 <img src="support/lime-2x24.png" style="align-self:start; height:48px; width:20px"> 110 </div> 111 <div class="grid" style="grid: 96px / 4px"> 112 <img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> 113 </div> 114 115 <div class="grid" style="grid: 8px / 100px"> 116 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 117 </div> 118 <div class="grid" style="grid: 8px / 10px"> 119 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 120 </div> 121 122 <br> 123 124 <!-- Group 4 --> 125 <div class="grid" style="grid: 96px / 20px"> 126 <img src="support/lime-2x24.png" style="width:20px; height:96px"> 127 </div> 128 <div class="grid" style="grid: 96px / 4px; width:6px"> 129 <img src="support/lime-2x24.png" style="width:6px; height:96px"> 130 </div> 131 132 <div class="grid" style="grid: 8px / 20px"> 133 <img src="support/lime-24x2.png" style="width:20px; height:8px"> 134 </div> 135 <div class="grid" style="grid: 8px / 100px; height:10px"> 136 <img src="support/lime-24x2.png" style="width:100px; height:10px"> 137 </div> 138 139 <div class="grid" style="grid: 48px / 6px; height:80px"> 140 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> 141 </div> 142 <div class="grid" style="grid: 96px / 4px"> 143 <img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> 144 </div> 145 146 <div class="grid" style="grid: 4px / 100px"> 147 <img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> 148 </div> 149 <div class="grid" style="grid: 4px / 10px; width:72px"> 150 <img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> 151 </div> 152 153 </div> 154 155 </body> 156 </html>