Log Message
inline-flex baseline is sometimes wrong https://bugs.webkit.org/show_bug.cgi?id=96188
Reviewed by Ojan Vafai. Source/WebCore: Implement the necessary methods to get the proper baseline alignment of flexbox. We were falling back to the inline-block behavior. Test: css3/flexbox/flexbox-baseline.html * rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::RenderFlexibleBox): (WebCore::RenderFlexibleBox::baselinePosition): Used to get the baseline of the box. Mostly just the first line box baseline. (WebCore): (WebCore::RenderFlexibleBox::lastLineBoxBaseline): This is used for getting the baseline when in an inline-block. We actually don't want the last line, but the flexbox's baseline. (WebCore::RenderFlexibleBox::firstLineBoxBaseline): Compute the baseline according to the rules in the spec. (WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems): Keep track of the number of children on the first line so we don't have to re-compute this when getting the baseline. (WebCore::RenderFlexibleBox::crossAxisExtentForChild): Make const. (WebCore::RenderFlexibleBox::mainAxisExtentForChild): Make const. (WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis): Make const. * rendering/RenderFlexibleBox.h: Add a size_t to keep track of how many children are in the first line. LayoutTests: Add a new pixel test and mark the test as failing so we can get pixel results from the bots. * css3/flexbox/flexbox-baseline.html: Added. * platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.png: Added. * platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.txt: Added. * platform/chromium/TestExpectations: * platform/efl/TestExpectations: * platform/gtk/TestExpectations: * platform/mac/TestExpectations: * platform/qt/TestExpectations: * platform/win/TestExpectations:
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/platform/chromium/TestExpectations
- trunk/LayoutTests/platform/efl/TestExpectations
- trunk/LayoutTests/platform/gtk/TestExpectations
- trunk/LayoutTests/platform/mac/TestExpectations
- trunk/LayoutTests/platform/qt/TestExpectations
- trunk/LayoutTests/platform/win/TestExpectations
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp
- trunk/Source/WebCore/rendering/RenderFlexibleBox.h
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (130404 => 130405)
--- trunk/LayoutTests/ChangeLog 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/LayoutTests/ChangeLog 2012-10-04 16:47:50 UTC (rev 130405)
@@ -1,3 +1,22 @@
+2012-10-04 Tony Chang <t...@chromium.org>
+
+ inline-flex baseline is sometimes wrong
+ https://bugs.webkit.org/show_bug.cgi?id=96188
+
+ Reviewed by Ojan Vafai.
+
+ Add a new pixel test and mark the test as failing so we can get pixel results from the bots.
+
+ * css3/flexbox/flexbox-baseline.html: Added.
+ * platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.png: Added.
+ * platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.txt: Added.
+ * platform/chromium/TestExpectations:
+ * platform/efl/TestExpectations:
+ * platform/gtk/TestExpectations:
+ * platform/mac/TestExpectations:
+ * platform/qt/TestExpectations:
+ * platform/win/TestExpectations:
+
2012-10-04 Raphael Kubo da Costa <raphael.kubo.da.co...@intel.com>
[EFL] Temporarily skip fast/xsl/xslt-missing-namespace-in-xslt.html.
Added: trunk/LayoutTests/css3/flexbox/flexbox-baseline.html (0 => 130405)
--- trunk/LayoutTests/css3/flexbox/flexbox-baseline.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flexbox-baseline.html 2012-10-04 16:47:50 UTC (rev 130405)
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+ margin: 0;
+}
+.inline-flexbox {
+ display: -webkit-inline-flex;
+ background-color: lightgrey;
+ margin-top: 5px;
+}
+.flexbox {
+ display: -webkit-flex;
+ background-color: grey;
+ margin-top: 10px;
+}
+.column {
+ -webkit-flex-flow: column;
+}
+.column-reverse {
+ -webkit-flex-flow: column-reverse;
+}
+</style>
+
+<body style="position: relative">
+
+<!-- If any of the flex items on the flex container's first line participate
+in baseline alignment, the flex container's main-axis baseline is the baseline
+of those flex items. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 50px;">
+ <div style="-webkit-align-self: flex-end">below</div>
+ <div style="-webkit-align-self: baseline; margin-top: 15px">baseline</div>
+ <div style="-webkit-align-self: flex-start">above</div>
+</div>
+after text
+</div>
+
+<!-- This flexbox has a baseline flexitem, but it's orthogonal so it doesn't
+participate in baseline alignment. Instead, the baseline is the first flex
+item's baseline. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 40px">
+ <div style="-webkit-align-self: flex-end">baseline</div>
+ <div style="-webkit-align-self: baseline; -webkit-writing-mode: vertical-rl"></div>
+ <div style="-webkit-align-self: flex-start">above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+ <h2>h2 baseline</h2>
+ <div>above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+ <div>baseline</div>
+ <h2>h2 below</h2>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox" style="width: 40px; height: 40px">
+ <div style="-webkit-writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+</div>
+of the grey flexbox
+</div>
+
+<!-- If there are no flexitems, align to the bottom of the box. -->
+<div>
+should align with the bottom
+<div class="inline-flexbox" style="width: 30px; height: 30px">
+</div>
+of the grey flexbox
+</div>
+
+
+<!-- cross-axis (column) test cases. -->
+<div>
+before text
+<div class="inline-flexbox column">
+ <div>baseline</div>
+ <div>below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox column-reverse">
+ <div>baseline</div>
+ <div>above</div>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox column" style="width: 40px; height: 40px;">
+ <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
+ <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px"></div>
+</div>
+of the grey flexbox
+</div>
+
+<!-- If there are no flexitems, align to the bottom of the box. -->
+<div>
+should align with the bottom
+<div class="inline-flexbox column" style="width: 30px; height: 30px">
+</div>
+of the grey flexbox
+</div>
+
+<!-- More tests on the right side of the page. -->
+<div style="position: absolute; top: 0; left: 400px; width: 360px">
+
+<!-- Ignore absolutely positioned flex items. -->
+<div>
+before text
+<div class="inline-flexbox">
+ <div style="position: absolute">absolute</div>
+ <div style="margin-top: 30px">baseline</div>
+</div>
+after text
+</div>
+
+<!-- We don't participate in baseline alignment if there's an auto margin. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 40px;">
+ <div>baseline</div>
+ <div style="-webkit-align-self: baseline; margin-top: auto">below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div style="display: inline-block">
+<div class="inline-flexbox" style="height: 40px;">
+ <div>above</div>
+ <div style="-webkit-align-self: baseline; margin-top: 10px">baseline</div>
+ <div>above</div>
+</div>
+after
+</div>
+text
+</div>
+
+<!-- The spec is a little unclear what should happen here. For now, match the
+behavior of tables inside inline-blocks. -->
+<div>
+should align with the bottom
+<div style="display: inline-block">
+<div class="flexbox" style="height: 30px;">
+ above
+</div>
+</div>
+of the grey box
+</div>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+ <td style="vertical-align: bottom">bottom</td>
+ <td style="vertical-align: baseline">baseline</td>
+ <td style="vertical-align: top">top</td>
+ <td style="vertical-align: baseline"><div class="flexbox column">
+ <div>baseline</div>
+ <div>below</div>
+ </div></td>
+ <td style="vertical-align: baseline"><div class="flexbox column-reverse">
+ <div>baseline</div>
+ <div>above</div>
+ </div></td>
+</tr>
+</table>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+ <td style="vertical-align: bottom">bottom</td>
+ <td style="vertical-align: baseline">baseline</td>
+ <td style="vertical-align: top">top</td>
+ <td style="vertical-align: baseline"><div class="flexbox">
+ <h2>h2 baseline</h2>
+ <div>above</div>
+ </div></td>
+</table>
+
+<!-- If a box contributing a baseline has a scrollbar, the box must be treated
+as being in its initial scroll position when computing the baseline. -->
+<div>
+before text
+<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px">
+ <div id="flexitem-with-scrollbar" style="-webkit-align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
+ The baseline is based on<br>
+ the non-scrolled position;<br>
+ this won't line up.
+ </div>
+</div>
+after text
+</div>
+
+</div>
+
+<script>
+document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
+document.getElementById("flexbox-with-scrollbar").style.width = "auto";
+</script>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/flexbox/flexbox-baseline.html
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/LayoutTests/platform/chromium/TestExpectations (130404 => 130405)
--- trunk/LayoutTests/platform/chromium/TestExpectations 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/LayoutTests/platform/chromium/TestExpectations 2012-10-04 16:47:50 UTC (rev 130405)
@@ -3721,6 +3721,8 @@
crbug.com/152007 platform/chromium/virtual/softwarecompositing/geometry/vertical-scroll-composited.html [ ImageOnlyFailure ]
crbug.com/152007 platform/chromium/virtual/softwarecompositing/reflections/reflection-in-composited.html [ ImageOnlyFailure ]
+webkit.org/b/98306 [ Win Mac Android ] css3/flexbox/flexbox-baseline.html [ Failure ]
+
# Alpha blending ends up with slightly different green in software compositor.
crbug.com/152007 platform/chromium/virtual/softwarecompositing/repaint/opacity-between-absolute.html [ ImageOnlyFailure ]
crbug.com/152007 platform/chromium/virtual/softwarecompositing/repaint/opacity-between-absolute2.html [ ImageOnlyFailure ]
Added: trunk/LayoutTests/platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.png
(Binary files differ)
Added: svn:mime-type
Added: trunk/LayoutTests/platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.txt (0 => 130405)
--- trunk/LayoutTests/platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.txt 2012-10-04 16:47:50 UTC (rev 130405)
@@ -0,0 +1,228 @@
+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x502
+ RenderBlock {HTML} at (0,0) size 800x502
+layer at (0,0) size 800x502
+ RenderBody {BODY} at (0,0) size 800x502
+ RenderBlock {DIV} at (0,0) size 800x55
+ RenderText {#text} at (0,20) size 69x19
+ text run at (0,20) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 122x50 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,30) size 37x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "below"
+ RenderBlock {DIV} at (37,15) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (85,0) size 37x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderText {#text} at (191,20) size 57x19
+ text run at (191,20) width 57: " after text"
+ RenderBlock {DIV} at (0,55) size 800x45
+ RenderText {#text} at (0,25) size 69x19
+ text run at (0,25) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 85x40 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,20) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (48,0) size 0x0
+ RenderBlock {DIV} at (48,0) size 37x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderText {#text} at (154,25) size 57x19
+ text run at (154,25) width 57: " after text"
+ RenderBlock {DIV} at (0,100) size 800x71
+ RenderText {#text} at (0,30) size 69x19
+ text run at (0,30) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,4) size 151x67 [bgcolor=#D3D3D3]
+ RenderBlock {H2} at (0,19) size 114x28
+ RenderText {#text} at (0,0) size 114x26
+ text run at (0,0) width 114: "h2 baseline"
+ RenderBlock {DIV} at (114,0) size 37x67
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderText {#text} at (220,30) size 57x19
+ text run at (220,30) width 57: " after text"
+ RenderBlock {DIV} at (0,171) size 800x71
+ RenderText {#text} at (0,5) size 69x19
+ text run at (0,5) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 139x67 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,0) size 48x67
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {H2} at (48,19) size 91x28
+ RenderText {#text} at (0,0) size 91x26
+ text run at (0,0) width 91: "h2 below"
+ RenderText {#text} at (208,5) size 57x19
+ text run at (208,5) width 57: " after text"
+ RenderBlock {DIV} at (0,242) size 800x45
+ RenderText {#text} at (0,11) size 169x19
+ text run at (0,11) width 169: "should align with the middle "
+ RenderFlexibleBox {DIV} at (169,5) size 40x40 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,0) size 40x21 [border: none (1px solid #000000) none]
+ RenderText {#text} at (209,11) size 116x19
+ text run at (209,11) width 116: " of the grey flexbox"
+ RenderBlock {DIV} at (0,287) size 800x40
+ RenderText {#text} at (0,20) size 172x19
+ text run at (0,20) width 172: "should align with the bottom "
+ RenderFlexibleBox {DIV} at (172,5) size 30x30 [bgcolor=#D3D3D3]
+ RenderText {#text} at (202,20) size 116x19
+ text run at (202,20) width 116: " of the grey flexbox"
+ RenderBlock {DIV} at (0,327) size 800x45
+ RenderText {#text} at (0,5) size 69x19
+ text run at (0,5) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 48x40 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,0) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (0,20) size 48x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "below"
+ RenderText {#text} at (117,5) size 57x19
+ text run at (117,5) width 57: " after text"
+ RenderBlock {DIV} at (0,372) size 800x45
+ RenderText {#text} at (0,25) size 69x19
+ text run at (0,25) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 48x40 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,20) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (0,0) size 48x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderText {#text} at (117,25) size 57x19
+ text run at (117,25) width 57: " after text"
+ RenderBlock {DIV} at (0,417) size 800x45
+ RenderText {#text} at (0,11) size 169x19
+ text run at (0,11) width 169: "should align with the middle "
+ RenderFlexibleBox {DIV} at (169,5) size 40x40 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,0) size 40x21 [border: none (1px solid #000000) none]
+ RenderBlock {DIV} at (0,21) size 40x20
+ RenderText {#text} at (209,11) size 116x19
+ text run at (209,11) width 116: " of the grey flexbox"
+ RenderBlock {DIV} at (0,462) size 800x40
+ RenderText {#text} at (0,20) size 172x19
+ text run at (0,20) width 172: "should align with the bottom "
+ RenderFlexibleBox {DIV} at (172,5) size 30x30 [bgcolor=#D3D3D3]
+ RenderText {#text} at (202,20) size 116x19
+ text run at (202,20) width 116: " of the grey flexbox"
+layer at (400,0) size 360x428
+ RenderBlock (positioned) {DIV} at (400,0) size 360x428
+ RenderBlock {DIV} at (0,0) size 360x55
+ RenderText {#text} at (0,35) size 69x19
+ text run at (0,35) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 48x50 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,30) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderText {#text} at (117,35) size 57x19
+ text run at (117,35) width 57: " after text"
+ RenderBlock {DIV} at (0,55) size 360x45
+ RenderText {#text} at (0,5) size 69x19
+ text run at (0,5) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 85x40 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,0) size 48x40
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (48,20) size 37x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "below"
+ RenderText {#text} at (154,5) size 57x19
+ text run at (154,5) width 57: " after text"
+ RenderBlock {DIV} at (0,100) size 360x45
+ RenderText {#text} at (0,15) size 69x19
+ text run at (0,15) width 69: "before text "
+ RenderBlock {DIV} at (69,0) size 153x45
+ RenderFlexibleBox {DIV} at (0,5) size 122x40 [bgcolor=#D3D3D3]
+ RenderBlock {DIV} at (0,0) size 37x40
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderBlock {DIV} at (37,10) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (85,0) size 37x40
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderText {#text} at (122,15) size 31x19
+ text run at (122,15) width 31: " after"
+ RenderText {#text} at (222,15) size 26x19
+ text run at (222,15) width 26: " text"
+ RenderBlock {DIV} at (0,145) size 360x45
+ RenderText {#text} at (0,25) size 172x19
+ text run at (0,25) width 172: "should align with the bottom "
+ RenderBlock {DIV} at (172,0) size 37x40
+ RenderFlexibleBox {DIV} at (0,10) size 37x30 [bgcolor=#808080]
+ RenderBlock (anonymous) at (0,0) size 37x30
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderText {#text} at (209,25) size 95x19
+ text run at (209,25) width 95: " of the grey box"
+ RenderTable {TABLE} at (0,195) size 229x76 [bgcolor=#D3D3D3]
+ RenderTableSection {TBODY} at (0,0) size 229x76
+ RenderTableRow {TR} at (0,2) size 229x72
+ RenderTableCell {TD} at (2,52) size 45x22 [r=0 c=0 rs=1 cs=1]
+ RenderText {#text} at (1,1) size 43x19
+ text run at (1,1) width 43: "bottom"
+ RenderTableCell {TD} at (49,32) size 50x22 [r=0 c=1 rs=1 cs=1]
+ RenderText {#text} at (1,1) size 48x19
+ text run at (1,1) width 48: "baseline"
+ RenderTableCell {TD} at (101,2) size 22x22 [r=0 c=2 rs=1 cs=1]
+ RenderText {#text} at (1,1) size 20x19
+ text run at (1,1) width 20: "top"
+ RenderTableCell {TD} at (125,22) size 50x52 [r=0 c=3 rs=1 cs=1]
+ RenderFlexibleBox {DIV} at (1,11) size 48x40 [bgcolor=#808080]
+ RenderBlock {DIV} at (0,0) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (0,20) size 48x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "below"
+ RenderTableCell {TD} at (177,2) size 50x52 [r=0 c=4 rs=1 cs=1]
+ RenderFlexibleBox {DIV} at (1,11) size 48x40 [bgcolor=#808080]
+ RenderBlock {DIV} at (0,20) size 48x20
+ RenderText {#text} at (0,0) size 48x19
+ text run at (0,0) width 48: "baseline"
+ RenderBlock {DIV} at (0,0) size 48x20
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderTable {TABLE} at (0,276) size 280x82 [bgcolor=#D3D3D3]
+ RenderTableSection {TBODY} at (0,0) size 280x82
+ RenderTableRow {TR} at (0,2) size 280x78
+ RenderTableCell {TD} at (2,58) size 45x22 [r=0 c=0 rs=1 cs=1]
+ RenderText {#text} at (1,1) size 43x19
+ text run at (1,1) width 43: "bottom"
+ RenderTableCell {TD} at (49,37) size 50x22 [r=0 c=1 rs=1 cs=1]
+ RenderText {#text} at (1,1) size 48x19
+ text run at (1,1) width 48: "baseline"
+ RenderTableCell {TD} at (101,2) size 22x22 [r=0 c=2 rs=1 cs=1]
+ RenderText {#text} at (1,1) size 20x19
+ text run at (1,1) width 20: "top"
+ RenderTableCell {TD} at (125,2) size 153x79 [r=0 c=3 rs=1 cs=1]
+ RenderFlexibleBox {DIV} at (1,11) size 151x67 [bgcolor=#808080]
+ RenderBlock {H2} at (0,19) size 114x28
+ RenderText {#text} at (0,0) size 114x26
+ text run at (0,0) width 114: "h2 baseline"
+ RenderBlock {DIV} at (114,0) size 37x67
+ RenderText {#text} at (0,0) size 37x19
+ text run at (0,0) width 37: "above"
+ RenderBlock {DIV} at (0,358) size 360x70
+ RenderText {#text} at (0,20) size 69x19
+ text run at (0,20) width 69: "before text "
+ RenderFlexibleBox {DIV} at (69,5) size 167x65 [bgcolor=#D3D3D3]
+ RenderText {#text} at (236,20) size 57x19
+ text run at (236,20) width 57: " after text"
+layer at (469,363) size 167x65 clip at (469,363) size 152x65 scrollY 10 scrollHeight 75
+ RenderBlock {DIV} at (0,0) size 167x65
+ RenderText {#text} at (0,15) size 147x19
+ text run at (0,15) width 147: "The baseline is based on"
+ RenderBR {BR} at (147,15) size 0x19
+ RenderText {#text} at (0,35) size 152x19
+ text run at (0,35) width 152: "the non-scrolled position;"
+ RenderBR {BR} at (152,35) size 0x19
+ RenderText {#text} at (0,55) size 104x19
+ text run at (0,55) width 104: "this won't line up."
+layer at (469,5) size 50x20
+ RenderBlock (positioned) {DIV} at (69,5) size 50x20
+ RenderText {#text} at (0,0) size 50x19
+ text run at (0,0) width 50: "absolute"
Property changes on: trunk/LayoutTests/platform/chromium-linux/css3/flexbox/flexbox-baseline-expected.txt
___________________________________________________________________
Added: svn:eol-style
Modified: trunk/LayoutTests/platform/efl/TestExpectations (130404 => 130405)
--- trunk/LayoutTests/platform/efl/TestExpectations 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/LayoutTests/platform/efl/TestExpectations 2012-10-04 16:47:50 UTC (rev 130405)
@@ -1491,6 +1491,8 @@
# Fails on the bots.
webkit.org/b/97968 media/unsupported-rtsp.html [ Failure ]
+webkit.org/b/98306 css3/flexbox/flexbox-baseline.html [ Failure ]
+
# Needs rebaseline eventually
webkit.org/b/97990 mathml/presentation/attributes.xhtml [ Failure ]
webkit.org/b/97990 mathml/presentation/fractions.xhtml [ Failure ]
Modified: trunk/LayoutTests/platform/gtk/TestExpectations (130404 => 130405)
--- trunk/LayoutTests/platform/gtk/TestExpectations 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/LayoutTests/platform/gtk/TestExpectations 2012-10-04 16:47:50 UTC (rev 130405)
@@ -1363,6 +1363,8 @@
webkit.org/b/91489 fast/dom/shadow/shadowdom-for-fieldset-complex-shadow.html [ ImageOnlyFailure ]
webkit.org/b/91489 fast/dom/shadow/shadowdom-for-fieldset-only-shadow.html [ ImageOnlyFailure ]
+webkit.org/b/98306 css3/flexbox/flexbox-baseline.html [ Failure ]
+
webkit.org/b/49142 fast/regions/style-scoped-in-flow-override-region-styling-multiple-regions.html [ ImageOnlyFailure ]
#////////////////////////////////////////////////////////////////////////////////////////
Modified: trunk/LayoutTests/platform/mac/TestExpectations (130404 => 130405)
--- trunk/LayoutTests/platform/mac/TestExpectations 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2012-10-04 16:47:50 UTC (rev 130405)
@@ -1308,5 +1308,7 @@
webkit.org/b/95501 http/tests/security/inactive-document-with-empty-security-origin.html [ Skip ]
+webkit.org/b/98306 css3/flexbox/flexbox-baseline.html [ Failure ]
+
# Paints black behind the test image instead of the expected green.
webkit.org/b/95707 http/tests/images/png-partial-load-no-alpha.html [ ImageOnlyFailure ]
Modified: trunk/LayoutTests/platform/qt/TestExpectations (130404 => 130405)
--- trunk/LayoutTests/platform/qt/TestExpectations 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/LayoutTests/platform/qt/TestExpectations 2012-10-04 16:47:50 UTC (rev 130405)
@@ -2846,6 +2846,8 @@
webkit.org/b/93247 [ Debug ] fast/lists/list-marker-remove-crash.html [ Crash ]
+webkit.org/b/98306 css3/flexbox/flexbox-baseline.html [ Failure ]
+
# Needs results
webkit.org/b/97409 svg/custom/clip-mask-negative-scale.svg [ Missing Pass ]
Modified: trunk/LayoutTests/platform/win/TestExpectations (130404 => 130405)
--- trunk/LayoutTests/platform/win/TestExpectations 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/LayoutTests/platform/win/TestExpectations 2012-10-04 16:47:50 UTC (rev 130405)
@@ -2319,6 +2319,9 @@
#https://bugs.webkit.org/show_bug.cgi?id=98095
inspector/debugger/dynamic-script-tag.html
+#https://bugs.webkit.org/show_bug.cgi?id=98306
+css3/flexbox/flexbox-baseline.html
+
# https://bugs.webkit.org/show_bug.cgi?id=98169
http/tests/inspector/csp-injected-content-warning-contains-stacktrace.html
http/tests/inspector/csp-inline-warning-contains-stacktrace.html
Modified: trunk/Source/WebCore/ChangeLog (130404 => 130405)
--- trunk/Source/WebCore/ChangeLog 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/Source/WebCore/ChangeLog 2012-10-04 16:47:50 UTC (rev 130405)
@@ -1,3 +1,30 @@
+2012-10-04 Tony Chang <t...@chromium.org>
+
+ inline-flex baseline is sometimes wrong
+ https://bugs.webkit.org/show_bug.cgi?id=96188
+
+ Reviewed by Ojan Vafai.
+
+ Implement the necessary methods to get the proper baseline alignment of flexbox.
+ We were falling back to the inline-block behavior.
+
+ Test: css3/flexbox/flexbox-baseline.html
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::RenderFlexibleBox):
+ (WebCore::RenderFlexibleBox::baselinePosition): Used to get the baseline of the box.
+ Mostly just the first line box baseline.
+ (WebCore):
+ (WebCore::RenderFlexibleBox::lastLineBoxBaseline): This is used for getting the baseline when in an inline-block.
+ We actually don't want the last line, but the flexbox's baseline.
+ (WebCore::RenderFlexibleBox::firstLineBoxBaseline): Compute the baseline according to the rules in the spec.
+ (WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems): Keep track of the number of children on the
+ first line so we don't have to re-compute this when getting the baseline.
+ (WebCore::RenderFlexibleBox::crossAxisExtentForChild): Make const.
+ (WebCore::RenderFlexibleBox::mainAxisExtentForChild): Make const.
+ (WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis): Make const.
+ * rendering/RenderFlexibleBox.h: Add a size_t to keep track of how many children are in the first line.
+
2012-10-04 Xianzhu Wang <wangxian...@chromium.org>
[Chromium] Should set unitsPerEm in SimpleFontDataSkia.cpp
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (130404 => 130405)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-10-04 16:47:50 UTC (rev 130405)
@@ -132,6 +132,7 @@
RenderFlexibleBox::RenderFlexibleBox(Node* node)
: RenderBlock(node)
+ , m_numberOfChildrenOnFirstLine(0)
{
setChildrenInline(false); // All of our children must be block-level.
}
@@ -234,6 +235,57 @@
setPreferredLogicalWidthsDirty(false);
}
+LayoutUnit RenderFlexibleBox::baselinePosition(FontBaseline baselineType, bool firstLine, LineDirectionMode direction, LinePositionMode linePositionMode) const
+{
+ LayoutUnit baseline = firstLineBoxBaseline();
+ if (baseline != -1) {
+ LayoutUnit marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
+ return baseline + marginAscent;
+ }
+
+ return RenderBox::baselinePosition(baselineType, firstLine, direction, linePositionMode);
+}
+
+LayoutUnit RenderFlexibleBox::lastLineBoxBaseline() const
+{
+ // Similar to tables, if we're in an inline-block, align with the bottom of our box.
+ return -1;
+}
+
+LayoutUnit RenderFlexibleBox::firstLineBoxBaseline() const
+{
+ ASSERT(m_orderIterator);
+
+ if (isWritingModeRoot() || !m_numberOfChildrenOnFirstLine)
+ return -1;
+ RenderBox* baselineChild = 0;
+ RenderBox* child = m_orderIterator->first();
+ for (size_t childNumber = 0; childNumber < m_numberOfChildrenOnFirstLine; ++childNumber, child = m_orderIterator->next()) {
+ if (child->isOutOfFlowPositioned())
+ continue;
+ if (alignmentForChild(child) == AlignBaseline && !hasAutoMarginsInCrossAxis(child)) {
+ baselineChild = child;
+ break;
+ }
+ if (!baselineChild)
+ baselineChild = child;
+ }
+
+ if (!baselineChild)
+ return -1;
+
+ if (!isColumnFlow() && hasOrthogonalFlow(baselineChild))
+ return crossAxisExtentForChild(baselineChild) + baselineChild->logicalTop();
+ if (isColumnFlow() && !hasOrthogonalFlow(baselineChild))
+ return mainAxisExtentForChild(baselineChild) + baselineChild->logicalTop();
+
+ LayoutUnit baseline = baselineChild->firstLineBoxBaseline();
+ if (baseline == -1)
+ return -1;
+
+ return baseline + baselineChild->logicalTop();
+}
+
void RenderFlexibleBox::layoutBlock(bool relayoutChildren, LayoutUnit)
{
ASSERT(needsLayout());
@@ -321,6 +373,8 @@
flipForWrapReverse(iterator, lineContexts, crossAxisStartEdge);
}
+ m_numberOfChildrenOnFirstLine = lineContexts.isEmpty() ? 0 : lineContexts[0].numberOfChildren;
+
// direction:rtl + flex-direction:column means the cross-axis direction is flipped.
flipForRightToLeftColumn(iterator);
}
@@ -371,12 +425,12 @@
setWidth(extent);
}
-LayoutUnit RenderFlexibleBox::crossAxisExtentForChild(RenderBox* child)
+LayoutUnit RenderFlexibleBox::crossAxisExtentForChild(RenderBox* child) const
{
return isHorizontalFlow() ? child->height() : child->width();
}
-LayoutUnit RenderFlexibleBox::mainAxisExtentForChild(RenderBox* child)
+LayoutUnit RenderFlexibleBox::mainAxisExtentForChild(RenderBox* child) const
{
return isHorizontalFlow() ? child->width() : child->height();
}
@@ -683,7 +737,7 @@
}
}
-bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(RenderBox* child)
+bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(RenderBox* child) const
{
if (isHorizontalFlow())
return child->style()->marginTop().isAuto() || child->style()->marginBottom().isAuto();
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (130404 => 130405)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-10-04 16:45:28 UTC (rev 130404)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-10-04 16:47:50 UTC (rev 130405)
@@ -49,6 +49,10 @@
virtual void computePreferredLogicalWidths() OVERRIDE;
virtual void layoutBlock(bool relayoutChildren, LayoutUnit pageLogicalHeight = 0) OVERRIDE;
+ virtual LayoutUnit baselinePosition(FontBaseline, bool firstLine, LineDirectionMode, LinePositionMode = PositionOnContainingLine) const OVERRIDE;
+ virtual LayoutUnit firstLineBoxBaseline() const OVERRIDE;
+ virtual LayoutUnit lastLineBoxBaseline() const OVERRIDE;
+
virtual void paintChildren(PaintInfo& forSelf, const LayoutPoint&, PaintInfo& forChild, bool usePrintRect) OVERRIDE;
bool isHorizontalFlow() const;
@@ -80,8 +84,8 @@
bool isMultiline() const;
Length flexBasisForChild(RenderBox* child) const;
void setCrossAxisExtent(LayoutUnit);
- LayoutUnit crossAxisExtentForChild(RenderBox* child);
- LayoutUnit mainAxisExtentForChild(RenderBox* child);
+ LayoutUnit crossAxisExtentForChild(RenderBox* child) const;
+ LayoutUnit mainAxisExtentForChild(RenderBox* child) const;
LayoutUnit crossAxisExtent() const;
LayoutUnit mainAxisExtent() const;
LayoutUnit crossAxisContentExtent() const;
@@ -114,7 +118,7 @@
void layoutFlexItems(OrderIterator&, WTF::Vector<LineContext>&);
LayoutUnit autoMarginOffsetInMainAxis(const OrderedFlexItemList&, LayoutUnit& availableFreeSpace);
void updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset);
- bool hasAutoMarginsInCrossAxis(RenderBox* child);
+ bool hasAutoMarginsInCrossAxis(RenderBox* child) const;
bool updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace);
void repositionLogicalHeightDependentFlexItems(OrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
@@ -141,6 +145,7 @@
void flipForWrapReverse(OrderIterator&, const WTF::Vector<LineContext>&, LayoutUnit crossAxisStartEdge);
OwnPtr<OrderIterator> m_orderIterator;
+ size_t m_numberOfChildrenOnFirstLine;
};
} // namespace WebCore
_______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org http://lists.webkit.org/mailman/listinfo/webkit-changes
