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