grid-align-stretching-replaced-items.html (3680B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: alignment for replaced element</title> 4 <link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self"> 7 <link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element"> 8 <link rel="help" href="https://drafts.csswg.org/css-align/#align-grid"> 9 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing"> 10 <meta name="assert" content="This test checks that the alignment properties apply the 'stretch' value correctly on replaced elements, such as images."> 11 <meta name="flags" content="ahem"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <link rel="stylesheet" href="/css/support/grid.css"> 14 <link rel="stylesheet" href="/css/support/alignment.css"> 15 16 <style> 17 .grid { 18 grid-template-columns: 500px; 19 grid-template-rows: 500px; 20 } 21 .fixedSizes { 22 width: 150px; 23 height: 150px; 24 } 25 .autoMargins { 26 margin: auto; 27 } 28 </style> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/resources/check-layout-th.js"></script> 32 <script type="text/javascript"> 33 setup({ explicit_done: true }); 34 </script> 35 36 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 37 38 <p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p> 39 40 <div style="position: relative"> 41 <p>The blue image's original size is 100px x 100px, default alignment is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p> 42 <div class="grid"> 43 <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> 44 </div> 45 </div> 46 47 <div style="position: relative"> 48 <p>The blue image's original size is 100px x 100px, 'normal' is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p> 49 <div class="grid itemsNormal"> 50 <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> 51 </div> 52 </div> 53 54 <div style="position: relative"> 55 <p>The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into.</p> 56 <div class="grid alignItemsStretch justifyItemsStretch"> 57 <img src="/css/support/blue-100.png" data-expected-width="500" data-expected-height="500"/> 58 </div> 59 </div> 60 61 <div style="position: relative"> 62 <p>The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.</p> 63 <div class="grid itemsCenter"> 64 <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> 65 </div> 66 </div> 67 68 <div style="position: relative"> 69 <p>The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.</p> 70 <div class="grid"> 71 <img class="fixedSizes" src="/css/support/blue-100.png" data-expected-width="150" data-expected-height="150"/> 72 </div> 73 </div> 74 75 <div style="position: relative"> 76 <p>The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.</p> 77 <div class="grid"> 78 <img class="autoMargins" src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/> 79 </div> 80 </div> 81 </body>