grid-item-intrinsic-ratio-stretch-006.html (2791B)
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: 'stretch' of image with zero ratio</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> 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-006-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 grid: auto-flow auto / minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) minmax(auto, 10px) minmax(auto, 30px) auto auto auto auto; 19 grid-gap: 5px; 20 border:1px solid; 21 align-items: stretch; 22 justify-items: stretch; 23 } 24 img:nth-child(1n) { background: blue; } 25 img:nth-child(2n) { background: grey; } 26 img:nth-child(3n) { background: tan; } 27 img:nth-child(4n) { background: black; } 28 img { 29 height: 20px; 30 border: 1px solid; 31 } 32 .jend { justify-self: end; } 33 .aend { align-self: end; } 34 .end { justify-self: end; align-self: end; } 35 </style> 36 </head> 37 <body> 38 39 <div class="grid sz"> 40 <img> 41 <img> 42 <img class="jend"> 43 <img class="jend"> 44 <img class="aend"> 45 <img class="aend"> 46 <img class="end"> 47 <img class="end"> 48 <img> 49 <img class="jend"> 50 <img class="aend"> 51 <img class="end"> 52 </div> 53 54 <div class="grid sz t2"> 55 <img> 56 <img> 57 <img class="jend"> 58 <img class="jend"> 59 <img class="aend"> 60 <img class="aend"> 61 <img class="end"> 62 <img class="end"> 63 <img> 64 <img class="jend"> 65 <img class="aend"> 66 <img class="end"> 67 </div> 68 69 <div class="grid"> 70 <img> 71 <img> 72 <img class="jend"> 73 <img class="jend"> 74 <img class="aend"> 75 <img class="aend"> 76 <img class="end"> 77 <img class="end"> 78 </div> 79 80 <div class="grid" style="grid:auto/auto auto"> 81 <img> 82 <img class="jend"> 83 <img class="aend"> 84 <img class="end"> 85 </div> 86 87 <div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> 88 <img> 89 <img class="jend"> 90 <img class="aend"> 91 <img class="end"> 92 </div> 93 94 <script> 95 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' 96 var imgs = document.querySelectorAll('img'); 97 for (var i = 0; i < imgs.length; ++i) { 98 var img = imgs[i]; 99 img.src = url; 100 } 101 </script> 102 103 <!-- For generating image size results in -ref file (try reloading a few times if you see all zeros) 104 <script> 105 document.body.clientHeight; 106 var imgs = document.querySelectorAll('img'); 107 var s = ' [\n'; 108 for (var i = 0; i < imgs.length; ++i) { 109 s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n"; 110 } 111 s += ']'; 112 console.log(s) 113 </script> 114 --> 115 116 </body> 117 </html>