grid-alignment-implies-size-change-020.html (1740B)
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-start"> 10 <meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes non-replaced items to grow."> 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: start; 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 evaluateStyleChange(item, "before", "data-expected-width", 120); 35 grid.style.justifyItems = "stretch"; 36 evaluateStyleChange(item, "after", "data-expected-width", 200); 37 done(); 38 } 39 </script> 40 <body onload="document.fonts.ready.then(() => { runTest(); })"> 41 <div class="grid" id="grid"> 42 <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div> 43 </div> 44 </body>