chromium/src
0
Fork 0
Code Activity

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

Browse Source 
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:

https://github.com/w3c/csswg-drafts/issues/1365

There are also other related issues with some examples and relevant
discussions about this topic:

https://github.com/w3c/csswg-drafts/issues/1039
https://github.com/w3c/csswg-drafts/issues/1409

Bug: 704713
Change-Id: I817b16eb43aa76f4827deb8f1f20efb7fde3dc22
Reviewed-on: https://chromium-review.googlesource.com/923261
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Sergio Villar <svillar@igalia.com>
Cr-Commit-Position: refs/heads/master@{#562406}
This commit is contained in:
Javier Fernandez
2018-05-29 13:33:15 +00:00
committed by Commit Bot
parent 1420b6450d
commit 6534acd9b9
50 changed files with 1382 additions and 304 deletions
third_party
WebKit
LayoutTests
external
wpt
css
css-grid
alignment
grid-column-axis-self-baseline-synthesized-001.htmlgrid-column-axis-self-baseline-synthesized-002.htmlgrid-column-axis-self-baseline-synthesized-003.htmlgrid-column-axis-self-baseline-synthesized-004.htmlgrid-row-axis-self-baseline-synthesized-001.htmlgrid-row-axis-self-baseline-synthesized-002.htmlgrid-row-axis-self-baseline-synthesized-003.htmlgrid-row-axis-self-baseline-synthesized-004.htmlgrid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.htmlgrid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
support
grid.css
fast
css-grid-layout
grid-self-baseline-horiz-02-expected.htmlgrid-self-baseline-horiz-02.htmlgrid-self-baseline-horiz-03-expected.htmlgrid-self-baseline-horiz-03.htmlgrid-self-baseline-horiz-04-expected.htmlgrid-self-baseline-horiz-04.htmlgrid-self-baseline-horiz-05-expected.htmlgrid-self-baseline-horiz-05.htmlgrid-self-baseline-horiz-06-expected.htmlgrid-self-baseline-horiz-06.htmlgrid-self-baseline-two-dimensional.htmlgrid-self-baseline-vertical-lr-02-expected.htmlgrid-self-baseline-vertical-lr-02.htmlgrid-self-baseline-vertical-lr-03-expected.htmlgrid-self-baseline-vertical-lr-03.htmlgrid-self-baseline-vertical-lr-04-expected.htmlgrid-self-baseline-vertical-lr-04.htmlgrid-self-baseline-vertical-lr-05-expected.htmlgrid-self-baseline-vertical-lr-05.htmlgrid-self-baseline-vertical-lr-06-expected.htmlgrid-self-baseline-vertical-lr-06.htmlgrid-self-baseline-vertical-rl-02-expected.htmlgrid-self-baseline-vertical-rl-02.htmlgrid-self-baseline-vertical-rl-03-expected.htmlgrid-self-baseline-vertical-rl-03.htmlgrid-self-baseline-vertical-rl-04-expected.htmlgrid-self-baseline-vertical-rl-04.htmlgrid-self-baseline-vertical-rl-05-expected.htmlgrid-self-baseline-vertical-rl-05.htmlgrid-self-baseline-vertical-rl-06-expected.htmlgrid-self-baseline-vertical-rl-06.html
blink
renderer
core
layout
grid_baseline_alignment.ccgrid_baseline_alignment.hgrid_layout_utils.ccgrid_layout_utils.hgrid_track_sizing_algorithm.ccgrid_track_sizing_algorithm.hlayout_grid.cclayout_grid.h

67
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html vendored Normal file

@@ -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:jfernandez@igalia.com">
<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>

60
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html vendored Normal file

@@ -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:jfernandez@igalia.com">
<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>

64
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html vendored Normal file

@@ -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:jfernandez@igalia.com">
<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>

60
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html vendored Normal file

@@ -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:jfernandez@igalia.com">
<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>

69
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html vendored Normal file

@@ -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:jfernandez@igalia.com">
<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>

72
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html vendored Normal file

@@ -0,0 +1,72 @@
<!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:jfernandez@igalia.com">
<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="Empty grid items with fixed size 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: 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 verticalLR item with fixed width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>Horizontal grid and verticalRL item with fixed width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>VerticalLR grid and item with fixed height</pre>
<div class="grid justifyItemsBaseline verticalLR">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
<pre>VerticalRL grid and item with fixed width</pre>
<div class="grid justifyItemsBaseline verticalRL">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
</body>

72
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html vendored Normal file

@@ -0,0 +1,72 @@
<!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:jfernandez@igalia.com">
<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="Empty grid items with relative size 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: 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 verticalLR item with relative width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>Horizontal grid and verticalRL item with relative width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn relativeWidth" data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>VerticalLR grid and item with relative height</pre>
<div class="grid justifyItemsBaseline verticalLR">
<div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
<pre>VerticalRL grid and item with relative height</pre>
<div class="grid justifyItemsBaseline verticalRL">
<div class="firstRowFirstColumn relativeHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
</body>

72
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html vendored Normal file

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<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="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
<style>
.container { position: relative; }
.inline-grid {
position: relative;
text-orientation: sideways;
grid: 100px 200px / auto auto;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width200 { width: 200px; }
.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('.inline-grid')">
<pre>Horizontal grid and verticalLR item with relative width</pre>
<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>Horizontal grid and verticalRL item with fixed width</pre>
<div class="inline-grid justifyItemsBaseline" data-expected-width="210" data-expected-height="300">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>VerticalLR grid and item with fixed height</pre>
<div class="inline-grid justifyItemsBaseline verticalLR">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
<pre>VerticalRL grid and item with fixed height</pre>
<div class="inline-grid justifyItemsBaseline verticalRL">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
</body>

128
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html vendored Normal file

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<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-grid-1/#row-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/#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="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
<style>
.inline-grid {
position: relative;
border: solid;
text-orientation: sideways;
font-family: Ahem;
}
.columns { grid-template-columns: 100px 100px; }
.rows { grid-template-rows: 100px 100px; }
.min-content-columns { grid-auto-columns: min-content; }
.max-content-columns { grid-auto-columns: max-content; }
.fit-content-columns { grid-auto-columns: fit-content; }
.flex-columns { grid-auto-columns: 1fr; }
.min-content-rows { grid-auto-rows: min-content; }
.max-content-rows { grid-auto-rows: max-content; }
.fit-content-rows { grid-auto-rows: fit-content; }
.flex-rows { grid-auto-rows: 1fr; }
.height25 { height: 25px; }
.height50 { height: 50px; }
.height200 { height: 200px; }
.width25 { width: 25px; }
.width50 { width: 50px; }
.width200 { width: 200px; }
.height200Percent { height: 200%; }
.width200Percent { width: 200%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.inline-grid')">
<pre>auto-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns">
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>min-content-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>max-content-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>fit-content-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>flexible-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns flex-rows">
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>auto-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows">
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>flexible-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows flex-columns">
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>

178
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html vendored Normal file

@@ -0,0 +1,178 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<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-grid-1/#row-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/#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="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
<style>
.inline-grid {
position: relative;
border: solid;
text-orientation: sideways;
font-family: Ahem;
}
.columns { grid-template-columns: 100px 100px; }
.rows { grid-template-rows: 100px 100px; }
.min-content-columns { grid-auto-columns: min-content; }
.max-content-columns { grid-auto-columns: max-content; }
.fit-content-columns { grid-auto-columns: fit-content; }
.flex-columns { grid-auto-columns: 1fr; }
.min-content-rows { grid-auto-rows: min-content; }
.max-content-rows { grid-auto-rows: max-content; }
.fit-content-rows { grid-auto-rows: fit-content; }
.flex-rows { grid-auto-rows: 1fr; }
.height25 { height: 25px; }
.height50 { height: 50px; }
.height200 { height: 200px; }
.width25 { width: 25px; }
.width50 { width: 50px; }
.width200 { width: 200px; }
.bigFont { font-size: 50px; }
.paddingLeft { padding-left: 25px; }
.paddingBottom { padding-bottom: 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('.inline-grid')">
<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns height200">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="175">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="175" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows width200">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns width200">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns width200">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="25" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>

277
third_party/WebKit/LayoutTests/external/wpt/css/support/grid.css vendored Normal file

@@ -0,0 +1,277 @@
.grid {
display: grid;
background-color: grey;
}
.inline-grid {
display: inline-grid;
background-color: grey;
}
.firstRowFirstColumn {
background-color: blue;
grid-column: 1;
grid-row: 1;
}
.onlyFirstRowOnlyFirstColumn {
background-color: blue;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.firstRowSecondColumn {
background-color: lime;
grid-column: 2;
grid-row: 1;
}
.onlyFirstRowOnlySecondColumn {
background-color: lime;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.secondRowFirstColumn {
background-color: purple;
grid-column: 1;
grid-row: 2;
}
.onlySecondRowOnlyFirstColumn {
background-color: purple;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.secondRowSecondColumn {
background-color: orange;
grid-column: 2;
grid-row: 2;
}
.onlySecondRowOnlySecondColumn {
background-color: orange;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.endSecondRowEndSecondColumn {
background-color: orange;
grid-column-end: 3;
grid-row-end: 3;
}
.thirdRowSecondColumn {
background-color: red;
grid-column: 2;
grid-row: 3;
}
.firstRowThirdColumn {
background-color: magenta;
grid-column: 3;
grid-row: 1;
}
.secondRowThirdColumn {
background-color: navy;
grid-column: 3;
grid-row: 2;
}
.firstRowFourthColumn {
background-color: green;
grid-column: 4;
grid-row: 1;
}
.secondRowFourthColumn {
background-color: pink;
grid-column: 4;
grid-row: 2;
}
.firstAutoRowSecondAutoColumn {
grid-row: 1 / auto;
grid-column: 2 / auto;
}
.autoLastRowAutoLastColumn {
grid-row: auto / -1;
grid-column: auto / -1;
}
.autoSecondRowAutoFirstColumn {
grid-row: auto / 2;
grid-column: auto / 1;
}
.firstRowBothColumn {
grid-row: 1;
grid-column: 1 / -1;
}
.secondRowBothColumn {
grid-row: 2;
grid-column: 1 / -1;
}
.bothRowFirstColumn {
grid-row: 1 / -1;
grid-column: 1;
}
.bothRowSecondColumn {
grid-row: 1 / -1;
grid-column: 2;
}
.bothRowBothColumn {
grid-row: 1 / -1;
grid-column: 1 / -1;
}
/* Auto column / row. */
.autoRowAutoColumn {
background-color: pink;
grid-column: auto;
grid-row: auto;
}
.firstRowAutoColumn {
background-color: blue;
grid-column: auto;
grid-row: 1;
}
.secondRowAutoColumn {
background-color: purple;
grid-column: auto;
grid-row: 2;
}
.thirdRowAutoColumn {
background-color: navy;
grid-column: auto;
grid-row: 3;
}
.autoRowFirstColumn {
background-color: lime;
grid-column: 1;
grid-row: auto;
}
.autoRowSecondColumn {
background-color: orange;
grid-column: 2;
grid-row: auto;
}
.autoRowThirdColumn {
background-color: magenta;
grid-column: 3;
grid-row: auto;
}
.autoRowAutoColumnSpanning2 {
background-color: maroon;
grid-column: span 2;
grid-row: auto;
}
.autoRowSpanning2AutoColumn {
background-color: aqua;
grid-column: auto;
grid-row: span 2;
}
.autoRowSpanning2AutoColumnSpanning3 {
background-color: olive;
grid-column: span 3;
grid-row: span 2;
}
.autoRowSpanning3AutoColumnSpanning2 {
background-color: indigo;
grid-column: span 2;
grid-row: span 3;
}
.autoRowFirstColumnSpanning2 {
background-color: maroon;
grid-column: 1 / span 2;
grid-row: auto;
}
.autoRowSecondColumnSpanning2 {
background-color: olive;
grid-column: 2 / span 2;
grid-row: auto;
}
.firstRowSpanning2AutoColumn {
background-color: maroon;
grid-column: auto;
grid-row: 1 / span 2;
height: 100%;
}
.secondRowSpanning2AutoColumn {
background-color: olive;
grid-column: auto;
grid-row: 2 / span 2;
height: 100%;
}
/* Grid element flow. */
.gridAutoFlowColumnSparse {
grid-auto-flow: column;
}
.gridAutoFlowColumnDense {
grid-auto-flow: column dense;
}
.gridAutoFlowRowSparse {
grid-auto-flow: row;
}
.gridAutoFlowRowDense {
grid-auto-flow: row dense;
}
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
.constrainedContainer {
width: 10px;
height: 10px;
}
.unconstrainedContainer {
width: 1000px;
height: 1000px;
}
.sizedToGridArea {
font: 10px/1 Ahem;
/* Make us fit our grid area. */
width: 100%;
height: 100%;
}
.verticalRL {
writing-mode: vertical-rl;
}
.verticalLR {
writing-mode: vertical-lr;
}
.horizontalTB {
writing-mode: horizontal-tb;
}
.directionRTL {
direction: rtl;
}
.directionLTR {
direction: ltr;
}

4
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html vendored

@@ -22,12 +22,14 @@ body { margin: 0; }
}
.extraTopPadding { padding-top: 30px; }
.extraBottomPadding { padding-bottom: 30px; }
.top { vertical-align: top; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
</style>
<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block"><div class="item">A</div><div class="item verticalLR top">A</div><div class="item">A</div><div class="item verticalLR top">A</div></div>
<div class="block"><div class="item extraBottomPadding">A</div><div class="item verticalLR extraTopPadding top">A</div><div class="item">A</div><div class="item verticalLR top">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02.html vendored

@@ -25,7 +25,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block grid row contentStart itemsBaseline">
<div class="item">A</div>
<div class="item verticalLR">A</div>

11
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html vendored

@@ -23,11 +23,12 @@ body { margin: 0; }
}
.extraTopPadding { padding-top: 30px; }
.extraBottomPadding { padding-bottom: 30px; }
.top { vertical-align: top; }
.item { display: inline-block; }
</style>
<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.</p>
<div class="block"><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
<div class="block" ><div class="item verticalLR extraTopPadding">A</div><div class="item verticalLR">A</div><div class="item verticalLR extraBottomPadding">A</div><div class="item verticalLR">A</div></div>
<div class="block"><div class="item verticalRL">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div></div>
<div class="block" ><div class="item verticalRL extraTopPadding">A</div><div class="item verticalRL">A</div><div class="item verticalRL extraBottomPadding">A</div><div class="item verticalRL">A</div></div>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
<div class="block"><div class="item verticalLR top">A</div><div class="item verticalLR top">A</div><div class="item verticalLR top">A</div><div class="item verticalLR top">A</div></div>
<div class="block" ><div class="item verticalLR extraTopPadding top">A</div><div class="item verticalLR top">A</div><div class="item verticalLR extraBottomPadding top">A</div><div class="item verticalLR top">A</div></div>
<div class="block"><div class="item verticalRL top">A</div><div class="item verticalRL top">A</div><div class="item verticalRL top">A</div><div class="item verticalRL top">A</div></div>
<div class="block" ><div class="item verticalRL extraTopPadding top">A</div><div class="item verticalRL top">A</div><div class="item verticalRL extraBottomPadding top">A</div><div class="item verticalRL top">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03.html vendored

@@ -26,7 +26,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.</p>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
<div class="block grid row contentStart itemsBaseline">
<div class="item verticalLR">A</div>
<div class="item verticalLR">A</div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html vendored

@@ -27,6 +27,6 @@ body { margin: 0; }
.left { vertical-align: bottom; }
</style>
<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.</p>
<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
<div class="block verticalLR"><div class="item horizontalTB left">A</div><div class="item horizontalTB left">A</div><div class="item horizontalTB left">A</div><div class="item horizontalTB left">A</div></div>
<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">A</div><div class="item horizontalTB left">A</div><div class="item horizontalTB extraLeftPadding left">A</div><div class="item horizontalTB left">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04.html vendored

@@ -26,7 +26,7 @@ body { margin: 0; }
.column { grid-auto-flow: row; }
</style>
<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.</p>
<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
<div class="block grid column contentStart itemsBaseline">
<div class="item">A</div>
<div class="item">A</div>

18
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html vendored

@@ -9,6 +9,7 @@ body { margin: 0; }
margin: 5px;
text-orientation: sideways;
height: 350px;
position: relative;
}
.block > :nth-child(1) { font-size:24px; }
.block > :nth-child(2) { font-size:32px; }
@@ -24,16 +25,11 @@ body { margin: 0; }
.extraRightPadding { padding-right: 30px; }
.inline { display: inline-block; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
.bottom { vertical-align: bottom; }
</style>
<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block verticalLR"><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block verticalLR"><div class="item horizontalTB extraRightPadding">A</div><div class="item extraLeftPadding">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
-->
<div class="block verticalRL"><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block verticalRL"><div class="item horizontalTB extraRightPadding">A</div><div class="item extraLeftPadding">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
-->
<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block verticalLR"><div class="item horizontalTB bottom">A</div><div class="item">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
<div class="block verticalLR"><div class="item horizontalTB bottom extraRightPadding">A</div><div class="item extraLeftPadding">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
<div class="block verticalRL"><div class="item horizontalTB bottom">A</div><div class="item">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">A</div><div class="item extraLeftPadding">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>

6
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05.html vendored

@@ -25,32 +25,28 @@ body { margin: 0; }
.column { grid-auto-flow: row }
</style>
<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block grid column contentStart itemsBaseline">
<div class="item">A</div>
<div class="item verticalLR">A</div>
<div class="item">A</div>
<div class="item verticalLR">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column contentStart itemsBaseline">
<div class="item extraRightPadding">A</div>
<div class="item verticalLR extraLeftPadding">A</div>
<div class="item">A</div>
<div class="item verticalLR">A</div>
</div>
-->
<div class="block grid column contentStart itemsBaseline">
<div class="item">A</div>
<div class="item verticalRL">A</div>
<div class="item">A</div>
<div class="item verticalRL">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column contentStart itemsBaseline">
<div class="item extraRightPadding">A</div>
<div class="item verticalRL extraLeftPadding">A</div>
<div class="item">A</div>
<div class="item verticalRL">A</div>
</div>
-->

4
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html vendored

@@ -27,10 +27,6 @@ body { margin: 0; }
<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block verticalLR"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block verticalLR"><div class="item extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item">A</div><div class="item">A</div></div>
-->
<div class="block verticalRL"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block verticalRL"><div class="item extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item">A</div><div class="item">A</div></div>
-->

4
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06.html vendored

@@ -32,25 +32,21 @@ body { margin: 0; }
<div class="item verticalLR">A</div>
<div class="item verticalLR">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column contentStart itemsBaseline">
<div class="item verticalLR extraLeftPadding">A</div>
<div class="item verticalLR extraRightPadding ">A</div>
<div class="item verticalLR">A</div>
<div class="item verticalLR">A</div>
</div>
-->
<div class="block grid column contentStart itemsBaseline">
<div class="item verticalRL">A</div>
<div class="item verticalRL">A</div>
<div class="item verticalRL">A</div>
<div class="item verticalRL">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column contentStart itemsBaseline">
<div class="item verticalRL extraLeftPadding">A</div>
<div class="item verticalRL extraRightPadding ">A</div>
<div class="item verticalRL">A</div>
<div class="item verticalRL">A</div>
</div>
-->

72
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html vendored

@@ -46,10 +46,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline">
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="37" data-offset-y="34">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="138" data-offset-y="23">A</span><span class="firstRowThirdColumn verticalLR font24 extraLeftPadding" data-offset-x="240" data-offset-y="10">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="348" data-offset-y="22">A</span>
<span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="33" data-offset-y="123">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="138" data-offset-y="156">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="274" data-offset-y="155">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="348" data-offset-y="143">A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="17" data-offset-y="251">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="138" data-offset-y="311">A</span><span class="thirdRowThirdColumn verticalLR font24 extraBottomPadding" data-offset-x="262" data-offset-y="244">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="348" data-offset-y="280">A</span>
<span class="fourthRowFirstColumn verticalLR font24 extraRightPadding" data-offset-x="25" data-offset-y="373">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraBottomPadding" data-offset-x="138" data-offset-y="385">A</span><span class="fourthRowThirdColumn verticalLR font16" data-offset-x="270" data-offset-y="389">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="348" data-offset-y="417">A</span>
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="37" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="138" data-offset-y="11">A</span><span class="firstRowThirdColumn verticalLR font24 extraLeftPadding" data-offset-x="240" data-offset-y="10">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="348" data-offset-y="10">A</span>
<span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="33" data-offset-y="111">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="138" data-offset-y="124">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="274" data-offset-y="111">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="348" data-offset-y="111">A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="17" data-offset-y="212">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="138" data-offset-y="243">A</span><span class="thirdRowThirdColumn verticalLR font24 extraBottomPadding" data-offset-x="262" data-offset-y="212">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="348" data-offset-y="212">A</span>
<span class="fourthRowFirstColumn verticalLR font24 extraRightPadding" data-offset-x="25" data-offset-y="320">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraBottomPadding" data-offset-x="138" data-offset-y="320">A</span><span class="fourthRowThirdColumn verticalLR font16" data-offset-x="270" data-offset-y="320">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="348" data-offset-y="352">A</span>
</div>
</div>
@@ -57,10 +57,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline">
<span class="firstRowFirstColumn verticalLR font12 extraLeftPadding" data-offset-x="17" data-offset-y="34">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="193" data-offset-y="47">A</span><span class="firstRowThirdColumn verticalLR font24 extraRightPadding" data-offset-x="263" data-offset-y="10">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="420" data-offset-y="22">A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="63" data-offset-y="199">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="157" data-offset-y="162">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="299" data-offset-y="206">A</span><span class="secondRowFourthColumn verticalLR font32 extraBottomPadding" data-offset-x="376" data-offset-y="123">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="19" data-offset-y="268">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="193" data-offset-y="351">A</span><span class="thirdRowThirdColumn verticalLR font24 extraTopPadding" data-offset-x="263" data-offset-y="283">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="420" data-offset-y="344">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="63" data-offset-y="454">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="149" data-offset-y="413">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="299" data-offset-y="466">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="396" data-offset-y="453">A</span>
<span class="firstRowFirstColumn verticalLR font12 extraLeftPadding" data-offset-x="17" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="121" data-offset-y="35">A</span><span class="firstRowThirdColumn verticalLR font24 extraRightPadding" data-offset-x="" data-offset-y="10">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="336" data-offset-y="10">A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="17" data-offset-y="111">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="129" data-offset-y="111">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="223" data-offset-y="118">A</span><span class="secondRowFourthColumn verticalLR font32 extraBottomPadding" data-offset-x="336" data-offset-y="111">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="19" data-offset-y="235">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="121" data-offset-y="242">A</span><span class="thirdRowThirdColumn verticalLR font24 extraTopPadding" data-offset-x="223" data-offset-y="235">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="336" data-offset-y="235">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="17" data-offset-y="359">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="121" data-offset-y="359">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="223" data-offset-y="371">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="356" data-offset-y="359">A</span>
</div>
</div>
@@ -79,10 +79,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline verticalLR">
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="29" data-offset-y="73">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="53" data-offset-y="135">A</span><span class="firstRowThirdColumn verticalLR font24 extraBottomPadding" data-offset-x="17" data-offset-y="235">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="53" data-offset-y="343">A</span>
<span class="secondRowFirstColumn verticalLR font16" data-offset-x="155" data-offset-y="65">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="183" data-offset-y="147">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="159" data-offset-y="282">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="183" data-offset-y="343">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="285" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="329" data-offset-y="142">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="293" data-offset-y="258">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="329" data-offset-y="344">A</span>
<span class="fourthRowFirstColumn verticalLR font24" data-offset-x="399" data-offset-y="49">A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="435" data-offset-y="134">A</span><span class="fourthRowThirdColumn verticalLR font16" data-offset-x="407" data-offset-y="274">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="435" data-offset-y="375">A</span>
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="29" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="17" data-offset-y="135">A</span><span class="firstRowThirdColumn verticalLR font24 extraBottomPadding" data-offset-x="17" data-offset-y="235">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="17" data-offset-y="343">A</span>
<span class="secondRowFirstColumn verticalLR font16" data-offset-x="119" data-offset-y="10">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="119" data-offset-y="147">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="123" data-offset-y="235">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="119" data-offset-y="343">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="221" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="221" data-offset-y="142">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="229" data-offset-y="235">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="221" data-offset-y="344">A</span>
<span class="fourthRowFirstColumn verticalLR font24" data-offset-x="323" data-offset-y="10">A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="323" data-offset-y="134">A</span><span class="fourthRowThirdColumn verticalLR font16" data-offset-x="331" data-offset-y="235">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="323" data-offset-y="375">A</span>
</div>
</div>
@@ -90,10 +90,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline verticalLR">
<span class="firstRowFirstColumn verticalLR font12 extraBottomPadding" data-offset-x="29" data-offset-y="51">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="53" data-offset-y="189">A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="17" data-offset-y="282">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="53" data-offset-y="438">A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="199" data-offset-y="87">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="163" data-offset-y="176">A</span><span class="secondRowThirdColumn horizontalTB font12 extraBottomPadding" data-offset-x="199" data-offset-y="326">A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="155" data-offset-y="410">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraTopPadding" data-offset-x="269" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="313" data-offset-y="220">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="277" data-offset-y="282">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="313" data-offset-y="463">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="427" data-offset-y="75">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="383" data-offset-y="160">A</span><span class="fourthRowThirdColumn horizontalTB font16 extraTopPadding" data-offset-x="427" data-offset-y="295">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="403" data-offset-y="450">A</span>
<span class="firstRowFirstColumn verticalLR font12 extraBottomPadding" data-offset-x="29" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="17" data-offset-y="135">A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="17" data-offset-y="236">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="17" data-offset-y="351">A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="119" data-offset-y="22">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="127" data-offset-y="135">A</span><span class="secondRowThirdColumn horizontalTB font12 extraBottomPadding" data-offset-x="119" data-offset-y="267">A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="119" data-offset-y="351">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraTopPadding" data-offset-x="221" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="221" data-offset-y="166">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="229" data-offset-y="236">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="221" data-offset-y="376">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="323" data-offset-y="10">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="323" data-offset-y="135">A</span><span class="fourthRowThirdColumn horizontalTB font16 extraTopPadding" data-offset-x="323" data-offset-y="236">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="343" data-offset-y="351">A</span>
</div>
</div>
@@ -101,10 +101,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline verticalRL">
<span class="firstRowFirstColumn horizontalTB font12 extraTopPadding" data-offset-x="345" data-offset-y="18">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="345" data-offset-y="160">A</span><span class="firstRowThirdColumn horizontalTB font24" data-offset-x="345" data-offset-y="275">A</span><span class="firstRowFourthColumn horizontalTB font32 extraBottomPadding" data-offset-x="345" data-offset-y="360">A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="243" data-offset-y="35">A</span><span class="secondRowSecondColumn horizontalTB font24 extraTopPadding" data-offset-x="243" data-offset-y="124">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="243" data-offset-y="294">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="243" data-offset-y="360">A</span>
<span class="thirdRowFirstColumn horizontalTB font32 extraLeftPadding" data-offset-x="119" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraBottomPadding" data-offset-x="119" data-offset-y="167">A</span><span class="thirdRowThirdColumn horizontalTB font24 extraTopPadding" data-offset-x="119" data-offset-y="251">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="119" data-offset-y="361">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="17" data-offset-y="23">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraTopPadding" data-offset-x="17" data-offset-y="111">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="17" data-offset-y="287">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="17" data-offset-y="392">A</span>
<span class="firstRowFirstColumn horizontalTB font12 extraTopPadding" data-offset-x="385" data-offset-y="18">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="377" data-offset-y="160">A</span><span class="firstRowThirdColumn horizontalTB font24" data-offset-x="361" data-offset-y="275">A</span><span class="firstRowFourthColumn horizontalTB font32 extraBottomPadding" data-offset-x="345" data-offset-y="360">A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="275" data-offset-y="35">A</span><span class="secondRowSecondColumn horizontalTB font24 extraTopPadding" data-offset-x="259" data-offset-y="124">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="283" data-offset-y="294">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="243" data-offset-y="360">A</span>
<span class="thirdRowFirstColumn horizontalTB font32 extraLeftPadding" data-offset-x="119" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraBottomPadding" data-offset-x="181" data-offset-y="167">A</span><span class="thirdRowThirdColumn horizontalTB font24 extraTopPadding" data-offset-x="157" data-offset-y="251">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="173" data-offset-y="361">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="33" data-offset-y="23">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraTopPadding" data-offset-x="17" data-offset-y="111">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="49" data-offset-y="287">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="57" data-offset-y="392">A</span>
</div>
</div>
@@ -112,10 +112,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline verticalRL">
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="411" data-offset-y="73">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="435" data-offset-y="170">A</span><span class="firstRowThirdColumn verticalLR font24 extraTopPadding" data-offset-x="399" data-offset-y="246">A</span><span class="firstRowFourthColumn horizontalTB font32 extraRightPadding" data-offset-x="435" data-offset-y="355">A</span>
<span class="secondRowFirstColumn verticalLR font16" data-offset-x="269" data-offset-y="65">A</span><span class="secondRowSecondColumn horizontalTB font24 extraTopPadding" data-offset-x="297" data-offset-y="134">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="273" data-offset-y="294">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="297" data-offset-y="355">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="155" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="199" data-offset-y="177">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="163" data-offset-y="270">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="199" data-offset-y="380">A</span>
<span class="fourthRowFirstColumn verticalLR font24 extraTopPadding" data-offset-x="17" data-offset-y="25">A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="53" data-offset-y="145">A</span><span class="fourthRowThirdColumn verticalLR font16 extraBottomPadding" data-offset-x="25" data-offset-y="263">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="53" data-offset-y="387">A</span>
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="378" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="382" data-offset-y="170">A</span><span class="firstRowThirdColumn verticalLR font24 extraTopPadding" data-offset-x="366" data-offset-y="246">A</span><span class="firstRowFourthColumn horizontalTB font32 extraRightPadding" data-offset-x="323" data-offset-y="355">A</span>
<span class="secondRowFirstColumn verticalLR font16" data-offset-x="253" data-offset-y="10">A</span><span class="secondRowSecondColumn horizontalTB font24 extraTopPadding" data-offset-x="237" data-offset-y="134">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="257" data-offset-y="246">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="221" data-offset-y="355">A</span>
<span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="119" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="159" data-offset-y="177">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="127" data-offset-y="246">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="151" data-offset-y="380">A</span>
<span class="fourthRowFirstColumn verticalLR font24 extraTopPadding" data-offset-x="33" data-offset-y="10">A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="17" data-offset-y="145">A</span><span class="fourthRowThirdColumn verticalLR font16 extraBottomPadding" data-offset-x="41" data-offset-y="246">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="57" data-offset-y="387">A</span>
</div>
</div>
@@ -123,10 +123,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline verticalRL">
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="401" data-offset-y="50">A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="425" data-offset-y="208">A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="389" data-offset-y="300">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="425" data-offset-y="457">A</span>
<span class="secondRowFirstColumn horizontalTB font16 extraBottomPadding" data-offset-x="319" data-offset-y="63">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="283" data-offset-y="171">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="319" data-offset-y="344">A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="275" data-offset-y="429">A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="147" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraLeftPadding" data-offset-x="191" data-offset-y="215">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="155" data-offset-y="300">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="191" data-offset-y="482">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="61" data-offset-y="51">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="17" data-offset-y="155">A</span><span class="fourthRowThirdColumn horizontalTB font16 extraBottomPadding" data-offset-x="61" data-offset-y="337">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="37" data-offset-y="469">A</span>
<span class="firstRowFirstColumn verticalLR font12" data-offset-x="351" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="355" data-offset-y="114">A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="339" data-offset-y="215">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="323" data-offset-y="307">A</span>
<span class="secondRowFirstColumn horizontalTB font16 extraBottomPadding" data-offset-x="253" data-offset-y="22">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="229" data-offset-y="114">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="261" data-offset-y="222">A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="221" data-offset-y="307">A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="119" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraLeftPadding" data-offset-x="137" data-offset-y="121">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="127" data-offset-y="215">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="151" data-offset-y="332">A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="33" data-offset-y="10">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="17" data-offset-y="114">A</span><span class="fourthRowThirdColumn horizontalTB font16 extraBottomPadding" data-offset-x="49" data-offset-y="215">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="37" data-offset-y="307">A</span>
</div>
</div>
@@ -145,10 +145,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline">
<span class="firstRowFirstColumn verticalLR font12 extraLeftPadding" data-offset-x="17" data-offset-y="34">A<br>A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="185" data-offset-y="47">A<br>A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="287" data-offset-y="10">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="421" data-offset-y="22">A<br>A</span>
<span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="35" data-offset-y="187">A<br>A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="185" data-offset-y="220">A<br>A</span><span class="secondRowThirdColumn verticalLR font12 extraTopPadding" data-offset-x="299" data-offset-y="195">A<br>A</span><span class="secondRowFourthColumn horizontalTB font32 extraLeftPadding" data-offset-x="421" data-offset-y="207">A<br>A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="19" data-offset-y="372">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="185" data-offset-y="408">A<br>A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="287" data-offset-y="388">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="421" data-offset-y="425">A<br>A</span>
<span class="fourthRowFirstColumn verticalLR font24" data-offset-x="27" data-offset-y="533">A<br>A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="185" data-offset-y="545">A<br>A</span><span class="fourthRowThirdColumn verticalLR font16 extraBottomPadding" data-offset-x="295" data-offset-y="526">A<br>A</span><span class="fourthRowFourthColumn horizontalTB font12 extraTopPadding" data-offset-x="421" data-offset-y="553">A<br>A</span>
<span class="firstRowFirstColumn verticalLR font12 extraLeftPadding" data-offset-x="17" data-offset-y="10">A<br>A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="185" data-offset-y="35">A<br>A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="287" data-offset-y="10">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="421" data-offset-y="10">A<br>A</span>
<span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="35" data-offset-y="175">A<br>A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="185" data-offset-y="188">A<br>A</span><span class="secondRowThirdColumn verticalLR font12 extraTopPadding" data-offset-x="299" data-offset-y="175">A<br>A</span><span class="secondRowFourthColumn horizontalTB font32 extraLeftPadding" data-offset-x="421" data-offset-y="175">A<br>A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="19" data-offset-y="340">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="185" data-offset-y="340">A<br>A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="287" data-offset-y="340">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="421" data-offset-y="357">A<br>A</span>
<span class="fourthRowFirstColumn verticalLR font24" data-offset-x="27" data-offset-y="458">A<br>A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="185" data-offset-y="458">A<br>A</span><span class="fourthRowThirdColumn verticalLR font16 extraBottomPadding" data-offset-x="295" data-offset-y="458">A<br>A</span><span class="fourthRowFourthColumn horizontalTB font12 extraTopPadding" data-offset-x="421" data-offset-y="466">A<br>A</span>
</div>
</div>
@@ -156,10 +156,10 @@ span {
<div style="position: relative">
<div class="grid fit-content itemsBaseline">
<span class="firstRowFirstColumn verticalLR font12 extraTopPadding" data-offset-x="37" data-offset-y="10">A<br>A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="227" data-offset-y="47">A<br>A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="371" data-offset-y="10">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="549" data-offset-y="22">A<br>A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="61" data-offset-y="240">A<br>A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="191" data-offset-y="203">A<br>A</span><span class="secondRowThirdColumn horizontalTB font12 extraTopPadding" data-offset-x="407" data-offset-y="223">A<br>A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="505" data-offset-y="187">A<br>A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="17" data-offset-y="341">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="227" data-offset-y="377">A<br>A</span><span class="thirdRowThirdColumn verticalLR font24 extraLeftPadding" data-offset-x="349" data-offset-y="357">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="549" data-offset-y="370">A<br>A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="61" data-offset-y="536">A<br>A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="183" data-offset-y="495">A<br>A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="407" data-offset-y="548">A<br>A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="525" data-offset-y="535">A<br>A</span>
<span class="firstRowFirstColumn verticalLR font12 extraTopPadding" data-offset-x="37" data-offset-y="10">A<br>A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="183" data-offset-y="35">A<br>A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="371" data-offset-y="10">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="505" data-offset-y="10">A<br>A</span>
<span class="secondRowFirstColumn horizontalTB font16" data-offset-x="17" data-offset-y="192">A<br>A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="191" data-offset-y="175">A<br>A</span><span class="secondRowThirdColumn horizontalTB font12 extraTopPadding" data-offset-x="349" data-offset-y="175">A<br>A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="505" data-offset-y="175">A<br>A</span>
<span class="thirdRowFirstColumn verticalLR font32" data-offset-x="17" data-offset-y="293">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="183" data-offset-y="300">A<br>A</span><span class="thirdRowThirdColumn verticalLR font24 extraLeftPadding" data-offset-x="349" data-offset-y="293">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="505" data-offset-y="293">A<br>A</span>
<span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="17" data-offset-y="418">A<br>A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="183" data-offset-y="418">A<br>A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="349" data-offset-y="430">A<br>A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="525" data-offset-y="418">A<br>A</span>
</div>
</div>

9
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html vendored

@@ -23,10 +23,9 @@ body { margin: 0; }
.extraLeftPadding { padding-left: 30px; }
.extraRightPadding { padding-right: 30px; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
.bottom { vertical-align: bottom; }
</style>
<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block verticalLR"><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block verticalLR"><div class="item bottom horizontalTB">A</div><div class="item">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
<div class="block verticalLR"><div class="item bottom horizontalTB extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html vendored

@@ -25,7 +25,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block grid row verticalLR contentStart itemsBaseline">
<div class="item horizontalTB">A</div>
<div class="item">A</div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html vendored

@@ -26,6 +26,6 @@ body { margin: 0; }
.item { float: left; }
</style>
<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.</p>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
<div class="block verticalLR"><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">A</div><div class="item horizontalTB extraRightPadding">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>

4
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html vendored

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
@@ -26,7 +26,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.</p>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
<div class="block grid row verticalLR contentStart itemsBaseline">
<div class="item horizontalTB">A</div>
<div class="item horizontalTB">A</div>

7
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html vendored

@@ -23,8 +23,9 @@ body { margin: 0; }
}
.extraTopPadding { padding-top: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
</style>
<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.</p>
<div class="block"><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
<div class="block"><div class="item verticalLR extraTopPadding">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
<div class="block"><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div></div>
<div class="block"><div class="item top verticalLR extraTopPadding">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html vendored

@@ -25,7 +25,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.</p>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
<div class="block grid column verticalLR contentStart itemsBaseline">
<div class="item">A</div>
<div class="item">A</div>

9
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html vendored

@@ -25,10 +25,9 @@ body { margin: 0; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
.top { vertical-align: top; }
</style>
<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block"><div class="item verticalLR">A</div><div class="item">A</div><div class="item verticalLR">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block"><div class="item verticalLR extraTopPadding">A</div><div class="item extraBottomPadding">A</div><div class="item verticalLR">A</div><div class="item">A</div></div>
-->
<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block"><div class="item top verticalLR">A</div><div class="item">A</div><div class="item top verticalLR">A</div><div class="item">A</div></div>
<div class="block"><div class="item top verticalLR extraTopPadding">A</div><div class="item extraBottomPadding">A</div><div class="item top verticalLR">A</div><div class="item">A</div></div>

4
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html vendored

@@ -25,18 +25,16 @@ body { margin: 0; }
.column { grid-auto-flow: row }
</style>
<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block grid column verticalLR contentStart itemsBaseline">
<div class="item">A</div>
<div class="item horizontalTB">A</div>
<div class="item">A</div>
<div class="item horizontalTB">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column verticalLR contentStart itemsBaseline">
<div class="item extraTopPadding">A</div>
<div class="item horizontalTB extraBottomPadding">A</div>
<div class="item">A</div>
<div class="item horizontalTB">A</div>
</div>
-->

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html vendored

@@ -27,6 +27,4 @@ body { margin: 0; }
<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block"><div class="item extraBottomPadding">A</div><div class="item extraTopPadding">A</div><div class="item">A</div><div class="item">A</div></div>
-->

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html vendored

@@ -32,11 +32,9 @@ body { margin: 0; }
<div class="item horizontalTB">A</div>
<div class="item horizontalTB">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column verticalLR contentStart itemsBaseline">
<div class="item horizontalTB extraBottomPadding">A</div>
<div class="item horizontalTB extraTopPadding">A</div>
<div class="item horizontalTB">A</div>
<div class="item horizontalTB">A</div>
</div>
-->

9
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html vendored

@@ -23,10 +23,9 @@ body { margin: 0; }
.extraLeftPadding { padding-left: 30px; }
.extraRightPadding { padding-right: 30px; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
.top { vertical-align: top; }
</style>
<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block verticalRL"><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item horizontalTB">A</div><div class="item">A</div></div>
<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block verticalRL"><div class="item top horizontalTB">A</div><div class="item">A</div><div class="item top horizontalTB">A</div><div class="item">A</div></div>
<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item top horizontalTB">A</div><div class="item">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html vendored

@@ -25,7 +25,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block grid row verticalRL contentStart itemsBaseline">
<div class="item horizontalTB">A</div>
<div class="item">A</div>

7
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html vendored

@@ -24,8 +24,9 @@ body { margin: 0; }
.extraLeftPadding { padding-left: 30px; }
.extraRightPadding { padding-right: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
</style>
<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.</p>
<div class="block verticalRL"><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">A</div><div class="item horizontalTB extraRightPadding">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
<div class="block verticalRL"><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div></div>
<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">A</div><div class="item top horizontalTB extraRightPadding">A</div><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html vendored

@@ -26,7 +26,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.</p>
<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
<div class="block grid row verticalRL contentStart itemsBaseline">
<div class="item horizontalTB">A</div>
<div class="item horizontalTB">A</div>

7
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html vendored

@@ -23,8 +23,9 @@ body { margin: 0; }
}
.extraBottomPadding { padding-bottom: 30px; }
.item { display: inline-block; }
.top { vertical-align: top; }
</style>
<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.</p>
<div class="block directionRTL"><div class="item verticalRL">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div></div>
<div class="block directionRTL"><div class="item verticalRL extraBottomPadding">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div></div>
<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
<div class="block directionRTL"><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div></div>
<div class="block directionRTL"><div class="item top verticalRL extraBottomPadding">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div></div>

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html vendored

@@ -25,7 +25,7 @@ body { margin: 0; }
.row { grid-auto-flow: column; }
</style>
<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.</p>
<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
<div class="block grid column verticalRL contentStart itemsBaseline">
<div class="item">A</div>
<div class="item">A</div>

11
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html vendored

@@ -23,12 +23,9 @@ body { margin: 0; }
.extraTopPadding { padding-top: 30px; }
.extraBottomPadding { padding-bottom: 30px; }
.item { display: inline-block; }
.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
.item.horizontalTB { margin: 10px 6px 4px 0px; }
.top { vertical-align: top; }
</style>
<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block directionRTL"><div class="item verticalRL">A</div><div class="item">A</div><div class="item verticalRL">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block directionRTL"><div class="item verticalRL extraTopPadding">A</div><div class="item extraBottomPadding">A</div><div class="item verticalRL">A</div><div class="item">A</div></div>
-->
<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block directionRTL"><div class="item top verticalRL">A</div><div class="item">A</div><div class="item top verticalRL">A</div><div class="item">A</div></div>
<div class="block directionRTL"><div class="item top verticalRL extraTopPadding">A</div><div class="item extraBottomPadding">A</div><div class="item top verticalRL">A</div><div class="item">A</div></div>

4
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html vendored

@@ -25,18 +25,16 @@ body { margin: 0; }
.column { grid-auto-flow: row }
</style>
<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block grid column verticalRL contentStart itemsBaseline">
<div class="item">A</div>
<div class="item horizontalTB">A</div>
<div class="item">A</div>
<div class="item horizontalTB">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column verticalRL contentStart itemsBaseline">
<div class="item extraTopPadding">A</div>
<div class="item horizontalTB extraBottomPadding">A</div>
<div class="item">A</div>
<div class="item horizontalTB">A</div>
</div>
-->

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html vendored

@@ -27,6 +27,4 @@ body { margin: 0; }
<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
<div class="block directionRTL"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
<!-- https://crbug.com/704713
<div class="block directionRTL"><div class="item extraBottomPadding">A</div><div class="item extraTopPadding">A</div><div class="item">A</div><div class="item">A</div></div>
-->

2
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html vendored

@@ -32,11 +32,9 @@ body { margin: 0; }
<div class="item horizontalTB">A</div>
<div class="item horizontalTB">A</div>
</div>
<!-- https://crbug.com/704713
<div class="block grid column verticalRL contentStart itemsBaseline">
<div class="item horizontalTB extraBottomPadding">A</div>
<div class="item horizontalTB extraTopPadding">A</div>
<div class="item horizontalTB">A</div>
<div class="item horizontalTB">A</div>
</div>
-->

47
third_party/blink/renderer/core/layout/grid_baseline_alignment.cc vendored

@@ -4,7 +4,6 @@
#include "third_party/blink/renderer/core/layout/grid_baseline_alignment.h"
#include "third_party/blink/renderer/core/layout/layout_grid.h"
#include "third_party/blink/renderer/core/style/computed_style.h"
namespace blink {
@@ -83,13 +82,6 @@ bool GridBaselineAlignment::IsDescentBaselineForChild(
IsFlippedBlocksWritingMode(block_flow_)));
}
bool GridBaselineAlignment::IsBaselineContextComputed(
GridAxis baseline_axis) const {
return baseline_axis == kGridColumnAxis
? !row_axis_alignment_context_.IsEmpty()
: !col_axis_alignment_context_.IsEmpty();
}
bool GridBaselineAlignment::IsHorizontalBaselineAxis(GridAxis axis) const {
return axis == kGridRowAxis ? IsHorizontalWritingMode(block_flow_)
: !IsHorizontalWritingMode(block_flow_);
@@ -122,7 +114,7 @@ const BaselineGroup& GridBaselineAlignment::GetBaselineGroupForChild(
return context->GetSharedGroup(child, preference);
}
void GridBaselineAlignment::UpdateBaselineAlignmentContextIfNeeded(
void GridBaselineAlignment::UpdateBaselineAlignmentContext(
ItemPosition preference,
unsigned shared_context,
LayoutBox& child,
@@ -168,43 +160,6 @@ LayoutUnit GridBaselineAlignment::BaselineOffsetForChild(
return LayoutUnit();
}
base::Optional<LayoutUnit> GridBaselineAlignment::ExtentForBaselineAlignment(
ItemPosition preference,
unsigned shared_context,
const LayoutBox& child,
GridAxis baseline_axis) const {
DCHECK(IsBaselinePosition(preference));
if (!IsBaselineContextComputed(baseline_axis))
return base::nullopt;
auto& group = GetBaselineGroupForChild(preference, shared_context, child,
baseline_axis);
return group.MaxAscent() + group.MaxDescent();
}
bool GridBaselineAlignment::BaselineMayAffectIntrinsicSize(
const GridTrackSizingAlgorithm& algorithm,
GridTrackSizingDirection direction) const {
const auto& contexts_map = direction == kForColumns
? col_axis_alignment_context_
: row_axis_alignment_context_;
for (const auto& context : contexts_map) {
auto track_size = algorithm.GetGridTrackSize(direction, context.key);
// TODO(lajava): Should we consider flexible tracks as well ?
if (!track_size.IsContentSized())
continue;
for (const auto& group : context.value->SharedGroups()) {
if (group.size() > 1) {
auto grid_area_size =
algorithm.Tracks(direction)[context.key].BaseSize();
if (group.MaxAscent() + group.MaxDescent() > grid_area_size)
return true;
}
}
}
return false;
}
void GridBaselineAlignment::Clear() {
row_axis_alignment_context_.clear();
col_axis_alignment_context_.clear();

23
third_party/blink/renderer/core/layout/grid_baseline_alignment.h vendored

@@ -10,8 +10,6 @@
namespace blink {
class GridTrackSizingAlgorithm;
// These classes are used to implement the Baseline Alignment logic, as
// described in the CSS Box Alignment specification.
// https://drafts.csswg.org/css-align/#baseline-terms
@@ -142,10 +140,10 @@ class GridBaselineAlignment {
// Context the items belongs to.
// All the baseline offsets are updated accordingly based on the
// added item.
void UpdateBaselineAlignmentContextIfNeeded(ItemPosition,
unsigned shared_context,
LayoutBox&,
GridAxis);
void UpdateBaselineAlignmentContext(ItemPosition,
unsigned shared_context,
LayoutBox&,
GridAxis);
// Returns the baseline offset of a particular item, based on the
// max-ascent for its associated baseline-sharing group
@@ -154,18 +152,6 @@ class GridBaselineAlignment {
const LayoutBox&,
GridAxis) const;
// Returns the sum of the 'max-ascent' and 'max-descent' of a particular
// item's baseline-sharing group.
base::Optional<LayoutUnit> ExtentForBaselineAlignment(ItemPosition,
unsigned shared_context,
const LayoutBox&,
GridAxis) const;
// Determines whether baseline algnment may affect the intrinsic
// size of the grid container.
bool BaselineMayAffectIntrinsicSize(const GridTrackSizingAlgorithm&,
GridTrackSizingDirection) const;
// Sets the Grid Container's writing-mode so that we can avoid the
// dependecy of the LayoutGrid class for determining whether a grid
// item is orthogonal or not.
@@ -186,7 +172,6 @@ class GridBaselineAlignment {
LayoutUnit AscentForChild(const LayoutBox&, GridAxis) const;
LayoutUnit DescentForChild(const LayoutBox&, LayoutUnit, GridAxis) const;
bool IsDescentBaselineForChild(const LayoutBox&, GridAxis) const;
bool IsBaselineContextComputed(GridAxis) const;
bool IsHorizontalBaselineAxis(GridAxis) const;
bool IsOrthogonalChildForBaseline(const LayoutBox&) const;
bool IsParallelToBaselineAxisForChild(const LayoutBox&, GridAxis) const;

1
third_party/blink/renderer/core/layout/grid_layout_utils.cc vendored

@@ -5,7 +5,6 @@
#include "third_party/blink/renderer/core/layout/grid_layout_utils.h"
#include "third_party/blink/renderer/core/layout/layout_grid.h"
#include "third_party/blink/renderer/platform/length_functions.h"
namespace blink {

1
third_party/blink/renderer/core/layout/grid_layout_utils.h vendored

@@ -6,7 +6,6 @@
#define THIRD_PARTY_BLINK_RENDERER_CORE_LAYOUT_GRID_LAYOUT_UTILS_H_
#include "third_party/blink/renderer/core/layout/layout_box.h"
#include "third_party/blink/renderer/platform/layout_unit.h"
namespace blink {

178
third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.cc vendored

@@ -78,6 +78,14 @@ void GridTrack::EnsureGrowthLimitIsBiggerThanBaseSize() {
growth_limit_ = base_size_;
}
static GridAxis GridAxisForDirection(GridTrackSizingDirection direction) {
return direction == kForColumns ? kGridRowAxis : kGridColumnAxis;
}
static GridTrackSizingDirection GridDirectionForAxis(GridAxis axis) {
return axis == kGridRowAxis ? kForColumns : kForRows;
}
class IndefiniteSizeStrategy final : public GridTrackSizingAlgorithmStrategy {
public:
IndefiniteSizeStrategy(GridTrackSizingAlgorithm& algorithm)
@@ -158,14 +166,14 @@ void GridTrackSizingAlgorithmStrategy::
LayoutUnit GridTrackSizingAlgorithm::GridAreaBreadthForChild(
const LayoutBox& child,
GridTrackSizingDirection direction) {
GridTrackSizingDirection direction) const {
if (direction == kForRows && sizing_state_ == kColumnSizingFirstIteration) {
DCHECK(GridLayoutUtils::IsOrthogonalChild(*layout_grid_, child));
return layout_grid_->EstimatedGridAreaBreadthForChild(grid_, child,
kForRows);
}
Vector<GridTrack>& all_tracks = Tracks(direction);
const Vector<GridTrack>& all_tracks = Tracks(direction);
const GridSpan& span = grid_.GridItemSpan(child, direction);
LayoutUnit grid_area_breadth;
for (const auto& track_position : span)
@@ -178,6 +186,19 @@ LayoutUnit GridTrackSizingAlgorithm::GridAreaBreadthForChild(
return grid_area_breadth;
}
bool GridTrackSizingAlgorithm::IsIntrinsicSizedGridArea(const LayoutBox& child,
GridAxis axis) const {
GridTrackSizingDirection direction = GridDirectionForAxis(axis);
const GridSpan& span = grid_.GridItemSpan(child, direction);
for (const auto& track_position : span) {
GridTrackSize track_size = GetGridTrackSize(direction, track_position);
if (track_size.IsContentSized() || track_size.IsFitContent() ||
(track_size.MaxTrackBreadth().IsFlex() && !FreeSpace(direction)))
return true;
}
return false;
}
bool GridTrackSizingAlgorithmStrategy::
UpdateOverrideContainingBlockContentSizeForChild(
LayoutBox& child,
@@ -194,28 +215,6 @@ bool GridTrackSizingAlgorithmStrategy::
return true;
}
base::Optional<LayoutUnit>
GridTrackSizingAlgorithmStrategy::ExtentForBaselineAlignment(
const LayoutBox& child) const {
const LayoutGrid& layout_grid = *GetLayoutGrid();
GridAxis baseline_axis =
GridLayoutUtils::IsOrthogonalChild(*GetLayoutGrid(), child)
? kGridRowAxis
: kGridColumnAxis;
if (!layout_grid.IsBaselineAlignmentForChild(child, baseline_axis))
return base::nullopt;
ItemPosition align =
layout_grid.SelfAlignmentForChild(baseline_axis, child).GetPosition();
const auto& span =
baseline_axis == kGridColumnAxis
? algorithm_.GetGrid().GridItemSpan(child, kForRows)
: algorithm_.GetGrid().GridItemSpan(child, kForColumns);
return algorithm_.baseline_alignment_.ExtentForBaselineAlignment(
align, span.StartLine(), child, baseline_axis);
};
LayoutUnit GridTrackSizingAlgorithmStrategy::LogicalHeightForChild(
LayoutBox& child) const {
GridTrackSizingDirection child_block_direction =
@@ -234,11 +233,10 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::LogicalHeightForChild(
child.LayoutIfNeeded();
if (auto baseline_extent = ExtentForBaselineAlignment(child))
return baseline_extent.value();
return child.LogicalHeight() +
GridLayoutUtils::MarginLogicalHeightForChild(*GetLayoutGrid(), child);
GridLayoutUtils::MarginLogicalHeightForChild(*GetLayoutGrid(), child) +
algorithm_.BaselineOffsetForChild(child,
GridAxisForDirection(Direction()));
}
DISABLE_CFI_PERF
@@ -252,13 +250,10 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::MinContentForChild(
// preferred width.
// See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
return child.MinPreferredLogicalWidth() +
GridLayoutUtils::MarginLogicalWidthForChild(*GetLayoutGrid(), child);
}
if (Direction() == kForColumns && !AvailableSpace()) {
DCHECK(GridLayoutUtils::IsOrthogonalChild(*GetLayoutGrid(), child));
if (auto baseline_extent = ExtentForBaselineAlignment(child))
return baseline_extent.value();
GridLayoutUtils::MarginLogicalWidthForChild(*GetLayoutGrid(),
child) +
algorithm_.BaselineOffsetForChild(child,
GridAxisForDirection(Direction()));
}
if (UpdateOverrideContainingBlockContentSizeForChild(
@@ -279,7 +274,10 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::MaxContentForChild(
// preferred width.
// See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
return child.MaxPreferredLogicalWidth() +
GridLayoutUtils::MarginLogicalWidthForChild(*GetLayoutGrid(), child);
GridLayoutUtils::MarginLogicalWidthForChild(*GetLayoutGrid(),
child) +
algorithm_.BaselineOffsetForChild(child,
GridAxisForDirection(Direction()));
}
if (UpdateOverrideContainingBlockContentSizeForChild(
@@ -333,11 +331,15 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::MinSizeForChild(
if (!child_size.IsAuto())
return MinContentForChild(child);
LayoutUnit baseline_shim = algorithm_.BaselineOffsetForChild(
child, GridAxisForDirection(Direction()));
LayoutUnit grid_area_size =
algorithm_.GridAreaBreadthForChild(child, child_inline_direction);
if (is_row_axis)
return MinLogicalWidthForChild(child, child_min_size, grid_area_size);
if (is_row_axis) {
return MinLogicalWidthForChild(child, child_min_size, grid_area_size) +
baseline_shim;
}
bool override_size_has_changed =
UpdateOverrideContainingBlockContentSizeForChild(
@@ -347,43 +349,69 @@ LayoutUnit GridTrackSizingAlgorithmStrategy::MinSizeForChild(
return child.ComputeLogicalHeightUsing(kMinSize, child_min_size,
child.IntrinsicLogicalHeight()) +
GridLayoutUtils::MarginLogicalHeightForChild(*GetLayoutGrid(), child) +
child.ScrollbarLogicalHeight();
child.ScrollbarLogicalHeight() + baseline_shim;
}
void GridTrackSizingAlgorithm::UpdateBaselineAlignmentContextIfNeeded(
bool GridTrackSizingAlgorithm::CanParticipateInBaselineAlignment(
const LayoutBox& child,
GridAxis baseline_axis) const {
if (!layout_grid_->IsBaselineAlignmentForChild(child, baseline_axis))
return false;
// Baseline cyclic dependencies only happen with synthesized
// baselines. These cases include orthogonal or empty grid items
// and replaced elements.
bool is_parallel_to_baseline_axis =
baseline_axis == kGridColumnAxis
? !GridLayoutUtils::IsOrthogonalChild(*layout_grid_, child)
: GridLayoutUtils::IsOrthogonalChild(*layout_grid_, child);
if (is_parallel_to_baseline_axis && child.FirstLineBoxBaseline() != -1)
return true;
// Baseline cyclic dependencies only happen in grid areas with
// intrinsically-sized tracks.
if (!IsIntrinsicSizedGridArea(child, baseline_axis))
return true;
return is_parallel_to_baseline_axis
? !child.HasRelativeLogicalHeight()
: !child.HasRelativeLogicalWidth() &&
!child.StyleRef().LogicalWidth().IsAuto();
}
void GridTrackSizingAlgorithm::UpdateBaselineAlignmentContext(
LayoutBox& child,
GridAxis baseline_axis) {
// TODO (lajava): We must ensure this method is not called as part of an
// intrinsic size computation.
if (!layout_grid_->IsBaselineAlignmentForChild(child, baseline_axis))
return;
DCHECK(CanParticipateInBaselineAlignment(child, baseline_axis));
DCHECK(!child.NeedsLayout());
child.LayoutIfNeeded();
ItemPosition align =
layout_grid_->SelfAlignmentForChild(baseline_axis, child).GetPosition();
const auto& span = baseline_axis == kGridColumnAxis
? grid_.GridItemSpan(child, kForRows)
: grid_.GridItemSpan(child, kForColumns);
baseline_alignment_.UpdateBaselineAlignmentContextIfNeeded(
align, span.StartLine(), child, baseline_axis);
const auto& span =
grid_.GridItemSpan(child, GridDirectionForAxis(baseline_axis));
baseline_alignment_.UpdateBaselineAlignmentContext(align, span.StartLine(),
child, baseline_axis);
}
LayoutUnit GridTrackSizingAlgorithm::BaselineOffsetForChild(
const LayoutBox& child,
GridAxis baseline_axis) const {
if (!layout_grid_->IsBaselineAlignmentForChild(child, baseline_axis))
if (!CanParticipateInBaselineAlignment(child, baseline_axis))
return LayoutUnit();
ItemPosition align =
layout_grid_->SelfAlignmentForChild(baseline_axis, child).GetPosition();
const auto& span = baseline_axis == kGridColumnAxis
? grid_.GridItemSpan(child, kForRows)
: grid_.GridItemSpan(child, kForColumns);
const auto& span =
grid_.GridItemSpan(child, GridDirectionForAxis(baseline_axis));
return baseline_alignment_.BaselineOffsetForChild(align, span.StartLine(),
child, baseline_axis);
}
void GridTrackSizingAlgorithm::ClearBaselineAlignment() {
baseline_alignment_.Clear();
baseline_alignment_.SetBlockFlow(layout_grid_->StyleRef().GetWritingMode());
}
LayoutUnit GridTrackSizingAlgorithmStrategy::ComputeTrackBasedSize() const {
return algorithm_.ComputeTrackBasedSize();
}
@@ -578,11 +606,10 @@ LayoutUnit IndefiniteSizeStrategy::MinContentForChild(LayoutBox& child) const {
// performed in LayoutGrid::LayoutOrthogonalWritingModeRoots.
DCHECK(GridLayoutUtils::IsOrthogonalChild(*GetLayoutGrid(), child));
if (auto baseline_extent = ExtentForBaselineAlignment(child))
return baseline_extent.value();
return child.LogicalHeight() +
GridLayoutUtils::MarginLogicalHeightForChild(*GetLayoutGrid(), child);
GridLayoutUtils::MarginLogicalHeightForChild(*GetLayoutGrid(), child) +
algorithm_.BaselineOffsetForChild(child,
GridAxisForDirection(Direction()));
}
DISABLE_CFI_PERF
@@ -1472,11 +1499,40 @@ void GridTrackSizingAlgorithm::Setup(
}
Tracks(direction).resize(num_tracks);
baseline_alignment_.SetBlockFlow(layout_grid_->StyleRef().GetWritingMode());
needs_setup_ = false;
}
void GridTrackSizingAlgorithm::UpdateBaselineAlignmentContext(
LayoutBox& child) {
bool can_participate_in_row_axis_baseline =
CanParticipateInBaselineAlignment(child, kGridRowAxis);
bool can_participate_in_column_axis_baseline =
CanParticipateInBaselineAlignment(child, kGridColumnAxis);
if (!can_participate_in_row_axis_baseline &&
!can_participate_in_column_axis_baseline)
return;
if ((can_participate_in_row_axis_baseline &&
child.HasRelativeLogicalWidth()) ||
(can_participate_in_column_axis_baseline &&
child.HasRelativeLogicalHeight())) {
layout_grid_->SetEstimatedGridAreaLogicalSize(grid_, child);
}
child.LayoutIfNeeded();
if (can_participate_in_row_axis_baseline)
UpdateBaselineAlignmentContext(child, kGridRowAxis);
if (can_participate_in_column_axis_baseline)
UpdateBaselineAlignmentContext(child, kGridColumnAxis);
}
void GridTrackSizingAlgorithm::ComputeBaselineAlignmentContext() {
ClearBaselineAlignment();
for (auto* child = layout_grid_->FirstInFlowChildBox(); child;
child = child->NextInFlowSiblingBox())
UpdateBaselineAlignmentContext(*child);
}
// Described in https://drafts.csswg.org/css-grid/#algo-track-sizing
void GridTrackSizingAlgorithm::Run() {
StateMachine state_machine(*this);

18
third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.h vendored

@@ -99,13 +99,9 @@ class GridTrackSizingAlgorithm final {
LayoutUnit MinContentSize() const { return min_content_size_; };
LayoutUnit MaxContentSize() const { return max_content_size_; };
void UpdateBaselineAlignmentContextIfNeeded(LayoutBox&, GridAxis);
void ComputeBaselineAlignmentContext();
LayoutUnit BaselineOffsetForChild(const LayoutBox&, GridAxis) const;
bool BaselineMayAffectIntrinsicSize(
GridTrackSizingDirection direction) const {
return baseline_alignment_.BaselineMayAffectIntrinsicSize(*this, direction);
}
void ClearBaselineAlignment() { baseline_alignment_.Clear(); }
void ClearBaselineAlignment();
Vector<GridTrack>& Tracks(GridTrackSizingDirection);
const Vector<GridTrack>& Tracks(GridTrackSizingDirection) const;
@@ -148,8 +144,13 @@ class GridTrackSizingAlgorithm final {
Vector<GridTrack*>* grow_beyond_growth_limits_tracks,
LayoutUnit& available_logical_space) const;
LayoutUnit GridAreaBreadthForChild(const LayoutBox&,
GridTrackSizingDirection);
GridTrackSizingDirection) const;
void UpdateBaselineAlignmentContext(LayoutBox&);
void UpdateBaselineAlignmentContext(LayoutBox&, GridAxis);
bool CanParticipateInBaselineAlignment(const LayoutBox&, GridAxis) const;
bool IsIntrinsicSizedGridArea(const LayoutBox&, GridAxis) const;
void ComputeGridContainerIntrinsicSizes();
// Helper methods for step 4. Strech flexible tracks.
@@ -279,9 +280,6 @@ class GridTrackSizingAlgorithmStrategy {
base::Optional<LayoutUnit> = base::nullopt) const;
LayoutUnit ComputeTrackBasedSize() const;
base::Optional<LayoutUnit> ExtentForBaselineAlignment(
const LayoutBox& child) const;
GridTrackSizingDirection Direction() const { return algorithm_.direction_; }
double FindFrUnitSize(const GridSpan& tracks_span,
LayoutUnit left_over_space) const;

80
third_party/blink/renderer/core/layout/layout_grid.cc vendored

@@ -253,15 +253,6 @@ void LayoutGrid::ComputeTrackSizesForDefiniteSize(
void LayoutGrid::RepeatTracksSizingIfNeeded(
LayoutUnit available_space_for_columns,
LayoutUnit available_space_for_rows) {
// Baseline alignment may change item's intrinsic size, hence changing its
// min-content contribution.
// https://drafts.csswg.org/css-align-3/#baseline-align-content
// https://drafts.csswg.org/css-align-3/#baseline-align-self
bool baseline_affect_intrinsic_width =
track_sizing_algorithm_.BaselineMayAffectIntrinsicSize(kForColumns);
bool baseline_affect_intrinsic_height =
track_sizing_algorithm_.BaselineMayAffectIntrinsicSize(kForRows);
// In orthogonal flow cases column track's size is determined by using the
// computed row track's size, which it was estimated during the first cycle of
// the sizing algorithm.
@@ -273,8 +264,7 @@ void LayoutGrid::RepeatTracksSizingIfNeeded(
// all the cases with orthogonal flows require this extra cycle; we need a
// more specific condition to detect whether child's min-content contribution
// has changed or not.
if (!baseline_affect_intrinsic_width && !baseline_affect_intrinsic_height &&
!has_any_orthogonal)
if (!has_any_orthogonal)
return;
// TODO (lajava): Whenever the min-content contribution of a grid item changes
@@ -288,13 +278,6 @@ void LayoutGrid::RepeatTracksSizingIfNeeded(
// and rows, to determine the final values.
ComputeTrackSizesForDefiniteSize(kForColumns, available_space_for_columns);
ComputeTrackSizesForDefiniteSize(kForRows, available_space_for_rows);
if (baseline_affect_intrinsic_height &&
StyleRef().LogicalHeight().IsIntrinsicOrAuto()) {
SetLogicalHeight(ComputeTrackBasedLogicalHeight() +
BorderAndPaddingLogicalHeight() +
ScrollbarLogicalHeight());
}
}
void LayoutGrid::UpdateBlockLayout(bool relayout_children) {
@@ -334,6 +317,8 @@ void LayoutGrid::UpdateBlockLayout(bool relayout_children) {
LayoutUnit available_space_for_columns = AvailableLogicalWidth();
PlaceItemsOnGrid(grid_, available_space_for_columns);
track_sizing_algorithm_.ComputeBaselineAlignmentContext();
// 1- First, the track sizing algorithm is used to resolve the sizes of the
// grid columns.
// At this point the logical width is always definite as the above call to
@@ -368,15 +353,6 @@ void LayoutGrid::UpdateBlockLayout(bool relayout_children) {
kForRows, LogicalHeight() - track_based_logical_height);
}
// TODO (lajava): We need to compute baselines after step 2 so
// items with a relative size (percentages) can resolve it before
// determining its baseline. However, we only set item's grid area
// (via override sizes) as part of the content-sized tracks sizing
// logic. Hence, items located at fixed or flexible tracks can't
// resolve correctly their size at this stage, which may lead to
// an incorrect computation of their shared context's baseline.
ComputeBaselineAlignmentContext();
// 3- If the min-content contribution of any grid items have changed based
// on the row sizes calculated in step 2, steps 1 and 2 are repeated with
// the new min-content contribution (once only).
@@ -523,6 +499,7 @@ void LayoutGrid::ComputeIntrinsicLogicalWidths(
PlaceItemsOnGrid(grid, base::nullopt);
GridTrackSizingAlgorithm algorithm(this, grid);
algorithm.ComputeBaselineAlignmentContext();
ComputeTrackSizesForIndefiniteSize(algorithm, kForColumns, grid,
min_logical_width, max_logical_width);
@@ -1217,17 +1194,36 @@ const StyleContentAlignmentData& LayoutGrid::ContentAlignmentNormalBehavior() {
return kNormalBehavior;
}
static bool OverrideSizeChanged(const LayoutBox& child,
GridTrackSizingDirection direction,
LayoutSize size) {
if (direction == kForColumns) {
return !child.HasOverrideContainingBlockContentLogicalWidth() ||
child.OverrideContainingBlockContentLogicalWidth() != size.Width();
}
return !child.HasOverrideContainingBlockContentLogicalHeight() ||
child.OverrideContainingBlockContentLogicalHeight() != size.Height();
}
static bool HasRelativeBlockAxisSize(const LayoutGrid& grid,
const LayoutBox& child) {
return GridLayoutUtils::IsOrthogonalChild(grid, child)
? child.HasRelativeLogicalWidth() ||
child.StyleRef().LogicalWidth().IsAuto()
: child.HasRelativeLogicalHeight();
}
void LayoutGrid::UpdateGridAreaLogicalSize(
LayoutBox& child,
LayoutSize grid_area_logical_size) const {
// Because the grid area cannot be styled, we don't need to adjust
// the grid breadth to account for 'box-sizing'.
if (child.OverrideContainingBlockContentLogicalWidth() !=
grid_area_logical_size.Width() ||
(child.OverrideContainingBlockContentLogicalHeight() !=
grid_area_logical_size.Height() &&
(child.HasRelativeLogicalHeight() ||
GridLayoutUtils::IsOrthogonalChild(*this, child)))) {
bool grid_area_width_changed =
OverrideSizeChanged(child, kForColumns, grid_area_logical_size);
bool grid_area_height_changed =
OverrideSizeChanged(child, kForRows, grid_area_logical_size);
if (grid_area_width_changed ||
(grid_area_height_changed && HasRelativeBlockAxisSize(*this, child))) {
child.SetNeedsLayout(LayoutInvalidationReason::kGridChanged, kMarkOnlyThis);
}
@@ -1730,16 +1726,6 @@ bool LayoutGrid::IsBaselineAlignmentForChild(const LayoutBox& child,
return IsBaselinePosition(align) && !has_auto_margins;
}
void LayoutGrid::ComputeBaselineAlignmentContext() {
for (auto* child = FirstInFlowChildBox(); child;
child = child->NextInFlowSiblingBox()) {
track_sizing_algorithm_.UpdateBaselineAlignmentContextIfNeeded(
*child, kGridRowAxis);
track_sizing_algorithm_.UpdateBaselineAlignmentContextIfNeeded(
*child, kGridColumnAxis);
}
}
LayoutUnit LayoutGrid::ColumnAxisBaselineOffsetForChild(
const LayoutBox& child) const {
return track_sizing_algorithm_.BaselineOffsetForChild(child, kGridColumnAxis);
@@ -2376,6 +2362,14 @@ size_t LayoutGrid::NumTracks(GridTrackSizingDirection direction,
StyleRef(), grid.AutoRepeatTracks(kForColumns));
}
void LayoutGrid::SetEstimatedGridAreaLogicalSize(const Grid& grid,
LayoutBox& child) const {
UpdateGridAreaLogicalSize(
child,
LayoutSize(EstimatedGridAreaBreadthForChild(grid, child, kForColumns),
EstimatedGridAreaBreadthForChild(grid, child, kForRows)));
}
LayoutUnit LayoutGrid::GridItemOffset(
GridTrackSizingDirection direction) const {
return direction == kForRows ? offset_between_rows_ : offset_between_columns_;

1
third_party/blink/renderer/core/layout/layout_grid.h vendored

@@ -107,6 +107,7 @@ class LayoutGrid final : public LayoutBlock {
LayoutUnit GridGap(GridTrackSizingDirection) const;
LayoutUnit GridItemOffset(GridTrackSizingDirection) const;
void SetEstimatedGridAreaLogicalSize(const Grid&, LayoutBox&) const;
LayoutUnit EstimatedGridAreaBreadthForChild(const Grid&,
const LayoutBox&,