[css-grid] Baseline alignment inside the tracks sizing algorithm

We have identified several cases where the Baseline Alignment accounts for the grid's intrinsic size. Since we depend on the track sizing algorithm to compute the grid's intrinsic size, the only way to handle all these cases is to integrate the baseline alignment logic in the algorithm. Additionally, the CSSWG has identified several cases that can't be solved properly; such cases have in common that they imply cyclic dependencies between the item's and grid area's size. The CSSWG has resolved that these items don't participate in baseline alignment: w3c/csswg-drafts#1365 There are also other related issues with some examples and relevant discussions about this topic: w3c/csswg-drafts#1039 w3c/csswg-drafts#1409 Bug: 704713 Change-Id: I817b16eb43aa76f4827deb8f1f20efb7fde3dc22 Reviewed-on: https://chromium-review.googlesource.com/923261 Commit-Queue: Javier Fernandez <[email protected]> Reviewed-by: Sergio Villar <[email protected]> Cr-Commit-Position: refs/heads/master@{#562406}
web-platform-tests · May 31, 2018 · 82b2789 · 82b2789
1 parent f686741
commit 82b2789
Show file tree

Hide file tree

Showing 11 changed files with 1,119 additions and 0 deletions.
diff --git a/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html b/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and verticalRL item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalRL" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn horizontalTB"         data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn horizontalTB"          data-offset-x="100" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
diff --git a/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html b/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"     data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="175" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
diff --git a/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html b/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.height75 { height: 75px; }
+.width25  { width: 25px; }
+.width75  { width: 75px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and item with relative height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn relativeHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont"        data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with relative width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn relativeWidth"         data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with rlative width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn relativeWidth"          data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
diff --git a/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html b/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: auto auto / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"    data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"             data-offset-x="85" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
diff --git a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and verticalRL item</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                   data-offset-x="60" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                  data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn"                        data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn"                        data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>