Skip to content

GitLab

T
tangled
Commit 4596b31f authored by Stefan Zager's avatar Stefan Zager Committed by Commit Bot
Browse files
Options

Correctly identify overflow direction inside flexbox. 

BUG=961286
R=cbiesinger@chromium.org

Change-Id: I6c827744b69a5f2d36c0cc219fe8e490fe851f55
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1618017
Commit-Queue: Stefan Zager <szager@chromium.org>
Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661195}
parent c3a06d59
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 6 deletions
third_party/blink/renderer/core/layout/layout_flexible_box.cc
View file @ 4596b31f
......@@ -244,17 +244,15 @@ bool LayoutFlexibleBox::HasTopOverflow() const {
EFlexDirection flex_direction = StyleRef().FlexDirection();
if (IsHorizontalWritingMode())
return flex_direction == EFlexDirection::kColumnReverse;
return flex_direction == (StyleRef().IsLeftToRightDirection()
? EFlexDirection::kRowReverse
: EFlexDirection::kRow);
return !StyleRef().IsLeftToRightDirection() ^
(flex_direction == EFlexDirection::kRowReverse);
}
bool LayoutFlexibleBox::HasLeftOverflow() const {
EFlexDirection flex_direction = StyleRef().FlexDirection();
if (IsHorizontalWritingMode()) {
return flex_direction == (StyleRef().IsLeftToRightDirection()
? EFlexDirection::kRowReverse
: EFlexDirection::kRow);
return !StyleRef().IsLeftToRightDirection() ^
(flex_direction == EFlexDirection::kRowReverse);
}
return flex_direction == EFlexDirection::kColumnReverse;
}
......
third_party/blink/web_tests/TestExpectations
View file @ 4596b31f
......@@ -1474,6 +1474,7 @@ crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/fle
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/layout-algorithm_algo-cross-line-002.html [ Failure ]
crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/negative-margins-001.html [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/order_value.html [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/overflow-top-left.html [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/percentage-heights-000.html [ Failure ]
crbug.com/591099 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/percentage-heights-002.html [ Failure ]
crbug.com/467127 virtual/layout_ng_experimental/external/wpt/css/css-flexbox/percentage-heights-003.html [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-flexbox/overflow-top-left-ref.html 0 → 100644
View file @ 4596b31f
<!DOCTYPE html>
<style>
.row-wrapper, .column-wrapper {
margin: 4px 0;
overflow: auto;
direction: rtl;
border: 2px solid black;
}
.column-wrapper {
width: 300px;
}
.row-wrapper {
height: 300px;
writing-mode: vertical-rl;
}
.column-wrapper > div {
margin: 4px;
height: 30px;
background: #CCC;
}
.column-wrapper > .h-overflow {
margin-top: 8px; // Compensate for margin collapsing.
}
.h-overflow {
width: 500px;
}
.row-wrapper > div {
margin: 4px;
width: 30px;
background: #CCC;
}
.v-overflow {
height: 500px;
}
.row-wrapper > .v-overflow {
margin-right: 8px; // Compensate for margin collapsing.
}
</style>
<div class=column-wrapper>
<div>one</div>
<div class=h-overflow>two</div>
</div>
<div class=row-wrapper>
<div>one</div>
<div class=v-overflow>two</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-flexbox/overflow-top-left.html 0 → 100644
View file @ 4596b31f
<!DOCTYPE html>
<head>
<title>cross-axis top and left overflow</title>
<link rel="author" title="Google, Inc." href="http://www.google.com/">
<link rel="match" href="overflow-top-left-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing">
</head>
<style>
.row-wrapper, .column-wrapper {
margin: 4px 0;
overflow: auto;
display: flex;
direction: rtl;
border: 2px solid black;
}
.column-wrapper {
width: 300px;
display: flex;
flex-direction: column;
}
.row-wrapper {
height: 300px;
flex-direction: column;
writing-mode: vertical-rl;
}
.column-wrapper > div {
margin: 4px;
height: 30px;
background: #CCC;
}
.h-overflow {
width: 500px;
}
.row-wrapper > div {
margin: 4px;
width: 30px;
background: #CCC;
}
.v-overflow {
height: 500px;
}
</style>
<div class=column-wrapper>
<div>one</div>
<div class=h-overflow>two</div>
</div>
<div class=row-wrapper>
<div>one</div>
<div class=v-overflow>two</div>
</div>
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