grid-content-alignment-second-pass-001.html (3117B)
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 width: 100px; 17 height: 50px; 18 font: 25px/1 Ahem; 19 margin: 10px; 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"> 35 <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div> 36 </div> 37 38 <div class="grid contentStretch"> 39 <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div> 40 </div> 41 42 <div class="grid contentStart"> 43 <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> 44 </div> 45 46 <div class="grid contentCenter"> 47 <div class="firstRowFirstColumn verticalLR" data-offset-x="25" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> 48 </div> 49 50 <div class="grid contentEnd"> 51 <div class="firstRowFirstColumn verticalLR" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> 52 </div> 53 54 <div class="grid contentSpaceBetween"> 55 <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> 56 <div class="firstRowSecondColumn" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div> 57 </div> 58 59 <div class="grid contentSpaceEvenly" style="width: 105px;"> 60 <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> 61 <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div> 62 </div> 63 64 <div class="grid contentSpaceAround" style="width: 115px;"> 65 <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div> 66 <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div> 67 </div> 68 69 </body>