Skip to content

GitLab

T
tangled
Commit 00eff3ca authored by harpreet.sk@samsung.com's avatar harpreet.sk@samsung.com
Browse files
Options

Flex box word-wrap is not adhering to spec 

The items that are set to flex-wrap and have a single flex line currently
has their cross size adjusted according to the max of the items cross size.
According to the specification section 9.4 number 8 point, it states that:

If the flex container has only one flex line (_even if it’s a multi-line
flex container_) and has a definite cross size the cross size of the flex line
is the flex container’s inner cross size.

link: http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#cross-sizing

This patch fixes this bug by removing the condtion that checks if it's
a multiline container or not and based on that set flex line cross size.

Bug=362848

Review URL: https://codereview.chromium.org/324073003

git-svn-id: svn://svn.chromium.org/blink/trunk@176000 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 314550c5
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 6 deletions
third_party/WebKit/LayoutTests/css3/flexbox/flexbox-wordwrap-expected.txt 0 → 100644
View file @ 00eff3ca
Test for crbug.com/362848: Flex box word-wrap is not adhering to spec
PASS
PASS
PASS
PASS
PASS
PASS
third_party/WebKit/LayoutTests/css3/flexbox/flexbox-wordwrap.html 0 → 100644
View file @ 00eff3ca
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/check-layout.js"></script>
<style>
.flex-horizontal {
width:600px;
display:flex;
height:100px;
background:gray;
margin-bottom:100px;
}
.flex-vertical {
width:100px;
display:flex;
flex-direction: column;
height:600px;
background:gray;
margin-top:200px;
margin-bottom:100px;
}
.item-horizontal {
width:150px;
background:yellow;
margin:10px;
flex:none;
}
.item-vertical {
height:150px;
background:yellow;
margin:10px;
flex:none;
}
.content1-horizontal {
width:100px;
height:150px;
background:red;
}
.content2-horizontal {
width:100px;
height:100px;
background:red;
}
.content3-horizontal {
width:100px;
height:50px;
background:red;
}
.content1-vertical {
width:150px;
height:100px;
background:red;
}
.content2-vertical {
width:100px;
height:100px;
background:red;
}
.content3-vertical {
width:50px;
height:100px;
background:red;
}
</style>
</head>
<body onload="checkLayout('.flex-horizontal'); checkLayout('.flex-vertical');">
<p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p>
<div class="flex-horizontal">
<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>
<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>
<div class="flex-horizontal" style="flex-wrap:wrap;">
<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 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>
<div class="flex-vertical">
<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>
<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>
<div class="flex-vertical" style="flex-wrap:wrap;">
<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 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>
\ No newline at end of file
third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content.html
View file @ 00eff3ca
...@@ -167,10 +167,10 @@ ...@@ -167,10 +167,10 @@
<!-- 1 line should not crash. --> <!-- 1 line should not crash. -->
<div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-content: space-between; height: 30px"> <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-content: space-between; height: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div> <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
</div> </div>
<div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-content: space-around; height: 30px"> <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-content: space-around; height: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div> <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
</div> </div>
<div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-content: stretch; height: 30px"> <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-content: stretch; 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="30"></div>
...@@ -276,10 +276,10 @@ ...@@ -276,10 +276,10 @@
<!-- 1 line should not crash. --> <!-- 1 line should not crash. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-content: space-between; width: 30px"> <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-content: space-between; width: 30px">
<div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div> <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
</div> </div>
<div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-content: space-around; width: 30px"> <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-content: space-around; width: 30px">
<div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div> <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
</div> </div>
<div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-content: stretch; width: 30px"> <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-content: stretch; width: 30px">
<div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
......
third_party/WebKit/Source/core/rendering/RenderFlexibleBox.cpp
View file @ 00eff3ca
...@@ -314,9 +314,10 @@ void RenderFlexibleBox::repositionLogicalHeightDependentFlexItems(Vector<LineCon ...@@ -314,9 +314,10 @@ void RenderFlexibleBox::repositionLogicalHeightDependentFlexItems(Vector<LineCon
LayoutUnit crossAxisStartEdge = lineContexts.isEmpty() ? LayoutUnit() : lineContexts[0].crossAxisOffset; LayoutUnit crossAxisStartEdge = lineContexts.isEmpty() ? LayoutUnit() : lineContexts[0].crossAxisOffset;
alignFlexLines(lineContexts); alignFlexLines(lineContexts);
// If we have a single line flexbox, the line height is all the available space. // If we have a single line flexbox or a multiline line flexbox with only one 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. // For flex-direction: row, this means we need to use the height, so we do this after calling updateLogicalHeight.
if (!isMultiline() && lineContexts.size() == 1) if (lineContexts.size() == 1)
lineContexts[0].crossAxisExtent = crossAxisContentExtent(); lineContexts[0].crossAxisExtent = crossAxisContentExtent();
alignChildren(lineContexts); alignChildren(lineContexts);
......
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