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