Source/WebCore/ChangeLog

 12012-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
1212012-08-09 Kentaro Hara <haraken@chromium.org>
222
323 Unreviewed. Updated run-binding-tests results.

Source/WebCore/rendering/RenderFlexibleBox.cpp

@@void RenderFlexibleBox::computeMainAxisPreferredSizes(bool relayoutChildren, Ord
780780 Length childMainAxisMin = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();
781781 if (hasOrthogonalFlow(child) && (flexBasisForChild(child).isAuto() || childMainAxisMin.isAuto())) {
782782 if (!relayoutChildren)
783  child->setChildNeedsLayout(true);
 783 child->setChildNeedsLayout(true, MarkOnlyThis);
784784 child->layoutIfNeeded();
785785 }
786786

@@void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, cons
10191019 LayoutUnit childPreferredSize = childSizes[i] + mainAxisBorderAndPaddingExtentForChild(child);
10201020 setLogicalOverrideSize(child, childPreferredSize);
10211021 // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
1022  child->setChildNeedsLayout(true);
 1022 child->setChildNeedsLayout(true, MarkOnlyThis);
10231023 child->layoutIfNeeded();
10241024
10251025 updateAutoMarginsInMainAxis(child, autoMarginOffset);

@@void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox* child, LayoutUni
12431243 if (child->logicalHeight() != logicalHeightBefore) {
12441244 child->setOverrideLogicalContentHeight(child->logicalHeight() - child->borderAndPaddingLogicalHeight());
12451245 child->setLogicalHeight(0);
1246  child->setChildNeedsLayout(true);
 1246 child->setChildNeedsLayout(true, MarkOnlyThis);
12471247 child->layoutIfNeeded();
12481248 }
12491249 } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
12501250 // FIXME: Handle min-width and max-width.
12511251 LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
12521252 child->setOverrideLogicalContentWidth(std::max(ZERO_LAYOUT_UNIT, childWidth));
1253  child->setChildNeedsLayout(true);
 1253 child->setChildNeedsLayout(true, MarkOnlyThis);
12541254 child->layoutIfNeeded();
12551255 }
12561256}

Source/WebCore/rendering/style/RenderStyle.h

@@private:
17401740
17411741 bool isDisplayReplacedType(EDisplay display) const
17421742 {
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;
17441744 }
17451745
17461746 bool isDisplayInlineType(EDisplay display) const

LayoutTests/ChangeLog

 12012-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
1172012-08-09 Mike Lawther <mikelawther@chromium.org>
218
319 Unreviewed gardening.

LayoutTests/css3/flexbox/inline-flex-crash-expected.txt

 1This test passes if it doesn't crash.
 2
 3AA
 4
 5؅

LayoutTests/css3/flexbox/inline-flex-crash.html

 1<!DOCTYPE html>
 2<style>#el0::first-letter, #el0:first-child { height: 10px; }</style>
 3This 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>
 7if (window.testRunner)
 8 testRunner.dumpAsText();
 9
 10document.querySelector('pre').textContent = 'AA\u0605';
 11window.getSelection().selectAllChildren(document.getElementById('container'));
 12document.execCommand('FormatBlock', false, '<h1>');
 13</script>

LayoutTests/css3/flexbox/inline-flex-crash2-expected.txt

 1This test passes if it doesn't crash.
 2
 3AAAA
 4
 5A

LayoutTests/css3/flexbox/inline-flex-crash2.html

 1<!DOCTYPE html>
 2<style>#el0::first-letter, #el0:first-child { height: 100px;}</style>
 3This test passes if it doesn't crash.
 4
 5<div id='container' contentEditable><a><img><div id="el0" style="display: -webkit-inline-flex"><pre>AAAAA</pre></div></a></div>
 6<script>
 7if (window.layoutTestController)
 8 layoutTestController.dumpAsText();
 9
 10window.getSelection().selectAllChildren(document.getElementById('container'));
 11document.execCommand('FormatBlock', false, '<h5>');
 12</script>

LayoutTests/css3/flexbox/inline-flex-expected.txt

 1This test passes if the three green boxes are on the same horizontal line.
 2
 3 PASS

LayoutTests/css3/flexbox/inline-flex.html

 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>
 17if (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>