Skip to content

GitLab

T
tangled
Commit 2677c38d authored by Christian Biesinger's avatar Christian Biesinger Committed by Commit Bot
Browse files
Options

[css-flex] align-content should apply even when there's just a single line 

In Jan 2015 the spec changed in
https://drafts.csswg.org/css-flexbox/#change-201409-align-content-wrapping

Change our code accordingly. This effectively reverts commit
crrev.com/290823003 and relands crrev.com/2191683003

align-content-wrap-004 is a test for bug 641789, which was a regression
from the previous attempt at landing this patch.

Bug: 599828
Change-Id: I8de127c19203854922eb23a626cee4de9a772f22
Reviewed-on: https://chromium-review.googlesource.com/c/1323906
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608449}
parent 68c74195
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 57 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 2677c38d
......@@ -1387,7 +1387,6 @@ crbug.com/824918 virtual/layout_ng_experimental/printing/width-overflow.html [ F
#
### virtual/layout_ng_experimental/css3/flexbox/
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/align-baseline.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/auto-height-column-with-border-and-padding.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/auto-height-dynamic.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/auto-height-with-flex.html [ Skip ]
......@@ -1448,7 +1447,6 @@ crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/flexbox-lines-must-
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/flexbox-overflow-auto.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/flexbox-width-with-overflow-auto.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/flexbox-with-multi-column-property.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/flexbox-wordwrap.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/flexitem.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/float-inside-flexitem.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/floated-flexbox.html [ Skip ]
......@@ -1464,7 +1462,6 @@ crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/max-width-violation
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/min-size-auto.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/minimum-size-image.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline-align-content-horizontal-column.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline-align-content.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline-align-self.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline-column-auto.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/css3/flexbox/multiline-column-overflow.html [ Skip ]
......@@ -1533,6 +1530,10 @@ crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/ali
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-content-003.htm [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-content-004.htm [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-content-005.htm [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-content-wrap-001.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-content-wrap-002.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-content-wrap-003.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-content-wrap-004.html [ Skip ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-items-001.htm [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-items-003.htm [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/align-items-004.htm [ Failure ]
......
third_party/WebKit/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html → third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/align-content-wrap-001.html
View file @ 2677c38d
<!doctype html>
<html>
<head>
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
<title>css-flexbox: Tests align-content with single-line flex-wrap: wrap</title>
<style>
.default {
display: flex;
flex-wrap: wrap;
position: relative;
height: 75px;
height: 70px;
border: 1px solid red;
margin: 5px;
}
.default > div {
height: 20px;
}
.verticalWriting {
display: flex;
flex-wrap: wrap;
position: relative;
width: 75px;
width: 70px;
border: 1px solid red;
margin: 5px;
writing-mode: vertical-lr;
}
.verticalWriting > div {
width: 20px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.default, .verticalWriting'); ">
<div id=log></div>
<p>Test for BUG=324178: Chrome incorrectly honors "align-content" in "flex-wrap: wrap" flex containers that only have a single line</p>
<p>Test that we honor align-content even in single-line flex containers</p>
<div class="default" style="align-content: flex-start">
<div data-offset-y="0">This text should be at the top of its container</div>
</div>
<div class="default" style="align-content: flex-end">
<div data-offset-y="0">This text should be at the top of its container</div>
<div data-offset-y="50">This text should be at the bottom of its container</div>
</div>
<div class="default" style="align-content: center">
<div data-offset-y="0">This text should be at the top of its container</div>
<div data-offset-y="25">This text should be centered in its container</div>
</div>
<div class="default" style="align-content: space-between">
<div data-offset-y="0">This text should be at the top of its container</div>
</div>
<div class="default" style="align-content: space-around">
<div data-offset-y="0">This text should be at the top of its container</div>
<div data-offset-y="25">This text should be centered in its container</div>
</div>
<div class="default" style="align-content: space-evenly">
<div data-offset-y="0">This text should be at the top of its container</div>
<div data-offset-y="25">This text should be centered in its container</div>
</div>
<div class="default" style="align-content: stretch">
<div data-offset-y="0">This text should be at the top of its container</div>
......@@ -53,19 +61,17 @@
<div data-offset-x="0">This text should be at the left of its container</div>
</div>
<div class="verticalWriting" style="align-content: flex-end">
<div data-offset-x="0">This text should be at the left of its container</div>
<div data-offset-x="50">This text should be at the right of its container</div>
</div>
<div class="verticalWriting" style="align-content: center">
<div data-offset-x="0">This text should be at the left of its container</div>
<div data-offset-x="25">This text should be centered in its container</div>
</div>
<div class="verticalWriting" style="align-content: space-between">
<div data-offset-x="0">This text should be at the left of its container</div>
</div>
<div class="verticalWriting" style="align-content: space-around">
<div data-offset-x="0">This text should be at the left of its container</div>
<div data-offset-x="25">This text should be centered in its container</div>
</div>
<div class="verticalWriting" style="align-content: stretch">
<div data-offset-x="0">This text should be at the left of its container</div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/css3/flexbox/flexbox-wordwrap.html → third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/align-content-wrap-002.html
View file @ 2677c38d
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
<style>
.flex-horizontal {
width:600px;
......@@ -64,7 +61,9 @@
background:red;
}
</style>
</head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flex-horizontal, .flex-vertical');">
<div id=log></div>
<p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p>
......@@ -75,9 +74,9 @@
</div>
<div class="flex-horizontal" style="flex-wrap:wrap;">
<div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div>
<div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div>
<div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div>
<div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
<div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
<div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
</div>
<div class="flex-horizontal" style="flex-wrap:wrap;">
......@@ -95,9 +94,9 @@
</div>
<div class="flex-vertical" style="flex-wrap:wrap;">
<div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div>
<div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div>
<div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div>
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
<div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
</div>
<div class="flex-vertical" style="flex-wrap:wrap;">
......@@ -107,5 +106,3 @@
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content.html → third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/align-content-wrap-003.html
View file @ 2677c38d
<!DOCTYPE html>
<html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
<style>
.flexbox {
display: flex;
......@@ -64,9 +65,9 @@
background-color: yellow;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
<p>Test to make sure that align-content works properly.</p>
......@@ -187,13 +188,13 @@
<!-- 1 line should not crash. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
<div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div>
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
<div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
<div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
......@@ -316,16 +317,14 @@
<!-- 1 line should not crash. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
<div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div>
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/align-content-wrap-004.html 0 → 100644
View file @ 2677c38d
<!DOCTYPE html>
<link rel="author" title="Google LLC" href="http://www.google.com" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<style>
.flex {
display: flex;
flex-wrap: wrap;
align-content: center;
flex-direction: column;
align-items: flex-start;
width: 100px;
line-height: 1;
}
.flex > div {
min-height: 0;
background: green;
}
.flex * {
vertical-align: top;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div style="align-self: stretch;">
<div style="display: inline-block; width: 20px; height: 40px;"></div>
</div>
<div style="height: 60px;">
<div style="display: inline-block; height: 15px; width: 20px;"></div>
<div style="display: inline-block; height: 15px; width: 100px;"></div>
<div style="display: inline-block; height: 15px; width: 100px;"></div>
<div style="display: inline-block; height: 15px; width: 100px;"></div>
</div>
</div>
third_party/blink/renderer/core/layout/layout_box.cc
View file @ 2677c38d
......@@ -767,9 +767,10 @@ LayoutUnit LayoutBox::LogicalHeightWithVisibleOverflow() const {
return overflow.MaxX();
}
LayoutUnit LayoutBox::ConstrainLogicalWidthByMinMax(LayoutUnit logical_width,
LayoutUnit available_width,
LayoutBlock* cb) const {
LayoutUnit LayoutBox::ConstrainLogicalWidthByMinMax(
LayoutUnit logical_width,
LayoutUnit available_width,
const LayoutBlock* cb) const {
const ComputedStyle& style_to_use = StyleRef();
if (!style_to_use.LogicalMaxWidth().IsMaxSizeNone())
logical_width = std::min(
......
third_party/blink/renderer/core/layout/layout_box.h
View file @ 2677c38d
......@@ -288,7 +288,7 @@ class CORE_EXPORT LayoutBox : public LayoutBoxModelObject {
LayoutUnit ConstrainLogicalWidthByMinMax(LayoutUnit,
LayoutUnit,
LayoutBlock*) const;
const LayoutBlock*) const;
LayoutUnit ConstrainLogicalHeightByMinMax(
LayoutUnit logical_height,
LayoutUnit intrinsic_content_height) const;
......
third_party/blink/renderer/core/layout/layout_flexible_box.cc
View file @ 2677c38d
......@@ -1504,6 +1504,9 @@ void LayoutFlexibleBox::LayoutColumnReverse(FlexItemVectorView& children,
}
void LayoutFlexibleBox::AlignFlexLines(Vector<FlexLine>& line_contexts) {
if (line_contexts.IsEmpty())
return;
const StyleContentAlignmentData align_content =
FlexLayoutAlgorithm::ResolvedAlignContent(StyleRef());
......@@ -1511,7 +1514,7 @@ void LayoutFlexibleBox::AlignFlexLines(Vector<FlexLine>& line_contexts) {
// flex line, the line height is all the available space. For
// flex-direction: row, this means we need to use the height, so we do this
// after calling updateLogicalHeight.
if (line_contexts.size() == 1) {
if (!IsMultiline()) {
line_contexts[0].cross_axis_extent = CrossAxisContentExtent();
return;
}
......@@ -1523,11 +1526,8 @@ void LayoutFlexibleBox::AlignFlexLines(Vector<FlexLine>& line_contexts) {
for (const FlexLine& line : line_contexts)
available_cross_axis_space -= line.cross_axis_extent;
LayoutUnit line_offset;
if (line_contexts.size() > 1) {
line_offset = FlexLayoutAlgorithm::InitialContentPositionOffset(
available_cross_axis_space, align_content, line_contexts.size());
}
LayoutUnit line_offset = FlexLayoutAlgorithm::InitialContentPositionOffset(
available_cross_axis_space, align_content, line_contexts.size());
for (unsigned line_number = 0; line_number < line_contexts.size();
++line_number) {
FlexLine& line_context = line_contexts[line_number];
......
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