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