grid-column-axis-self-baseline-synthesized-005.html (2543B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed 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/#column-align"> 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-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-rows: 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="grid width100 alignItemsBaseline"> 40 <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="120">É É ÉÉ</div> 41 <div class="firstRowSecondColumn verticalLR bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div> 42 </div> 43 44 <pre>verticalRL grid and parallel items</pre> 45 46 <div class="grid width100 alignItemsBaseline"> 47 <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="120">É É ÉÉ</div> 48 <div class="firstRowSecondColumn verticalRL bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div> 49 </div> 50 51 </body>