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