grid-row-axis-self-baseline-synthesized-005.html (2620B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</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/#alignment"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> 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-3/#baseline-alignment"> 9 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> 10 <link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline"> 11 <link rel="stylesheet" href="/css/support/grid.css"> 12 <link rel="stylesheet" href="../../support/alignment.css"> 13 <meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline."> 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style> 16 body { overflow: scroll; } 17 .container { position: relative; } 18 .grid { 19 position: relative; 20 grid-template-columns: 150px; 21 text-orientation: sideways; 22 font: 20px/1 Ahem; 23 } 24 .width100 { width: 100px; } 25 .width200 { width: 200px; } 26 .width300 { width: 300px; } 27 .bigFont { font-size: 50px; } 28 </style> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/resources/check-layout-th.js"></script> 32 <script type="text/javascript"> 33 setup({ explicit_done: true }); 34 </script> 35 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 36 37 <pre>verticalLR grid and parallel items</pre> 38 39 <div class="container width100 verticalLR"> 40 <div class="grid justifyItemsBaseline"> 41 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="120">É É ÉÉ</div> 42 <div class="secondRowFirstColumn bigFont" data-offset-x="20" data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div> 43 </div> 44 </div> 45 46 <pre>verticalRL grid and parallel items</pre> 47 48 <div class="container width100 verticalRL"> 49 <div class="grid justifyItemsBaseline"> 50 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="120">É É ÉÉ</div> 51 <div class="secondRowFirstColumn bigFont" data-offset-x="0" data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div> 52 </div> 53 </div> 54 55 </body>