grid-column-axis-self-baseline-synthesized-001.html (3768B)
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 .container { position: relative; } 17 .grid { 18 position: relative; 19 text-orientation: sideways; 20 grid: 200px 100px / 100px 200px; 21 font-family: Ahem; 22 line-height: 1; 23 } 24 .bigFont { font-size: 50px; } 25 .height25 { height: 25px; } 26 .width25 { width: 25px; } 27 .width300 { width: 300px; } 28 29 .paddingLeft { padding-left: 25px; } 30 .paddingRight { padding-right: 25px; } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 <script type="text/javascript"> 36 setup({ explicit_done: true }); 37 </script> 38 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 39 40 <pre>Horizontal grid and verticalRL item</pre> 41 42 <div class="grid width300 alignItemsBaseline"> 43 <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div> 44 <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> 45 <div class="autoRowAutoColumnSpanning2 height25"></div> 46 </div> 47 48 <pre>Horizontal grid and verticalLR item</pre> 49 50 <div class="grid width300 alignItemsBaseline"> 51 <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div> 52 <div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> 53 <div class="autoRowAutoColumnSpanning2 height25"></div> 54 </div> 55 56 <pre>VerticalLR grid and Horizontal item</pre> 57 58 <div class="grid alignItemsBaseline verticalLR"> 59 <div class="firstRowFirstColumn horizontalTB" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div> 60 <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div> 61 <div class="autoRowAutoColumnSpanning2 width25"></div> 62 </div> 63 64 <pre>VerticalRL grid and Horizontal item</pre> 65 66 <div class="grid alignItemsBaseline verticalRL"> 67 <div class="firstRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div> 68 <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div> 69 <div class="autoRowAutoColumnSpanning2 width25"></div> 70 </div> 71 72 </body>