Attachment #157656 for bug #77772

View Details Raw Unified Return to Bug 77772

| Differences between



2012-08-09  Tony Chang  <tony@chromium.org>

        implement display: -webkit-inline-flex
        https://bugs.webkit.org/show_bug.cgi?id=77772

        Reviewed by Ojan Vafai.

        The crashes last time were because we were marking too much of the tree for relayout. During some editing
        operations, this causes a layout when we're in an inconsistent state.

        Tests: css3/flexbox/inline-flex-crash.html
               css3/flexbox/inline-flex-crash2.html
               css3/flexbox/inline-flex.html

        * rendering/RenderFlexibleBox.cpp:
        (WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes): Only layout the child.
        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Only layout the child.
        (WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Only layout the child.
        * rendering/style/RenderStyle.h: Include INLINE_FLEX as an inline and replaced display type.

2012-08-09  Kentaro Hara  <haraken@chromium.org>

        Unreviewed. Updated run-binding-tests results.



        Length childMainAxisMin = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();
        if (hasOrthogonalFlow(child) && (flexBasisForChild(child).isAuto() || childMainAxisMin.isAuto())) {
            if (!relayoutChildren)
                child->setChildNeedsLayout(true, MarkOnlyThis);
            child->layoutIfNeeded();
        }


        LayoutUnit childPreferredSize = childSizes[i] + mainAxisBorderAndPaddingExtentForChild(child);
        setLogicalOverrideSize(child, childPreferredSize);
        // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
        child->setChildNeedsLayout(true, MarkOnlyThis);
        child->layoutIfNeeded();

        updateAutoMarginsInMainAxis(child, autoMarginOffset);

        if (child->logicalHeight() != logicalHeightBefore) {
            child->setOverrideLogicalContentHeight(child->logicalHeight() - child->borderAndPaddingLogicalHeight());
            child->setLogicalHeight(0);
            child->setChildNeedsLayout(true, MarkOnlyThis);
            child->layoutIfNeeded();
        }
    } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
        // FIXME: Handle min-width and max-width.
        LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
        child->setOverrideLogicalContentWidth(std::max(ZERO_LAYOUT_UNIT, childWidth));
        child->setChildNeedsLayout(true, MarkOnlyThis);
        child->layoutIfNeeded();
    }
}

Lines 1740-1746 private: a/Source/WebCore/rendering/style/RenderStyle.h_sec1
- a/Source/WebCore/rendering/style/RenderStyle.h -1 / +1 lines
1740		1740
1741	bool isDisplayReplacedType(EDisplay display) const	1741	bool isDisplayReplacedType(EDisplay display) const
1742	{	1742	{
1743	return display == INLINE_BLOCK \|\| display == INLINE_BOX \|\| display == INLINE_TABLE \|\| display == INLINE_GRID;	1743	return display == INLINE_BLOCK \|\| display == INLINE_BOX \|\| display == INLINE_FLEX \|\| display == INLINE_TABLE \|\| display == INLINE_GRID;
1744	}	1744	}
1745		1745
1746	bool isDisplayInlineType(EDisplay display) const	1746	bool isDisplayInlineType(EDisplay display) const



2012-08-09  Tony Chang  <tony@chromium.org>

        implement display: -webkit-inline-flex
        https://bugs.webkit.org/show_bug.cgi?id=77772

        Reviewed by Ojan Vafai.

        Include 2 crash tests that caused this to be reverted the last time.

        * css3/flexbox/inline-flex-crash-expected.txt: Added.
        * css3/flexbox/inline-flex-crash.html: Added.
        * css3/flexbox/inline-flex-crash2-expected.txt: Added.
        * css3/flexbox/inline-flex-crash2.html: Added.
        * css3/flexbox/inline-flex-expected.html: Added.
        * css3/flexbox/inline-flex.html: Added.

2012-08-09  Mike Lawther  <mikelawther@chromium.org>

        Unreviewed gardening.

Line 0 a/LayoutTests/css3/flexbox/inline-flex-crash-expected.txt_sec1
- a/LayoutTests/css3/flexbox/inline-flex-crash-expected.txt +5 lines
	1	This test passes if it doesn't crash.
	2
	3	AA
	4
	5	؅



<!DOCTYPE html>
<style>#el0::first-letter, #el0:first-child { height: 10px; }</style>
This test passes if it doesn't crash.

<div id='container' contentEditable><a><img><div id="el0" style="display: -webkit-inline-flex"><pre></pre></div></a></div>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

document.querySelector('pre').textContent = 'AA\u0605';
window.getSelection().selectAllChildren(document.getElementById('container'));
document.execCommand('FormatBlock', false, '<h1>');
</script>

