grid-item-auto-min-size-clamp-003.html (4817B)
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 intrinsic ratio item</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-003-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 grid-template-columns: repeat(2,minmax(auto, 15px)); 18 grid-template-rows: repeat(2,minmax(auto, 10px)); 19 grid-gap: 1px; 20 align-items: start; 21 justify-items: start; 22 float: left; 23 border: 1px dashed; 24 margin-right: 16px; 25 margin-bottom: 14px; 26 } 27 .sz { 28 width: 40px; 29 height: 40px; 30 } 31 32 .definite { 33 grid-template-columns: repeat(2,15px); 34 grid-template-rows: repeat(2,10px); 35 } 36 .min { 37 grid-template-columns: repeat(2,minmax(max-content, 15px)); 38 grid-template-rows: repeat(2,minmax(max-content, 10px)); 39 } 40 .max { 41 grid-template-columns: repeat(2,minmax(min-content, 15px)); 42 grid-template-rows: repeat(2,minmax(min-content, 10px)); 43 } 44 45 .larger .grid { 46 grid-template-columns: repeat(2,minmax(auto, 25px)); 47 grid-template-rows: repeat(2,minmax(auto, 28px)); 48 } 49 .larger .definite { 50 grid-template-columns: repeat(2,25px); 51 grid-template-rows: repeat(2,28px); 52 } 53 .larger .min { 54 grid-template-columns: repeat(2,minmax(max-content, 25px)); 55 grid-template-rows: repeat(2,minmax(max-content, 28px)); 56 } 57 .larger .max { 58 grid-template-columns: repeat(2,minmax(min-content, 25px)); 59 grid-template-rows: repeat(2,minmax(min-content, 28px)); 60 } 61 62 .stretch .grid { 63 align-items: stretch; 64 justify-items: stretch; 65 } 66 67 img { 68 grid-area: 1 / 1; 69 border: 1px solid; 70 padding: 1px 3px 5px 7px; 71 margin: 3px 5px 7px 1px; 72 } 73 .span2 { 74 grid-area: 1 / 1 / span 2 / span 2; 75 } 76 .larger .grid .span2 { 77 font-size: 32px; 78 } 79 80 x { 81 grid-area: 1 / 1; 82 min-width: 0; 83 min-height: 0; 84 align-self: stretch; 85 justify-self: stretch; 86 background: cyan; 87 } 88 89 br { 90 clear: both; 91 } 92 </style> 93 </head> 94 <body> 95 96 <div id="tests"> 97 <div class="grid"><x></x><img src="support/solidblue-20x32.png"></div> 98 <div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> 99 <div class="grid"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 100 <div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 101 102 <div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> 103 <div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> 104 <div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 105 <div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 106 107 <br> 108 109 <div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> 110 <div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 111 <div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> 112 <div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 113 114 <div class="grid max"><x></x><img src="support/solidblue-20x32.png"></div> 115 <div class="grid max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 116 <div class="grid sz max"><x></x><img src="support/solidblue-20x32.png"></div> 117 <div class="grid sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 118 119 <br> 120 121 </div> 122 123 <script> 124 var tests = document.getElementById('tests'); 125 126 var n = tests.cloneNode(true); 127 var wrap = document.createElement('div'); 128 wrap.className = 'larger'; 129 wrap.appendChild(n); 130 document.body.appendChild(wrap); 131 132 var n = tests.cloneNode(true); 133 var wrap = document.createElement('div'); 134 wrap.className = 'stretch'; 135 wrap.appendChild(n); 136 document.body.appendChild(wrap); 137 138 var n = tests.cloneNode(true); 139 var wrap = document.createElement('div'); 140 wrap.className = 'stretch larger'; 141 wrap.appendChild(n); 142 document.body.appendChild(wrap); 143 144 </script> 145 146 <!-- 147 <script> 148 document.body.onload = function() { 149 document.body.clientHeight; 150 var imgs = document.querySelectorAll('img'); 151 var s = ' [\n'; 152 for (var i = 0; i < imgs.length; ++i) { 153 s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; 154 } 155 s += ']'; 156 console.log(s) 157 158 var grids = document.querySelectorAll('.grid'); 159 var s = ' [\n'; 160 for (var i = 0; i < grids.length; ++i) { 161 let cs = window.getComputedStyle(grids[i]); 162 s += " ['"+ cs.gridTemplateRows + " / " + cs.gridTemplateColumns + "'],\n"; 163 } 164 s += ']'; 165 console.log(s) 166 } 167 </script> 168 --> 169 170 </body></html>