grid-content-distribution-must-account-for-track-sizing-004.html (1624B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</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/#grid-align"> 6 <link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution"> 7 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between"> 8 <link rel="stylesheet" href="../../support/alignment.css"> 9 <meta name="flags" content="ahem"> 10 <meta name="assert" content="Content Distribution offset doesn't account for relative sized tracks with non-spanning items."> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 .grid { 14 display: inline-grid; 15 background: grey; 16 grid-template-columns: 50%; 17 font: 20px/1 Ahem; 18 } 19 20 .item1 { 21 background: green; 22 grid-column: 1; 23 grid-row: 1; 24 } 25 .item2 { 26 background: blue; 27 grid-column: 2; 28 grid-row: 1; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <script type="text/javascript"> 35 setup({ explicit_done: true }); 36 </script> 37 38 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 39 <div class="grid justifyContentSpaceBetween" data-expected-width="220" data-expected-height="40"> 40 <div class="item1" data-expected-width="110" data-expected-height="40">XXXX XXX</div> 41 <div class="item2" data-expected-width="60" data-expected-height="40">XXX</div> 42 </div> 43 </body>