Line 0 a/LayoutTests/css3/flexbox/inline-flex-crash2-expected.txt_sec1
- a/LayoutTests/css3/flexbox/inline-flex-crash2-expected.txt +5 lines
	1	This test passes if it doesn't crash.
	2
	3	AAAA
	4
	5	A



<!DOCTYPE html>
<style>#el0::first-letter, #el0:first-child { height: 100px;}</style>
This test passes if it doesn't crash.

<div id='container' contentEditable><a><img><div id="el0" style="display: -webkit-inline-flex"><pre>AAAAA</pre></div></a></div>
<script>
if (window.layoutTestController)
    layoutTestController.dumpAsText();

window.getSelection().selectAllChildren(document.getElementById('container'));
document.execCommand('FormatBlock', false, '<h5>');
</script>

Line 0 a/LayoutTests/css3/flexbox/inline-flex-expected.txt_sec1
- a/LayoutTests/css3/flexbox/inline-flex-expected.txt +3 lines
	1	This test passes if the three green boxes are on the same horizontal line.
	2
	3	PASS



<!DOCTYPE html>
<html>
<style>
#testcase > div {
    height: 50px;
    width: 50px;
    background-color: green;
    outline: 2px solid darkgreen;
}

#testcase > div > div {
    -webkit-flex: 1;
}

</style>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
</script>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('#testcase')">
<p>This test passes if the three green boxes are on the same horizontal line.</p>

<div id="testcase" style="position: relative">
<div data-offset-y="0" data-offset-x="0" data-expected-width="50" data-expected-height="50" style="display: inline-block">
</div><div data-offset-y="0" data-offset-x="50" data-expected-width="50" data-expected-height="50" style="display: -webkit-inline-flex;">
    <div data-expected-width="25"></div>
    <div data-expected-width="25"></div>
</div><div data-offset-y="0" data-offset-x="100" data-expected-width="50" data-expected-height="50" style="display: inline-block"></div>
</div>
</body>
</html>

Return to Bug 77772

