Skip to content

GitLab

T
tangled
Commit 5b55328c authored by Manuel Rego Casasnovas's avatar Manuel Rego Casasnovas Committed by Commit Bot
Browse files
Options

[css-contain] Layout|Size containment and baseline in flexbox|grid 

In r591642 we updated the behavior so layout containment
suppress baseline alignment, while size containment does not.
However, we forgot about the special cases (flexbox and grid)
that have their own code for this, which are fixed in this patch.

Regarding WPT tests, these changes will fix the following issue:
https://github.com/web-platform-tests/wpt/issues/13252

One of the Mozilla tests is failing now, it was mentioned
in the associated bug report (https://bugzilla.mozilla.org/1491235).

BUG=882333
TEST=external/wpt/css/css-contain/contain-layout-button-001.html
TEST=external/wpt/css/css-contain/contain-layout-flexbox-001.html
TEST=external/wpt/css/css-contain/contain-layout-grid-001.html
TEST=external/wpt/css/css-contain/contain-size-button-001.html
TEST=external/wpt/css/css-contain/contain-size-flexbox-001.html
TEST=external/wpt/css/css-contain/contain-size-grid-001.html

Change-Id: I5e437d7f82d07d2f6222416a1eb9a3b89cb44eca
Reviewed-on: https://chromium-review.googlesource.com/1250524
Commit-Queue: Manuel Rego <rego@igalia.com>
Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595105}
parent b2551a09
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 14 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 5b55328c
...@@ -332,6 +332,7 @@ crbug.com/882388 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftest ...@@ -332,6 +332,7 @@ crbug.com/882388 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftest
crbug.com/863454 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-002.html [ Failure ] crbug.com/863454 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-002.html [ Failure ]
crbug.com/863454 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003.html [ Failure ] crbug.com/863454 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-multicol-003.html [ Failure ]
crbug.com/882333 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-inline-block-001.html [ Failure ] crbug.com/882333 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-inline-block-001.html [ Failure ]
crbug.com/882333 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-size-inline-flex-001.html [ Failure ]
# [css-align] # [css-align]
......
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/contain-layout-button-001.html 0 → 100644
View file @ 5b55328c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment on button</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="reference/contain-layout-button-001-ref.html">
<meta name=assert content="Layout containment does apply to buttons, thus their baseline is the same than if they don't have contents.">
<style>
button {
border: 5px solid green;
padding: 0;
contain: layout;
color: transparent;
width: 0;
height: 0;
}
</style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
before<button>b</button>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/contain-layout-flexbox-001.html 0 → 100644
View file @ 5b55328c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment on flexbox container</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="reference/contain-layout-flexbox-001-ref.html">
<meta name=assert content="Layout containment does apply to flexbox containers, thus their baseline is the same than if they don't have contents.">
<style>
div {
display: inline-flex;
border: 5px solid green;
contain: layout;
color: transparent;
width: 0;
height: 0;
}
</style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
before<div>f</div>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/contain-layout-grid-001.html 0 → 100644
View file @ 5b55328c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Layout containment on grid container</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
<link rel="match" href="reference/contain-layout-grid-001-ref.html">
<meta name=assert content="Layout containment does apply to grid containers, thus their baseline is the same than if they don't have contents.">
<style>
div {
display: inline-grid;
border: 5px solid green;
contain: layout;
color: transparent;
width: 0;
height: 0;
}
</style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
before<div>g</div>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/contain-size-button-001.html
View file @ 5b55328c
...@@ -4,15 +4,16 @@ ...@@ -4,15 +4,16 @@
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-button-001-ref.html"> <link rel="match" href="reference/contain-size-button-001-ref.html">
<meta name=assert content="Size containment does apply to buttons, thus their size and baseline is the same than if they don't have contents."> <meta name=assert content="Size containment does apply to buttons, thus their size is the same than if they don't have contents.">
<style> <style>
button { button {
border: 5px solid green; border: 5px solid green;
padding: 0; padding: 0;
contain: size; contain: size;
color: transparent; color: transparent;
font-size: 2em;
} }
</style> </style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p> <p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
before<button>flex</button>after before<button>flex</button>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/contain-size-flexbox-001.html
View file @ 5b55328c
...@@ -4,15 +4,16 @@ ...@@ -4,15 +4,16 @@
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-flexbox-001-ref.html"> <link rel="match" href="reference/contain-size-flexbox-001-ref.html">
<meta name=assert content="Size containment does apply to flexbox containers, thus their size and baseline is the same than if they don't have contents."> <meta name=assert content="Size containment does apply to flexbox containers, thus their size is the same than if they don't have contents.">
<style> <style>
div { div {
display: inline-flex; display: inline-flex;
border: 5px solid green; border: 5px solid green;
contain: size; contain: size;
color: transparent; color: transparent;
font-size: 2em;
} }
</style> </style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p> <p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
before<div>flex</div>after before<div>flex</div>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/contain-size-grid-001.html
View file @ 5b55328c
...@@ -4,15 +4,16 @@ ...@@ -4,15 +4,16 @@
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-grid-001-ref.html"> <link rel="match" href="reference/contain-size-grid-001-ref.html">
<meta name=assert content="Size containment does apply to grid containers, thus their size and baseline is the same than if they don't have contents."> <meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents.">
<style> <style>
div { div {
display: inline-grid; display: inline-grid;
border: 5px solid green; border: 5px solid green;
contain: size; contain: size;
color: transparent; color: transparent;
font-size: 2em;
} }
</style> </style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p> <p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
before<div>grid</div>after before<div>grid</div>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/reference/contain-layout-button-001-ref.html 0 → 100644
View file @ 5b55328c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
button {
border: 5px solid green;
padding: 0;
color: transparent;
width: 0;
height: 0px;
/* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
position: relative;
z-index: 1;
}
</style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
before<button></button>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/reference/contain-layout-flexbox-001-ref.html 0 → 100644
View file @ 5b55328c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
div {
display: inline-flex;
border: 5px solid green;
/* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
position: relative;
z-index: 1;
}
</style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
before<div></div>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/reference/contain-layout-grid-001-ref.html 0 → 100644
View file @ 5b55328c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
div {
display: inline-grid;
border: 5px solid green;
/* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */
position: relative;
z-index: 1;
}
</style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>
before<div></div>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/reference/contain-size-button-001-ref.html
View file @ 5b55328c
...@@ -6,8 +6,12 @@ ...@@ -6,8 +6,12 @@
button { button {
border: 5px solid green; border: 5px solid green;
padding: 0; padding: 0;
color: transparent;
width: 0;
height: 0;
font-size: 2em;
} }
</style> </style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p> <p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
before<button></button>after before<button>b</button>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/reference/contain-size-flexbox-001-ref.html
View file @ 5b55328c
...@@ -6,8 +6,12 @@ ...@@ -6,8 +6,12 @@
div { div {
display: inline-flex; display: inline-flex;
border: 5px solid green; border: 5px solid green;
color: transparent;
width: 0;
height: 0;
font-size: 2em;
} }
</style> </style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p> <p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
before<div></div>after before<div>f</div>after
third_party/WebKit/LayoutTests/external/wpt/css/css-contain/reference/contain-size-grid-001-ref.html
View file @ 5b55328c
...@@ -6,8 +6,12 @@ ...@@ -6,8 +6,12 @@
div { div {
display: inline-grid; display: inline-grid;
border: 5px solid green; border: 5px solid green;
color: transparent;
width: 0;
height: 0;
font-size: 2em;
} }
</style> </style>
<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square, and then the word "after".</p> <p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>
before<div></div>after before<div>g</div>after
third_party/blink/renderer/core/layout/layout_flexible_box.cc
View file @ 5b55328c
...@@ -179,7 +179,7 @@ LayoutUnit LayoutFlexibleBox::BaselinePosition(FontBaseline, ...@@ -179,7 +179,7 @@ LayoutUnit LayoutFlexibleBox::BaselinePosition(FontBaseline,
LayoutUnit LayoutFlexibleBox::FirstLineBoxBaseline() const { LayoutUnit LayoutFlexibleBox::FirstLineBoxBaseline() const {
if (IsWritingModeRoot() || number_of_in_flow_children_on_first_line_ <= 0 || if (IsWritingModeRoot() || number_of_in_flow_children_on_first_line_ <= 0 ||
ShouldApplySizeContainment()) ShouldApplyLayoutContainment())
return LayoutUnit(-1); return LayoutUnit(-1);
LayoutBox* baseline_child = nullptr; LayoutBox* baseline_child = nullptr;
int child_number = 0; int child_number = 0;
......
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ 5b55328c
...@@ -1633,7 +1633,7 @@ LayoutUnit LayoutGrid::BaselinePosition(FontBaseline, ...@@ -1633,7 +1633,7 @@ LayoutUnit LayoutGrid::BaselinePosition(FontBaseline,
LayoutUnit LayoutGrid::FirstLineBoxBaseline() const { LayoutUnit LayoutGrid::FirstLineBoxBaseline() const {
if (IsWritingModeRoot() || !grid_->HasGridItems() || if (IsWritingModeRoot() || !grid_->HasGridItems() ||
ShouldApplySizeContainment()) ShouldApplyLayoutContainment())
return LayoutUnit(-1); return LayoutUnit(-1);
const LayoutBox* baseline_child = nullptr; const LayoutBox* baseline_child = nullptr;
const LayoutBox* first_child = nullptr; const LayoutBox* first_child = nullptr;
......
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