grid-content-alignment-second-pass-002.html (3498B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Content alignment second pass</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> 7 <meta name="flags" content="ahem dom"> 8 <meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm."> 9 <link rel="stylesheet" href="/css/support/grid.css"> 10 <link rel="stylesheet" href="../../support/alignment.css"> 11 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 .grid { 15 position: relative; 16 font: 20px/1 Ahem; 17 margin: 10px; 18 display: inline-grid; 19 grid: 50% / 70%; 20 } 21 </style> 22 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/resources/check-layout-th.js"></script> 26 <script type="text/javascript"> 27 setup({ explicit_done: true }); 28 </script> 29 30 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 31 32 <div id="log"></div> 33 34 <div class="grid" data-expected-width="100" data-expected-height="40"> 35 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div> 36 </div> 37 38 <div class="grid contentStretch" data-expected-width="100" data-expected-height="40"> 39 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div> 40 </div> 41 42 <div class="grid contentStart" data-expected-width="100" data-expected-height="40"> 43 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div> 44 </div> 45 46 <div class="grid contentCenter" data-expected-width="100" data-expected-height="40"> 47 <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="10" data-expected-width="70" data-expected-height="20">XXX X</div> 48 </div> 49 50 <div class="grid contentEnd" data-expected-width="100" data-expected-height="40"> 51 <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="70" data-expected-height="20">XXX X</div> 52 </div> 53 54 <div class="grid contentSpaceBetween" data-expected-width="100" data-expected-height="60"> 55 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30">XXX X</div> 56 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="70" data-expected-height="20">X</div> 57 </div> 58 59 <div class="grid contentSpaceEvenly" style="grid-template-rows: 30%;" data-expected-width="100" data-expected-height="80"> 60 <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="24">XXX X</div> 61 <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div> 62 </div> 63 64 <div class="grid contentSpaceAround" style="grid-template-rows: 25%;" data-expected-width="100" data-expected-height="80"> 65 <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="20">XXX X</div> 66 <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div> 67 </div> 68 69 </body>