grid-row-axis-self-baseline-synthesized-004.html (4109B)
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="Empty grid items with fixed size 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 .inline-grid { 18 position: relative; 19 text-orientation: sideways; 20 grid: 100px 200px / auto auto; 21 font-family: Ahem; 22 line-height: 1; 23 } 24 .bigFont { font-size: 50px; } 25 .height25 { height: 25px; } 26 .width25 { width: 25px; } 27 .width200 { width: 200px; } 28 .width300 { width: 300px; } 29 30 .paddingLeft { padding-left: 20px; } 31 .paddingRight { padding-right: 20px; } 32 33 .fixedHeight { height: 125px; } 34 .fixedWidth { width: 125px; } 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 <script type="text/javascript"> 40 setup({ explicit_done: true }); 41 </script> 42 <body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })"> 43 44 <pre>Horizontal grid and verticalLR item with fixed width</pre> 45 46 <!-- The two items share a baseline group. --> 47 <div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300"> 48 <div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> 49 <div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> 50 <div class="autoRowSpanning2AutoColumn width25"></div> 51 </div> 52 53 <pre>Horizontal grid and verticalRL item with fixed width</pre> 54 55 <!-- The two items *do not* share a baseline group. --> 56 <div class="inline-grid justifyItemsBaseline" data-expected-width="150" data-expected-height="300"> 57 <div class="firstRowFirstColumn fixedWidth" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div> 58 <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="5" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div> 59 <div class="autoRowSpanning2AutoColumn width25"></div> 60 </div> 61 62 <pre>VerticalLR grid and item with fixed height</pre> 63 64 <div class="inline-grid justifyItemsBaseline verticalLR"> 65 <div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> 66 <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> 67 <div class="autoRowSpanning2AutoColumn height25"></div> 68 </div> 69 70 <pre>VerticalRL grid and item with fixed height</pre> 71 72 <div class="inline-grid justifyItemsBaseline verticalRL"> 73 <div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div> 74 <div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div> 75 <div class="autoRowSpanning2AutoColumn height25"></div> 76 </div> 77 78 79 </body>