Title: [144104] trunk
- Revision
- 144104
- Author
- t...@chromium.org
- Date
- 2013-02-26 13:58:36 -0800 (Tue, 26 Feb 2013)
Log Message
CSS Flexbox: dynamically applied align-items doesn't affect item alignment
https://bugs.webkit.org/show_bug.cgi?id=110341
Reviewed by Ojan Vafai.
Source/WebCore:
If flex items don't change width, we don't lay them out again. This causes problems
when an item goes from stretch to non-stretch since we need to relayout to get the
smaller height. Fix this by marking flex items that were stretch as needing layout.
Test: css3/flexbox/relayout-align-items.html
* rendering/RenderFlexibleBox.cpp:
(WebCore::resolveAlignment): Pull out common code for computing flex item style.
(WebCore::RenderFlexibleBox::styleDidChange): Mark children as needing layout.
(WebCore::RenderFlexibleBox::alignmentForChild): Use resolveAlignment.
* rendering/RenderFlexibleBox.h:
LayoutTests:
Also fix a typo causing align-self-* classes from not applying. There
was only one test that tried to use the align-self classes and it was
testing all values behaved the same.
* css3/flexbox/relayout-align-items-expected.txt: Added.
* css3/flexbox/relayout-align-items.html: Added.
* css3/flexbox/resources/flexbox.css:
(.align-self-auto):
(.align-self-flex-start):
(.align-self-flex-end):
(.align-self-center):
(.align-self-baseline):
(.align-self-stretch):
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (144103 => 144104)
--- trunk/LayoutTests/ChangeLog 2013-02-26 21:54:50 UTC (rev 144103)
+++ trunk/LayoutTests/ChangeLog 2013-02-26 21:58:36 UTC (rev 144104)
@@ -1,3 +1,24 @@
+2013-02-26 Tony Chang <t...@chromium.org>
+
+ CSS Flexbox: dynamically applied align-items doesn't affect item alignment
+ https://bugs.webkit.org/show_bug.cgi?id=110341
+
+ Reviewed by Ojan Vafai.
+
+ Also fix a typo causing align-self-* classes from not applying. There
+ was only one test that tried to use the align-self classes and it was
+ testing all values behaved the same.
+
+ * css3/flexbox/relayout-align-items-expected.txt: Added.
+ * css3/flexbox/relayout-align-items.html: Added.
+ * css3/flexbox/resources/flexbox.css:
+ (.align-self-auto):
+ (.align-self-flex-start):
+ (.align-self-flex-end):
+ (.align-self-center):
+ (.align-self-baseline):
+ (.align-self-stretch):
+
2013-02-26 Christian Biesinger <cbiesin...@chromium.org>
Empty <button>s should collapse; empty <input type="button"> should not collapse
Added: trunk/LayoutTests/css3/flexbox/relayout-align-items-expected.txt (0 => 144104)
--- trunk/LayoutTests/css3/flexbox/relayout-align-items-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/relayout-align-items-expected.txt 2013-02-26 21:58:36 UTC (rev 144104)
@@ -0,0 +1,2 @@
+PASS
+PASS
Added: trunk/LayoutTests/css3/flexbox/relayout-align-items.html (0 => 144104)
--- trunk/LayoutTests/css3/flexbox/relayout-align-items.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/relayout-align-items.html 2013-02-26 21:58:36 UTC (rev 144104)
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href=""
+<style>
+.flexbox {
+ height: 100px;
+ position: relative;
+}
+.flexbox > div {
+ border: 5px solid green;
+ width: 50px;
+}
+</style>
+<script src=""
+</head>
+<body>
+<div id="from-stretch" class="flexbox">
+ <div data-expected-height="10" data-offset-y="90"></div>
+ <div data-expected-height="10" data-offset-y="90" class="align-self-auto"></div>
+ <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
+ <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
+ <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
+ <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
+ <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
+</div>
+
+<div id="to-stretch" class="flexbox align-items-flex-start">
+ <div data-expected-height="100" data-offset-y="0"></div>
+ <div data-expected-height="100" data-offset-y="0" class="align-self-auto"></div>
+ <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
+ <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
+ <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
+ <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
+ <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
+</div>
+<script>
+document.body.offsetLeft;
+document.getElementById("from-stretch").style.webkitAlignItems = "flex-end";
+document.getElementById("to-stretch").style.webkitAlignItems = "stretch";
+checkLayout(".flexbox");
+</script>
+</body>
+</html>
Modified: trunk/LayoutTests/css3/flexbox/resources/flexbox.css (144103 => 144104)
--- trunk/LayoutTests/css3/flexbox/resources/flexbox.css 2013-02-26 21:54:50 UTC (rev 144103)
+++ trunk/LayoutTests/css3/flexbox/resources/flexbox.css 2013-02-26 21:58:36 UTC (rev 144104)
@@ -93,28 +93,28 @@
}
.align-self-auto {
- -webkit-align-items: auto;
- -moz-align-items: auto;
+ -webkit-align-self: auto;
+ -moz-align-self: auto;
}
.align-self-flex-start {
- -webkit-align-items: flex-start;
- -moz-align-items: flex-start;
+ -webkit-align-self: flex-start;
+ -moz-align-self: flex-start;
}
.align-self-flex-end {
- -webkit-align-items: flex-end;
- -moz-align-items: flex-end;
+ -webkit-align-self: flex-end;
+ -moz-align-self: flex-end;
}
.align-self-center {
- -webkit-align-items: center;
- -moz-align-items: center;
+ -webkit-align-self: center;
+ -moz-align-self: center;
}
.align-self-baseline {
- -webkit-align-items: baseline;
- -moz-align-items: baseline;
+ -webkit-align-self: baseline;
+ -moz-align-self: baseline;
}
.align-self-stretch {
- -webkit-align-items: stretch;
- -moz-align-items: stretch;
+ -webkit-align-self: stretch;
+ -moz-align-self: stretch;
}
.justify-content-flex-start {
Modified: trunk/Source/WebCore/ChangeLog (144103 => 144104)
--- trunk/Source/WebCore/ChangeLog 2013-02-26 21:54:50 UTC (rev 144103)
+++ trunk/Source/WebCore/ChangeLog 2013-02-26 21:58:36 UTC (rev 144104)
@@ -1,3 +1,22 @@
+2013-02-26 Tony Chang <t...@chromium.org>
+
+ CSS Flexbox: dynamically applied align-items doesn't affect item alignment
+ https://bugs.webkit.org/show_bug.cgi?id=110341
+
+ Reviewed by Ojan Vafai.
+
+ If flex items don't change width, we don't lay them out again. This causes problems
+ when an item goes from stretch to non-stretch since we need to relayout to get the
+ smaller height. Fix this by marking flex items that were stretch as needing layout.
+
+ Test: css3/flexbox/relayout-align-items.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::resolveAlignment): Pull out common code for computing flex item style.
+ (WebCore::RenderFlexibleBox::styleDidChange): Mark children as needing layout.
+ (WebCore::RenderFlexibleBox::alignmentForChild): Use resolveAlignment.
+ * rendering/RenderFlexibleBox.h:
+
2013-02-26 Anders Carlsson <ander...@apple.com>
StorageMap can just import an entire map of items at once
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (144103 => 144104)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2013-02-26 21:54:50 UTC (rev 144103)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2013-02-26 21:58:36 UTC (rev 144104)
@@ -295,6 +295,29 @@
return synthesizedBaselineFromContentBox(this, direction) + marginAscent;
}
+static EAlignItems resolveAlignment(const RenderStyle* parentStyle, const RenderStyle* childStyle)
+{
+ EAlignItems align = childStyle->alignSelf();
+ if (align == AlignAuto)
+ align = parentStyle->alignItems();
+ return align;
+}
+
+void RenderFlexibleBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
+{
+ RenderBlock::styleDidChange(diff, oldStyle);
+
+ if (oldStyle && oldStyle->alignItems() == AlignStretch && diff == StyleDifferenceLayout) {
+ // Flex items that were previously stretching need to be relayed out so we can compute new available cross axis space.
+ // This is only necessary for stretching since other alignment values don't change the size of the box.
+ for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+ EAlignItems previousAlignment = resolveAlignment(oldStyle, child->style());
+ if (previousAlignment == AlignStretch && previousAlignment != resolveAlignment(style(), child->style()))
+ child->setChildNeedsLayout(true, MarkOnlyThis);
+ }
+ }
+}
+
void RenderFlexibleBox::layoutBlock(bool relayoutChildren, LayoutUnit)
{
ASSERT(needsLayout());
@@ -1059,9 +1082,7 @@
EAlignItems RenderFlexibleBox::alignmentForChild(RenderBox* child) const
{
- EAlignItems align = child->style()->alignSelf();
- if (align == AlignAuto)
- align = style()->alignItems();
+ EAlignItems align = resolveAlignment(style(), child->style());
if (align == AlignBaseline && hasOrthogonalFlow(child))
align = AlignFlexStart;
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (144103 => 144104)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2013-02-26 21:54:50 UTC (rev 144103)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2013-02-26 21:58:36 UTC (rev 144104)
@@ -61,6 +61,8 @@
virtual void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const OVERRIDE;
virtual void computePreferredLogicalWidths() OVERRIDE;
+ virtual void styleDidChange(StyleDifference, const RenderStyle* oldStyle);
+
private:
enum FlexSign {
PositiveFlexibility,
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
