Skip to content

GitLab

T
tangled
Commit 6534acd9 authored by Javier Fernandez's avatar Javier Fernandez Committed by Commit Bot
Browse files
Options

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

We have identified several cases where the Baseline Alignment accounts
for the grid's intrinsic size. Since we depend on the track sizing
algorithm to compute the grid's intrinsic size, the only way to handle
all these cases is to integrate the baseline alignment logic in the
algorithm.

Additionally, the CSSWG has identified several cases that can't be
solved properly; such cases have in common that they imply cyclic
dependencies between the item's and grid area's size. The CSSWG has
resolved that these items don't participate in baseline alignment:

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: default avatarSergio Villar <svillar@igalia.com>
Cr-Commit-Position: refs/heads/master@{#562406}
parent 1420b645
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1382 additions and 304 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html 0 → 100644
View file @ 6534acd9
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/support/grid.css 0 → 100644
View file @ 6534acd9
.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;
}
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html
View file @ 6534acd9
<!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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html
View file @ 6534acd9
......@@ -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>
......
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html
View file @ 6534acd9
......@@ -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>
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html
View file @ 6534acd9
......@@ -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>
-->
third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html
View file @ 6534acd9
......@@ -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>
-->
third_party/blink/renderer/core/layout/grid_baseline_alignment.cc
View file @ 6534acd9
......@@ -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();
......
third_party/blink/renderer/core/layout/grid_baseline_alignment.h
View file @ 6534acd9
......@@ -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;
......
third_party/blink/renderer/core/layout/grid_layout_utils.cc
View file @ 6534acd9
......@@ -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 {
......
third_party/blink/renderer/core/layout/grid_layout_utils.h
View file @ 6534acd9
......@@ -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 {
......
third_party/blink/renderer/core/layout/grid_track_sizing_algorithm.h
View file @ 6534acd9
......@@ -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;
......
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ 6534acd9
......@@ -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_;
......
third_party/blink/renderer/core/layout/layout_grid.h
View file @ 6534acd9
......@@ -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&,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment