grid-item-auto-min-size-clamp-007.html (7111B)
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: Clamp 'automatic minimum size' to definite max-sizing for items with specified intrinsic 'width'/'height'</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> 11 <link rel="match" href="grid-item-auto-min-size-clamp-007-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 float: left; 18 position: relative; 19 grid-template-columns: repeat(2,20px); 20 grid-template-rows: repeat(2,20px); 21 align-items: start; 22 justify-items: start; 23 border: 1px dashed; 24 margin-right: 16px; 25 margin-bottom: 14px; 26 } 27 .c-auto { grid-template-columns: minmax(auto, 15px); } 28 .c-min { grid-template-columns: minmax(min-content, 15px); } 29 .c-max { grid-template-columns: minmax(max-content, 15px); } 30 .r-auto { grid-template-rows: minmax(auto, 15px); } 31 .r-min { grid-template-rows: minmax(min-content, 15px); } 32 .r-max { grid-template-rows: minmax(max-content, 15px); } 33 span { 34 grid-area: 1 / 1; 35 font-size: 48px; 36 background: grey; 37 } 38 y { 39 position: absolute; 40 grid-area: 2 / 1 / 3 / 2; 41 top:0;left:0;right:0; 42 height: 10px; 43 background: lightgrey; 44 } 45 46 .min-content { 47 width: -webkit-min-content; 48 width: min-content; 49 } 50 .max-content { 51 width: -webkit-max-content; 52 width: max-content; 53 } 54 .fit-content { 55 width: -moz-fit-content; 56 width: -webkit-fit-content; 57 width: fit-content; 58 } 59 .fill { 60 width: -moz-available; 61 width: -webkit-fill-available; 62 width: fill; 63 } 64 65 .r .min-content { 66 height: -webkit-min-content; 67 height: min-content; 68 } 69 .r .max-content { 70 height: -webkit-max-content; 71 height: max-content; 72 } 73 .r .fit-content { 74 height: -moz-fit-content; 75 height: -webkit-fit-content; 76 height: fit-content; 77 } 78 .r .fill { 79 height: -moz-available; 80 height: -webkit-fill-available; 81 height: fill; 82 } 83 .r y { 84 grid-area: 1 / 2 / 2 / 3; 85 top:0;bottom:0;left:0; 86 width: 10px; 87 height: auto; 88 } 89 br { clear: both; } 90 91 x { display:block; width:30px; height:40px; } 92 </style> 93 </head> 94 <body> 95 96 <div class="grid c-auto"><y></y><span><x>X</x></span></div> 97 <div class="grid c-auto"><y></y><span class="min-content"><x>X</x></span></div> 98 <div class="grid c-auto"><y></y><span class="max-content"><x>X</x></span></div> 99 <div class="grid c-auto"><y></y><span class="fit-content"><x>X</x></span></div> 100 <div class="grid c-auto"><y></y><span class="fill"><x>X</x></span></div> 101 102 <br> 103 104 <div class="grid c-min"><y></y><span><x>X</x></span></div> 105 <div class="grid c-min"><y></y><span class="min-content"><x>X</x></span></div> 106 <div class="grid c-min"><y></y><span class="max-content"><x>X</x></span></div> 107 <div class="grid c-min"><y></y><span class="fit-content"><x>X</x></span></div> 108 <div class="grid c-min"><y></y><span class="fill"><x>X</x></span></div> 109 110 <br> 111 112 <div class="grid c-max"><y></y><span><x>X</x></span></div> 113 <div class="grid c-max"><y></y><span class="min-content"><x>X</x></span></div> 114 <div class="grid c-max"><y></y><span class="max-content"><x>X</x></span></div> 115 <div class="grid c-max"><y></y><span class="fit-content"><x>X</x></span></div> 116 <div class="grid c-max"><y></y><span class="fill"><x>X</x></span></div> 117 118 <br> 119 120 <div class="grid r r-auto"><y></y><span><x>X</x></span></div> 121 <div class="grid r r-auto"><y></y><span class="min-content"><x>X</x></span></div> 122 <div class="grid r r-auto"><y></y><span class="max-content"><x>X</x></span></div> 123 <div class="grid r r-auto"><y></y><span class="fit-content"><x>X</x></span></div> 124 <div class="grid r r-auto"><y></y><span class="fill"><x>X</x></span></div> 125 126 <br> 127 128 <div class="grid r r-min"><y></y><span><x>X</x></span></div> 129 <div class="grid r r-min"><y></y><span class="min-content"><x>X</x></span></div> 130 <div class="grid r r-min"><y></y><span class="max-content"><x>X</x></span></div> 131 <div class="grid r r-min"><y></y><span class="fit-content"><x>X</x></span></div> 132 <div class="grid r r-min"><y></y><span class="fill"><x>X</x></span></div> 133 134 <br> 135 136 <div class="grid r r-max"><y></y><span><x>X</x></span></div> 137 <div class="grid r r-max"><y></y><span class="min-content"><x>X</x></span></div> 138 <div class="grid r r-max"><y></y><span class="max-content"><x>X</x></span></div> 139 <div class="grid r r-max"><y></y><span class="fit-content"><x>X</x></span></div> 140 <div class="grid r r-max"><y></y><span class="fill"><x>X</x></span></div> 141 142 <br> 143 144 <div class="grid r c-min r-auto"><y></y><span><x>X</x></span></div> 145 <div class="grid r c-min r-auto"><y></y><span class="min-content"><x>X</x></span></div> 146 <div class="grid r c-min r-auto"><y></y><span class="max-content"><x>X</x></span></div> 147 <div class="grid r c-min r-auto"><y></y><span class="fit-content"><x>X</x></span></div> 148 <div class="grid r c-min r-auto"><y></y><span class="fill"><x>X</x></span></div> 149 150 <br> 151 152 <div class="grid r c-min r-min"><y></y><span><x>X</x></span></div> 153 <div class="grid r c-min r-min"><y></y><span class="min-content"><x>X</x></span></div> 154 <div class="grid r c-min r-min"><y></y><span class="max-content"><x>X</x></span></div> 155 <div class="grid r c-min r-min"><y></y><span class="fit-content"><x>X</x></span></div> 156 <div class="grid r c-min r-min"><y></y><span class="fill"><x>X</x></span></div> 157 158 <br> 159 160 <div class="grid r c-min r-max"><y></y><span><x>X</x></span></div> 161 <div class="grid r c-min r-max"><y></y><span class="min-content"><x>X</x></span></div> 162 <div class="grid r c-min r-max"><y></y><span class="max-content"><x>X</x></span></div> 163 <div class="grid r c-min r-max"><y></y><span class="fit-content"><x>X</x></span></div> 164 <div class="grid r c-min r-max"><y></y><span class="fill"><x>X</x></span></div> 165 166 <br> 167 168 <div class="grid r c-max r-auto"><y></y><span><x>X</x></span></div> 169 <div class="grid r c-max r-auto"><y></y><span class="min-content"><x>X</x></span></div> 170 <div class="grid r c-max r-auto"><y></y><span class="max-content"><x>X</x></span></div> 171 <div class="grid r c-max r-auto"><y></y><span class="fit-content"><x>X</x></span></div> 172 <div class="grid r c-max r-auto"><y></y><span class="fill"><x>X</x></span></div> 173 174 <br> 175 176 <div class="grid r c-max r-min"><y></y><span><x>X</x></span></div> 177 <div class="grid r c-max r-min"><y></y><span class="min-content"><x>X</x></span></div> 178 <div class="grid r c-max r-min"><y></y><span class="max-content"><x>X</x></span></div> 179 <div class="grid r c-max r-min"><y></y><span class="fit-content"><x>X</x></span></div> 180 <div class="grid r c-max r-min"><y></y><span class="fill"><x>X</x></span></div> 181 182 <br> 183 184 <div class="grid r c-max r-max"><y></y><span><x>X</x></span></div> 185 <div class="grid r c-max r-max"><y></y><span class="min-content"><x>X</x></span></div> 186 <div class="grid r c-max r-max"><y></y><span class="max-content"><x>X</x></span></div> 187 <div class="grid r c-max r-max"><y></y><span class="fit-content"><x>X</x></span></div> 188 <div class="grid r c-max r-max"><y></y><span class="fill"><x>X</x></span></div> 189 190 </body></html>