grid-alignment-implies-size-change-018.html (1843B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</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/#column-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-align-items"> 8 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch"> 9 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start"> 10 <meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes 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: 100px; 17 grid-template-rows: 80px; 18 font: 20px/1 Ahem; 19 background: grey; 20 align-items: stretch; 21 } 22 #item { 23 background: blue; 24 align-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': 80, 37 'data-expected-height': 80, 38 }, 39 }); 40 grid.style.alignItems = 'start'; 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>