Lines 780-786 void RenderFlexibleBox::computeMainAxisPreferredSizes(bool relayoutChildren, Ord a/Source/WebCore/rendering/RenderFlexibleBox.cpp_sec1
- a/Source/WebCore/rendering/RenderFlexibleBox.cpp -4 / +4 lines
780	Length childMainAxisMin = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();	780	Length childMainAxisMin = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();
781	if (hasOrthogonalFlow(child) && (flexBasisForChild(child).isAuto() \|\| childMainAxisMin.isAuto())) {	781	if (hasOrthogonalFlow(child) && (flexBasisForChild(child).isAuto() \|\| childMainAxisMin.isAuto())) {
782	if (!relayoutChildren)	782	if (!relayoutChildren)
783	child->setChildNeedsLayout(true);	783	child->setChildNeedsLayout(true, MarkOnlyThis);
784	child->layoutIfNeeded();	784	child->layoutIfNeeded();
785	}	785	}
786		786
Lines 1019-1025 void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons a/Source/WebCore/rendering/RenderFlexibleBox.cpp_sec2
1019	LayoutUnit childPreferredSize = childSizes[i] + mainAxisBorderAndPaddingExtentForChild(child);	1019	LayoutUnit childPreferredSize = childSizes[i] + mainAxisBorderAndPaddingExtentForChild(child);
1020	setLogicalOverrideSize(child, childPreferredSize);	1020	setLogicalOverrideSize(child, childPreferredSize);
1021	// FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.	1021	// FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
1022	child->setChildNeedsLayout(true);	1022	child->setChildNeedsLayout(true, MarkOnlyThis);
1023	child->layoutIfNeeded();	1023	child->layoutIfNeeded();
1024		1024
1025	updateAutoMarginsInMainAxis(child, autoMarginOffset);	1025	updateAutoMarginsInMainAxis(child, autoMarginOffset);
Lines 1243-1256 void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox* child, LayoutUni a/Source/WebCore/rendering/RenderFlexibleBox.cpp_sec3
1243	if (child->logicalHeight() != logicalHeightBefore) {	1243	if (child->logicalHeight() != logicalHeightBefore) {
1244	child->setOverrideLogicalContentHeight(child->logicalHeight() - child->borderAndPaddingLogicalHeight());	1244	child->setOverrideLogicalContentHeight(child->logicalHeight() - child->borderAndPaddingLogicalHeight());
1245	child->setLogicalHeight(0);	1245	child->setLogicalHeight(0);
1246	child->setChildNeedsLayout(true);	1246	child->setChildNeedsLayout(true, MarkOnlyThis);
1247	child->layoutIfNeeded();	1247	child->layoutIfNeeded();
1248	}	1248	}
1249	} else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {	1249	} else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
1250	// FIXME: Handle min-width and max-width.	1250	// FIXME: Handle min-width and max-width.
1251	LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);	1251	LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
1252	child->setOverrideLogicalContentWidth(std::max(ZERO_LAYOUT_UNIT, childWidth));	1252	child->setOverrideLogicalContentWidth(std::max(ZERO_LAYOUT_UNIT, childWidth));
1253	child->setChildNeedsLayout(true);	1253	child->setChildNeedsLayout(true, MarkOnlyThis);
1254	child->layoutIfNeeded();	1254	child->layoutIfNeeded();
1255	}	1255	}
1256	}	1256	}

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +20 lines
		1	2012-08-09 Tony Chang <tony@chromium.org>
		2
		3	implement display: -webkit-inline-flex
		4	https://bugs.webkit.org/show_bug.cgi?id=77772
		5
		6	Reviewed by Ojan Vafai.
		7
		8	The crashes last time were because we were marking too much of the tree for relayout. During some editing
		9	operations, this causes a layout when we're in an inconsistent state.
		10
		11	Tests: css3/flexbox/inline-flex-crash.html
		12	css3/flexbox/inline-flex-crash2.html
		13	css3/flexbox/inline-flex.html
		14
		15	* rendering/RenderFlexibleBox.cpp:
		16	(WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes): Only layout the child.
		17	(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Only layout the child.
		18	(WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Only layout the child.
		19	* rendering/style/RenderStyle.h: Include INLINE_FLEX as an inline and replaced display type.
		20
1	2012-08-09 Kentaro Hara <haraken@chromium.org>	21	2012-08-09 Kentaro Hara <haraken@chromium.org>
2		22
3	Unreviewed. Updated run-binding-tests results.	23	Unreviewed. Updated run-binding-tests results.

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +16 lines
		1	2012-08-09 Tony Chang <tony@chromium.org>
		2
		3	implement display: -webkit-inline-flex
		4	https://bugs.webkit.org/show_bug.cgi?id=77772
		5
		6	Reviewed by Ojan Vafai.
		7
		8	Include 2 crash tests that caused this to be reverted the last time.
		9
		10	* css3/flexbox/inline-flex-crash-expected.txt: Added.
		11	* css3/flexbox/inline-flex-crash.html: Added.
		12	* css3/flexbox/inline-flex-crash2-expected.txt: Added.
		13	* css3/flexbox/inline-flex-crash2.html: Added.
		14	* css3/flexbox/inline-flex-expected.html: Added.
		15	* css3/flexbox/inline-flex.html: Added.
		16
1	2012-08-09 Mike Lawther <mikelawther@chromium.org>	17	2012-08-09 Mike Lawther <mikelawther@chromium.org>
2		18
3	Unreviewed gardening.	19	Unreviewed gardening.

Line 0 a/LayoutTests/css3/flexbox/inline-flex-crash.html_sec1
- a/LayoutTests/css3/flexbox/inline-flex-crash.html +13 lines
	1	<!DOCTYPE html>
	2	<style>#el0::first-letter, #el0:first-child { height: 10px; }</style>
	3	This test passes if it doesn't crash.
	4
	5	<div id='container' contentEditable><a><img><div id="el0" style="display: -webkit-inline-flex"><pre></pre></div></a></div>
	6	<script>
	7	if (window.testRunner)
	8	testRunner.dumpAsText();
	9
	10	document.querySelector('pre').textContent = 'AA\u0605';
	11	window.getSelection().selectAllChildren(document.getElementById('container'));
	12	document.execCommand('FormatBlock', false, '<h1>');
	13	</script>

Line 0 a/LayoutTests/css3/flexbox/inline-flex.html_sec1
- a/LayoutTests/css3/flexbox/inline-flex.html +32 lines
	1	<!DOCTYPE html>
	2	<html>
	3	<style>
	4	#testcase > div {
	5	height: 50px;
	6	width: 50px;
	7	background-color: green;
	8	outline: 2px solid darkgreen;
	9	}
	10
	11	#testcase > div > div {
	12	-webkit-flex: 1;
	13	}
	14
	15	</style>
	16	<script>
	17	if (window.testRunner)
	18	testRunner.dumpAsText();
	19	</script>
	20	<script src="../../resources/check-layout.js"></script>
	21	<body onload="checkLayout('#testcase')">
	22	<p>This test passes if the three green boxes are on the same horizontal line.</p>
	23
	24	<div id="testcase" style="position: relative">
	25	<div data-offset-y="0" data-offset-x="0" data-expected-width="50" data-expected-height="50" style="display: inline-block">
	26	</div><div data-offset-y="0" data-offset-x="50" data-expected-width="50" data-expected-height="50" style="display: -webkit-inline-flex;">
	27	<div data-expected-width="25"></div>
	28	<div data-expected-width="25"></div>
	29	</div><div data-offset-y="0" data-offset-x="100" data-expected-width="50" data-expected-height="50" style="display: inline-block"></div>
	30	</div>
	31	</body>
	32	</html>