grid-item-intrinsic-ratio-stretch-002-ref.html (4882B)
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 definite min/max-size</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> 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 place-items: start start; 18 } 19 .vertical-tests div { vertical-align:bottom } 20 </style> 21 </head> 22 <body> 23 24 <!-- Group 1 --> 25 <div class="grid" style="grid: 96px / 20px"> 26 <img src="support/lime-2x24.png" style="width:4px; height:96px"> 27 </div> 28 <div class="grid" style="grid: 96px / 4px"> 29 <img src="support/lime-2x24.png" style="height:12px; width:4px"> 30 </div> 31 32 <div class="grid" style="grid: 8px / 20px"> 33 <img src="support/lime-24x2.png" style="height:8px; width:12px"> 34 </div> 35 <div class="grid" style="grid: 8px / 100px"> 36 <img src="support/lime-24x2.png" style="height:6px; width:100px"> 37 </div> 38 39 <div class="grid" style="grid: 96px / 20px"> 40 <img src="support/lime-2x24.png" style="align-self:start; height:48px; width:20px"> 41 </div> 42 <div class="grid" style="grid: 96px / 4px"> 43 <img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> 44 </div> 45 46 <div class="grid" style="grid: 8px / 100px"> 47 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 48 </div> 49 <div class="grid" style="grid: 8px / 10px"> 50 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 51 </div> 52 53 <br> 54 55 <!-- Group 2 --> 56 <div class="grid" style="grid: 96px / 20px"> 57 <img src="support/lime-2x24.png" style="width:20px; height:96px"> 58 </div> 59 <div class="grid" style="grid: 96px / 4px"> 60 <img src="support/lime-2x24.png" style="width:6px; height:96px"> 61 </div> 62 63 <div class="grid" style="grid: 8px / 20px"> 64 <img src="support/lime-24x2.png" style="width:20px; height:8px"> 65 </div> 66 <div class="grid" style="grid: 8px / 100px"> 67 <img src="support/lime-24x2.png" style="width:100px; height:10px"> 68 </div> 69 70 <div class="grid" style="grid: 48px / 6px"> 71 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> 72 </div> 73 <div class="grid" style="grid: 96px / 4px"> 74 <img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> 75 </div> 76 77 <div class="grid" style="grid: 8px / 100px"> 78 <img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))"> 79 </div> 80 <div class="grid" style="grid: 4px / 10px"> 81 <img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> 82 </div> 83 84 <br> 85 86 <div class="vertical-tests"> 87 88 <!-- Group 3 --> 89 <div class="grid" style="grid: 96px / 20px"> 90 <img src="support/lime-2x24.png" style="width:4px; height:96px"> 91 </div> 92 <div class="grid" style="grid: 96px / 4px"> 93 <img src="support/lime-2x24.png" style="height:12px; width:4px"> 94 </div> 95 96 <div class="grid" style="grid: 8px / 20px"> 97 <img src="support/lime-24x2.png" style="height:8px; width:12px"> 98 </div> 99 <div class="grid" style="grid: 8px / 100px"> 100 <img src="support/lime-24x2.png" style="height:6px; width:100px"> 101 </div> 102 103 <div class="grid" style="grid: 96px / 20px"> 104 <img src="support/lime-2x24.png" style="align-self:start; height:48px; width:20px"> 105 </div> 106 <div class="grid" style="grid: 96px / 4px"> 107 <img src="support/lime-2x24.png" style="align-self:start; height:12px; width:4px"> 108 </div> 109 110 <div class="grid" style="grid: 8px / 100px"> 111 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 112 </div> 113 <div class="grid" style="grid: 8px / 10px"> 114 <img src="support/lime-24x2.png" style="justify-self:start; width:48px; height:8px"> 115 </div> 116 117 <br> 118 119 <!-- Group 4 --> 120 <div class="grid" style="grid: 96px / 20px"> 121 <img src="support/lime-2x24.png" style="width:20px; height:96px"> 122 </div> 123 <div class="grid" style="grid: 96px / 4px"> 124 <img src="support/lime-2x24.png" style="width:6px; height:96px"> 125 </div> 126 127 <div class="grid" style="grid: 8px / 20px"> 128 <img src="support/lime-24x2.png" style="width:20px; height:8px"> 129 </div> 130 <div class="grid" style="grid: 8px / 100px"> 131 <img src="support/lime-24x2.png" style="width:100px; height:10px"> 132 </div> 133 134 <div class="grid" style="grid: 48px / 6px"> 135 <img src="support/lime-2x24.png" style="align-self:start; width:6px; height:80px"> 136 </div> 137 <div class="grid" style="grid: 96px / 4px"> 138 <img src="support/lime-2x24.png" style="align-self:start; width:4px; height:72px"> 139 </div> 140 141 <div class="grid" style="grid: 8px / 100px"> 142 <img src="support/lime-24x2.png" style="justify-self:start; width:98px; height:calc(2px * (98 / 24))"> 143 </div> 144 <div class="grid" style="grid: 4px / 10px"> 145 <img src="support/lime-24x2.png" style="justify-self:start; width:72px; height:4px"> 146 </div> 147 148 </div> 149 150 </body> 151 </html>