grid-item-no-aspect-ratio-stretch-5.html (1195B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>stretching works for replaced items with no aspect ratio</title> 4 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> 8 <link rel="match" href="grid-item-no-aspect-ratio-stretch-5-ref.html"> 9 <style> 10 body { 11 line-height: 0; 12 } 13 14 div { 15 display: inline-grid; 16 grid-template: 100% / 100%; 17 height: 250px; 18 width: 350px; 19 background: grey; 20 margin: 10px; 21 vertical-align: top; 22 } 23 24 .justify { 25 justify-self: stretch; 26 } 27 .align { 28 align-self: stretch; 29 } 30 </style> 31 <div> 32 <img class="align justify"> 33 </div> 34 <div> 35 <img class="align"> 36 </div> 37 <div> 38 <img class="justify"> 39 </div> 40 <div> 41 <img> 42 </div> 43 44 <script> 45 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' 46 var imgs = document.querySelectorAll('img'); 47 for (var i = 0; i < imgs.length; ++i) { 48 var img = imgs[i]; 49 img.src = url; 50 } 51 </script>