grid-alignment-implies-size-change-031.html (1856B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing"> 7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> 8 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch"> 9 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal"> 10 <meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes replaced items to shrink."> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 .grid { 14 position: relative; 15 display: inline-grid; 16 grid-template-columns: 200px; 17 grid-template-rows: 100px; 18 font: 20px/1 Ahem; 19 background: grey; 20 justify-items: stretch; 21 } 22 #item { 23 background: blue; 24 justify-self: auto; 25 } 26 </style> 27 <script src="/resources/testharness.js"></script> 28 <script src="/resources/testharnessreport.js"></script> 29 <script src="/resources/check-layout-th.js"></script> 30 <script src="support/style-change.js"></script> 31 <script> 32 setup({ explicit_done: true }); 33 function runTest() { 34 evaluateStyleChangeMultiple('before', { 35 item: { 36 'data-expected-width': 200, 37 'data-expected-height': 200, 38 }, 39 }); 40 grid.style.justifyItems = 'normal'; 41 evaluateStyleChangeMultiple('after', { 42 item: { 43 'data-expected-width': 100, 44 'data-expected-height': 100, 45 }, 46 }); 47 done(); 48 } 49 </script> 50 <body onload="document.fonts.ready.then(() => { runTest(); })"> 51 <div class="grid" id="grid"> 52 <img id="item" src="support/100x100-green.png"></img> 53 </div> 54 </body>