<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>[213149] trunk</title>

</head>

<body>

<style type="text/css"><!--

#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }

#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }

#msg dt:after { content:':';}

#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }

#msg dl a { font-weight: bold}

#msg dl a:link    { color:#fc3; }

#msg dl a:active  { color:#ff0; }

#msg dl a:visited { color:#cc6; }

h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }

#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }

#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }

#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }

#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }

#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }

#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }

#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }

#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }

#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }

#logmsg pre { background: #eee; padding: 1em; }

#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}

#logmsg dl { margin: 0; }

#logmsg dt { font-weight: bold; }

#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }

#logmsg dd:before { content:'\00bb';}

#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }

#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }

#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }

#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }

#logmsg table th.Corner { text-align: left; }

#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }

#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }

#patch { width: 100%; }

#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}

#patch .propset h4, #patch .binary h4 {margin:0;}

#patch pre {padding:0;line-height:1.2em;margin:0;}

#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}

#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}

#patch span {display:block;padding:0 10px;}

#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}

#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}

#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}

#patch .lines, .info {color:#888;background:#fff;}

--></style>

<div id="msg">

<dl class="meta">

<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/213149">213149</a></dd>

<dt>Author</dt> <dd>hyatt@apple.com</dd>

<dt>Date</dt> <dd>2017-02-28 08:23:15 -0800 (Tue, 28 Feb 2017)</dd>

</dl>

<h3>Log Message</h3>

<pre>Update flexbox to Blink's tip of tree

https://bugs.webkit.org/show_bug.cgi?id=168657

Reviewed by Zalan Bujtas.

Source/WebCore:

Added new tests in css3/flexbox.

* CMakeLists.txt:

* WebCore.xcodeproj/project.pbxproj:

* css/CSSComputedStyleDeclaration.cpp:

(WebCore::ComputedStyleExtractor::propertyValue):

* rendering/FlexibleBoxAlgorithm.cpp: Added.

(WebCore::FlexItem::FlexItem):

(WebCore::FlexLayoutAlgorithm::FlexLayoutAlgorithm):

(WebCore::FlexLayoutAlgorithm::computeNextFlexLine):

* rendering/FlexibleBoxAlgorithm.h: Added.

(WebCore::FlexItem::hypotheticalMainAxisMarginBoxSize):

(WebCore::FlexItem::flexBaseMarginBoxSize):

(WebCore::FlexItem::flexedMarginBoxSize):

(WebCore::FlexLayoutAlgorithm::isMultiline):

* rendering/GridTrackSizingAlgorithm.cpp:

(WebCore::GridTrackSizingAlgorithm::computeTrackBasedSize):

(WebCore::GridTrackSizingAlgorithm::increaseSizesToAccommodateSpanningItems):

(WebCore::GridTrackSizingAlgorithm::assumedRowsSizeForOrthogonalChild):

(WebCore::GridTrackSizingAlgorithm::gridAreaBreadthForChild):

(WebCore::IndefiniteSizeStrategy::recomputeUsedFlexFractionIfNeeded):

* rendering/GridTrackSizingAlgorithm.h:

* rendering/OrderIterator.cpp:

(WebCore::OrderIterator::next):

(WebCore::OrderIterator::reset):

(WebCore::OrderIteratorPopulator::~OrderIteratorPopulator):

(WebCore::OrderIteratorPopulator::collectChild):

(WebCore::OrderIteratorPopulator::OrderIteratorPopulator): Deleted.

(WebCore::OrderIteratorPopulator::removeDuplicatedOrderValues): Deleted.

* rendering/OrderIterator.h:

(WebCore::OrderIteratorPopulator::OrderIteratorPopulator):

* rendering/RenderBlock.cpp:

(WebCore::RenderBlock::updateBlockChildDirtyBitsBeforeLayout):

(WebCore::RenderBlock::layoutPositionedObject):

(WebCore::RenderBlock::computeBlockPreferredLogicalWidths):

(WebCore::RenderBlock::computeChildPreferredLogicalWidths):

(WebCore::RenderBlock::hasDefiniteLogicalHeight):

(WebCore::RenderBlock::availableLogicalHeightForPercentageComputation):

* rendering/RenderBlock.h:

(WebCore::RenderBlock::hasPercentHeightDescendants):

* rendering/RenderBlockFlow.cpp:

(WebCore::RenderBlockFlow::computeInlinePreferredLogicalWidths):

* rendering/RenderBox.cpp:

(WebCore::RenderBox::columnFlexItemHasStretchAlignment):

(WebCore::RenderBox::isStretchingColumnFlexItem):

(WebCore::RenderBox::hasStretchedLogicalWidth):

(WebCore::RenderBox::sizesLogicalWidthToFitContent):

(WebCore::RenderBox::computeInlineDirectionMargins):

(WebCore::RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem):

(WebCore::RenderBox::updateLogicalHeight):

(WebCore::RenderBox::computeLogicalHeightWithoutLayout):

(WebCore::RenderBox::skipContainingBlockForPercentHeightCalculation):

(WebCore::RenderBox::shouldTreatChildAsReplacedInTableCells):

(WebCore::tableCellShouldHaveZeroInitialSize):

(WebCore::RenderBox::computePercentageLogicalHeight):

(WebCore::RenderBox::computeReplacedLogicalHeightUsing):

(WebCore::RenderBox::availableLogicalHeightUsing):

(WebCore::RenderBox::percentageLogicalHeightIsResolvable):

(WebCore::RenderBox::hasUnsplittableScrollingOverflow):

(WebCore::flexItemHasStretchAlignment): Deleted.

(WebCore::isStretchingColumnFlexItem): Deleted.

(WebCore::logicalWidthIsResolvable): Deleted.

(WebCore::RenderBox::hasDefiniteLogicalWidth): Deleted.

(WebCore::percentageLogicalHeightIsResolvable): Deleted.

(WebCore::RenderBox::percentageLogicalHeightIsResolvableFromBlock): Deleted.

(WebCore::RenderBox::hasDefiniteLogicalHeight): Deleted.

* rendering/RenderBox.h:

(WebCore::RenderBox::isGridItem):

(WebCore::RenderBox::isFlexItem):

(WebCore::RenderBox::selfAlignmentNormalBehavior):

* rendering/RenderBoxModelObject.cpp:

(WebCore::isOutOfFlowPositionedWithImplicitHeight):

(WebCore::RenderBoxModelObject::containingBlockForAutoHeightDetection):

(WebCore::RenderBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight):

* rendering/RenderBoxModelObject.h:

* rendering/RenderElement.cpp:

(WebCore::RenderElement::removeChildInternal):

* rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::LineContext::LineContext):

(WebCore::RenderFlexibleBox::RenderFlexibleBox):

(WebCore::RenderFlexibleBox::computeIntrinsicLogicalWidths):

(WebCore::contentAlignmentNormalBehavior):

(WebCore::RenderFlexibleBox::styleDidChange):

(WebCore::RenderFlexibleBox::layoutBlock):

(WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems):

(WebCore::RenderFlexibleBox::clientLogicalBottomAfterRepositioning):

(WebCore::RenderFlexibleBox::hasOrthogonalFlow):

(WebCore::RenderFlexibleBox::flexBasisForChild):

(WebCore::RenderFlexibleBox::crossAxisExtentForChild):

(WebCore::RenderFlexibleBox::cachedChildIntrinsicContentLogicalHeight):

(WebCore::RenderFlexibleBox::setCachedChildIntrinsicContentLogicalHeight):

(WebCore::RenderFlexibleBox::clearCachedChildIntrinsicContentLogicalHeight):

(WebCore::RenderFlexibleBox::childIntrinsicLogicalHeight):

(WebCore::RenderFlexibleBox::childIntrinsicLogicalWidth):

(WebCore::RenderFlexibleBox::crossAxisIntrinsicExtentForChild):

(WebCore::RenderFlexibleBox::mainAxisExtentForChild):

(WebCore::RenderFlexibleBox::mainAxisContentExtentForChildIncludingScrollbar):

(WebCore::RenderFlexibleBox::crossAxisExtent):

(WebCore::RenderFlexibleBox::mainAxisExtent):

(WebCore::RenderFlexibleBox::mainAxisContentExtent):

(WebCore::RenderFlexibleBox::computeMainAxisExtentForChild):

(WebCore::RenderFlexibleBox::transformedWritingMode):

(WebCore::RenderFlexibleBox::flowAwareMarginStartForChild):

(WebCore::RenderFlexibleBox::flowAwareMarginEndForChild):

(WebCore::RenderFlexibleBox::flowAwareMarginBeforeForChild):

(WebCore::RenderFlexibleBox::crossAxisMarginExtentForChild):

(WebCore::RenderFlexibleBox::flowAwareLocationForChild):

(WebCore::RenderFlexibleBox::useChildAspectRatio):

(WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing):

(WebCore::RenderFlexibleBox::setFlowAwareLocationForChild):

(WebCore::RenderFlexibleBox::mainAxisLengthIsDefinite):

(WebCore::RenderFlexibleBox::crossAxisLengthIsDefinite):

(WebCore::RenderFlexibleBox::cacheChildMainSize):

(WebCore::RenderFlexibleBox::clearCachedMainSizeForChild):

(WebCore::RenderFlexibleBox::computeInnerFlexBaseSizeForChild):

(WebCore::RenderFlexibleBox::layoutFlexItems):

(WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis):

(WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis):

(WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis):

(WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild):

(WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis):

(WebCore::RenderFlexibleBox::marginBoxAscentForChild):

(WebCore::RenderFlexibleBox::computeChildMarginValue):

(WebCore::RenderFlexibleBox::adjustChildSizeForMinAndMax):

(WebCore::RenderFlexibleBox::crossSizeForPercentageResolution):

(WebCore::RenderFlexibleBox::mainSizeForPercentageResolution):

(WebCore::RenderFlexibleBox::childLogicalHeightForPercentageResolution):

(WebCore::RenderFlexibleBox::adjustChildSizeForAspectRatioCrossAxisMinAndMax):

(WebCore::RenderFlexibleBox::constructFlexItem):

(WebCore::RenderFlexibleBox::freezeViolations):

(WebCore::RenderFlexibleBox::freezeInflexibleItems):

(WebCore::RenderFlexibleBox::resolveFlexibleLengths):

(WebCore::alignmentOffset):

(WebCore::RenderFlexibleBox::setOverrideMainAxisContentSizeForChild):

(WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):

(WebCore::RenderFlexibleBox::staticCrossAxisPositionForPositionedChild):

(WebCore::RenderFlexibleBox::staticInlinePositionForPositionedChild):

(WebCore::RenderFlexibleBox::staticBlockPositionForPositionedChild):

(WebCore::RenderFlexibleBox::setStaticPositionForPositionedLayout):

(WebCore::RenderFlexibleBox::prepareChildForPositionedLayout):

(WebCore::RenderFlexibleBox::alignmentForChild):

(WebCore::RenderFlexibleBox::resetAutoMarginsAndLogicalTopInCrossAxis):

(WebCore::RenderFlexibleBox::needToStretchChildLogicalHeight):

(WebCore::RenderFlexibleBox::childHasIntrinsicMainAxisSize):

(WebCore::RenderFlexibleBox::crossAxisOverflowForChild):

(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):

(WebCore::RenderFlexibleBox::layoutColumnReverse):

(WebCore::initialAlignContentOffset):

(WebCore::alignContentSpaceBetweenChildren):

(WebCore::RenderFlexibleBox::alignFlexLines):

(WebCore::RenderFlexibleBox::adjustAlignmentForChild):

(WebCore::RenderFlexibleBox::alignChildren):

(WebCore::RenderFlexibleBox::applyStretchAlignmentToChild):

(WebCore::RenderFlexibleBox::flipForRightToLeftColumn):

(WebCore::RenderFlexibleBox::flipForWrapReverse):

(WebCore::RenderFlexibleBox::Violation::Violation): Deleted.

(WebCore::RenderFlexibleBox::setCrossAxisExtent): Deleted.

(WebCore::RenderFlexibleBox::flowAwareMarginAfterForChild): Deleted.

(WebCore::RenderFlexibleBox::mainAxisBorderAndPaddingExtentForChild): Deleted.

(WebCore::RenderFlexibleBox::mainAxisScrollbarExtentForChild): Deleted.

(WebCore::RenderFlexibleBox::preferredMainAxisContentExtentForChild): Deleted.

(WebCore::RenderFlexibleBox::computeNextFlexLine): Deleted.

(WebCore::RenderFlexibleBox::setLogicalOverrideSize): Deleted.

(WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Deleted.

(WebCore::RenderFlexibleBox::needToStretchChild): Deleted.

(WebCore::contentAlignmentNormalBehaviorFlexibleBox): Deleted.

* rendering/RenderFlexibleBox.h:

(WebCore::RenderFlexibleBox::orderIterator):

(WebCore::RenderFlexibleBox::isFlexibleBoxImpl):

* rendering/RenderFullScreen.h:

* rendering/RenderGrid.cpp:

(WebCore::selfAlignmentChangedToStretchInRowAxis):

(WebCore::selfAlignmentChangedFromStretchInRowAxis):

(WebCore::selfAlignmentChangedFromStretchInColumnAxis):

(WebCore::RenderGrid::styleDidChange):

(WebCore::RenderGrid::computeTrackBasedLogicalHeight):

(WebCore::RenderGrid::computeTrackSizesForDefiniteSize):

(WebCore::RenderGrid::gridGapForDirection):

(WebCore::RenderGrid::guttersSize):

(WebCore::RenderGrid::computeTrackSizesForIndefiniteSize):

(WebCore::RenderGrid::computeAutoRepeatTracksCount):

(WebCore::RenderGrid::trackSizesForComputedStyle):

(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):

(WebCore::RenderGrid::populateGridPositionsForDirection):

(WebCore::RenderGrid::alignSelfForChild):

(WebCore::RenderGrid::justifySelfForChild):

(WebCore::RenderGrid::columnAxisPositionForChild):

(WebCore::RenderGrid::rowAxisPositionForChild):

(WebCore::RenderGrid::columnAxisOffsetForChild):

(WebCore::RenderGrid::rowAxisOffsetForChild):

(WebCore::RenderGrid::needToStretchChildLogicalHeight): Deleted.

* rendering/RenderGrid.h:

* rendering/RenderLayer.cpp:

(WebCore::RenderLayer::updateScrollbarsAfterLayout):

* rendering/RenderListBox.cpp:

(WebCore::RenderListBox::computeLogicalHeight):

* rendering/RenderTable.cpp:

(WebCore::RenderTable::layout):

* rendering/RenderTableCell.cpp:

(WebCore::RenderTableCell::layout):

* rendering/RenderTableSection.cpp:

(WebCore::shouldFlexCellChild):

(WebCore::RenderTableSection::relayoutCellIfFlexed):

(WebCore::RenderTableSection::layoutRows):

* rendering/RenderTableSection.h:

* rendering/RenderTextControl.cpp:

(WebCore::RenderTextControl::computeLogicalHeight):

* rendering/style/RenderStyle.cpp:

(WebCore::resolvedSelfAlignment):

(WebCore::RenderStyle::resolvedAlignSelf):

(WebCore::RenderStyle::resolvedJustifySelf):

* rendering/style/RenderStyle.h:

* style/RenderTreeUpdater.cpp:

(WebCore::textRendererIsNeeded):

LayoutTests:

* css3/flexbox/align-absolute-child-expected.txt:

* css3/flexbox/align-absolute-child.html:

* css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt: Added.

* css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html: Added.

* css3/flexbox/anonymous-block-merge-crash.html:

* css3/flexbox/assert-generated-new-flexbox-expected.txt: Added.

* css3/flexbox/assert-generated-new-flexbox.html: Added.

* css3/flexbox/auto-height-dynamic-expected.txt:

* css3/flexbox/auto-height-dynamic.html:

* css3/flexbox/auto-height-with-flex-expected.html: Added.

* css3/flexbox/auto-height-with-flex.html: Added.

* css3/flexbox/auto-margins-expected.html: Removed.

* css3/flexbox/auto-margins.html: Removed.

* css3/flexbox/border-and-padding-abspos-expected.txt: Added.

* css3/flexbox/border-and-padding-abspos.html: Added.

* css3/flexbox/box-orient-button-expected.txt: Added.

* css3/flexbox/box-orient-button.html: Added.

* css3/flexbox/box-sizing-expected.txt:

* css3/flexbox/box-sizing-min-max-sizes-expected.txt:

* css3/flexbox/box-sizing-min-max-sizes.html:

* css3/flexbox/box-sizing.html:

* css3/flexbox/bug527039-expected.txt: Added.

* css3/flexbox/bug527039.html: Added.

* css3/flexbox/bug580586-expected.txt: Added.

* css3/flexbox/bug580586.html: Added.

* css3/flexbox/bug604346-expected.html: Added.

* css3/flexbox/bug604346.html: Added.

* css3/flexbox/bug605682-expected.txt: Added.

* css3/flexbox/bug605682.html: Added.

* css3/flexbox/bug633212-expected.txt: Added.

* css3/flexbox/bug633212.html: Added.

* css3/flexbox/bug646288-expected.txt: Added.

* css3/flexbox/bug646288.html: Added.

* css3/flexbox/bug669714-expected.txt: Added.

* css3/flexbox/bug669714.html: Added.

* css3/flexbox/canvas-dynamic-change-expected.txt: Added.

* css3/flexbox/canvas-dynamic-change.html: Added.

* css3/flexbox/change-flexitem-into-abspos-expected.txt: Added.

* css3/flexbox/change-flexitem-into-abspos.html: Added.

* css3/flexbox/child-overflow-expected.html:

* css3/flexbox/child-overflow.html:

* css3/flexbox/column-flex-child-with-overflow-scroll-expected.txt: Added.

* css3/flexbox/column-flex-child-with-overflow-scroll.html: Added.

* css3/flexbox/columns-auto-size.html:

* css3/flexbox/columns-center-with-margins-and-wrap-expected.html: Added.

* css3/flexbox/columns-center-with-margins-and-wrap.html: Added.

* css3/flexbox/columns-center-with-margins-expected.html: Added.

* css3/flexbox/columns-center-with-margins.html: Added.

* css3/flexbox/columns-height-set-via-top-bottom-expected.txt:

* css3/flexbox/columns-height-set-via-top-bottom.html:

* css3/flexbox/content-height-with-scrollbars.html:

* css3/flexbox/cross-axis-scrollbar-expected.html:

* css3/flexbox/cross-axis-scrollbar.html:

* css3/flexbox/css-properties-expected.txt:

* css3/flexbox/css-properties.html:

* css3/flexbox/csswg/flex-margin-no-collapse.html:

* css3/flexbox/definite-cross-sizes-expected.txt: Added.

* css3/flexbox/definite-cross-sizes.html: Added.

* css3/flexbox/definite-main-size-expected.txt: Added.

* css3/flexbox/definite-main-size.html: Added.

* css3/flexbox/display-flexbox-set-get-expected.txt:

* css3/flexbox/display-flexbox-set-get.html:

* css3/flexbox/flex-algorithm-expected.txt:

* css3/flexbox/flex-algorithm-min-max-expected.txt:

* css3/flexbox/flex-algorithm-min-max.html:

* css3/flexbox/flex-algorithm-with-margins-expected.txt:

* css3/flexbox/flex-algorithm-with-margins.html:

* css3/flexbox/flex-algorithm.html:

* css3/flexbox/flex-align-baseline-expected.txt:

* css3/flexbox/flex-align-baseline.html:

* css3/flexbox/flex-align-column-expected.txt:

* css3/flexbox/flex-align-column.html:

* css3/flexbox/flex-align-end-expected.txt:

* css3/flexbox/flex-align-end.html:

* css3/flexbox/flex-align-max-expected.txt:

* css3/flexbox/flex-align-max.html:

* css3/flexbox/flex-align-percent-height-expected.txt:

* css3/flexbox/flex-align-percent-height.html:

* css3/flexbox/flex-align-stretch-expected.txt:

* css3/flexbox/flex-align-stretch.html:

* css3/flexbox/flex-align-vertical-writing-mode.html:

* css3/flexbox/flex-align.html:

* css3/flexbox/flex-column-relayout-assert-expected.txt: Added.

* css3/flexbox/flex-column-relayout-assert.html: Added.

* css3/flexbox/flex-factor-less-than-one-expected.txt: Added.

* css3/flexbox/flex-factor-less-than-one.html: Added.

* css3/flexbox/flex-flow-2-expected.txt:

* css3/flexbox/flex-flow-2.html:

* css3/flexbox/flex-flow-auto-margins-expected.txt:

* css3/flexbox/flex-flow-auto-margins-no-available-space-assert-expected.txt: Added.

* css3/flexbox/flex-flow-auto-margins-no-available-space-assert.html: Added.

* css3/flexbox/flex-flow-auto-margins-no-available-space-expected.txt:

* css3/flexbox/flex-flow-auto-margins-no-available-space.html:

* css3/flexbox/flex-flow-auto-margins.html:

* css3/flexbox/flex-flow-border-expected.txt:

* css3/flexbox/flex-flow-border.html:

* css3/flexbox/flex-flow-expected.txt:

* css3/flexbox/flex-flow-initial-expected.txt:

* css3/flexbox/flex-flow-initial.html:

* css3/flexbox/flex-flow-margins-auto-size-expected.txt:

* css3/flexbox/flex-flow-margins-auto-size.html:

* css3/flexbox/flex-flow-margins-expected.txt:

* css3/flexbox/flex-flow-margins.html:

* css3/flexbox/flex-flow-orientations-expected.txt:

* css3/flexbox/flex-flow-orientations.html:

* css3/flexbox/flex-flow-overflow-expected.txt:

* css3/flexbox/flex-flow-overflow.html:

* css3/flexbox/flex-flow-padding-expected.txt:

* css3/flexbox/flex-flow-padding.html:

* css3/flexbox/flex-flow.html:

* css3/flexbox/flex-item-child-overflow-expected.txt:

* css3/flexbox/flex-item-child-overflow.html:

* css3/flexbox/flex-item-contains-strict-expected.txt: Added.

* css3/flexbox/flex-item-contains-strict.html: Added.

* css3/flexbox/flex-item-firstLine-valid-expected.txt:

* css3/flexbox/flex-item-firstLine-valid.html:

* css3/flexbox/flex-justify-content-expected.txt:

* css3/flexbox/flex-justify-content.html:

* css3/flexbox/flex-longhand-parsing-expected.txt:

* css3/flexbox/flex-longhand-parsing.html:

* css3/flexbox/flex-no-flex-expected.txt:

* css3/flexbox/flex-no-flex.html:

* css3/flexbox/flex-one-sets-flex-basis-to-zero-px-expected.txt: Added.

* css3/flexbox/flex-one-sets-flex-basis-to-zero-px.html: Added.

* css3/flexbox/flex-order-expected.html: Added.

* css3/flexbox/flex-order-expected.png: Removed.

* css3/flexbox/flex-order-expected.txt: Removed.

* css3/flexbox/flex-order.html:

* css3/flexbox/flex-property-parsing-expected.txt:

* css3/flexbox/flex-property-parsing.html:

* css3/flexbox/flex-shorthand-flex-basis-middle-expected.txt: Added.

* css3/flexbox/flex-shorthand-flex-basis-middle.html: Added.

* css3/flexbox/flexbox-baseline.html:

* css3/flexbox/flexbox-height-with-overflow-auto-expected.txt: Added.

* css3/flexbox/flexbox-height-with-overflow-auto.html: Added.

* css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt:

* css3/flexbox/flexbox-ignore-container-firstLetter.html:

* css3/flexbox/flexbox-ignore-firstLetter-expected.txt:

* css3/flexbox/flexbox-ignore-firstLetter.html:

* css3/flexbox/flexbox-ignore-firstLine-expected.txt:

* css3/flexbox/flexbox-ignore-firstLine.html:

* css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt:

* css3/flexbox/flexbox-lines-must-be-stretched-by-default.html:

* css3/flexbox/flexbox-overflow-auto-expected.html:

* css3/flexbox/flexbox-overflow-auto.html:

* css3/flexbox/flexbox-with-multi-column-property-expected.html: Added.

* css3/flexbox/flexbox-with-multi-column-property.html: Added.

* css3/flexbox/flexbox-wordwrap-expected.txt: Added.

* css3/flexbox/flexbox-wordwrap.html: Added.

* css3/flexbox/flexitem-expected.txt:

* css3/flexbox/flexitem-no-margin-collapsing-expected.txt:

* css3/flexbox/flexitem-no-margin-collapsing.html:

* css3/flexbox/flexitem-percent-height-change-expected.txt:

* css3/flexbox/flexitem-percent-height-change.html:

* css3/flexbox/flexitem-stretch-image-expected.txt:

* css3/flexbox/flexitem-stretch-image.html:

* css3/flexbox/flexitem-stretch-range.html:

* css3/flexbox/flexitem.html:

* css3/flexbox/floated-flexbox-expected.txt:

* css3/flexbox/floated-flexbox.html:

* css3/flexbox/floated-flexitem.html:

* css3/flexbox/inline-flex-crash.html:

* css3/flexbox/inline-flex-crash2.html:

* css3/flexbox/inline-flex-expected.txt:

* css3/flexbox/inline-flex.html:

* css3/flexbox/inline-flexbox-ignore-firstLine-expected.txt:

* css3/flexbox/inline-flexbox-ignore-firstLine.html:

* css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt: Added.

* css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html: Added.

* css3/flexbox/insert-text-crash.html:

* css3/flexbox/intrinsic-min-width-applies-with-fixed-width-expected.txt:

* css3/flexbox/intrinsic-min-width-applies-with-fixed-width.html:

* css3/flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt: Added.

* css3/flexbox/intrinsic-width-orthogonal-writing-mode.html: Added.

* css3/flexbox/large-flex-shrink-assert-expected.txt: Added.

* css3/flexbox/large-flex-shrink-assert.html: Added.

* css3/flexbox/line-wrapping.html:

* css3/flexbox/mainAxisExtent-crash-expected.txt: Added.

* css3/flexbox/mainAxisExtent-crash.html: Added.

* css3/flexbox/max-width-violation-expected.txt: Added.

* css3/flexbox/max-width-violation.html: Added.

* css3/flexbox/min-size-auto-expected.txt:

* css3/flexbox/min-size-auto.html:

* css3/flexbox/minimum-size-image-expected.txt: Added.

* css3/flexbox/minimum-size-image.html: Added.

* css3/flexbox/multiline-align-content-expected.txt:

* css3/flexbox/multiline-align-content-horizontal-column-expected.txt:

* css3/flexbox/multiline-align-content-horizontal-column.html:

* css3/flexbox/multiline-align-content.html:

* css3/flexbox/multiline-align-self-expected.txt:

* css3/flexbox/multiline-align-self.html:

* css3/flexbox/multiline-column-auto-expected.txt:

* css3/flexbox/multiline-column-auto.html:

* css3/flexbox/multiline-column-overflow-expected.html: Added.

* css3/flexbox/multiline-column-overflow.html: Added.

* css3/flexbox/multiline-expected.txt:

* css3/flexbox/multiline-justify-content-expected.txt:

* css3/flexbox/multiline-justify-content.html:

* css3/flexbox/multiline-min-max-expected.txt: Added.

* css3/flexbox/multiline-min-max.html: Added.

* css3/flexbox/multiline-min-preferred-width-expected.txt:

* css3/flexbox/multiline-min-preferred-width.html:

* css3/flexbox/multiline-reverse-wrap-baseline.html:

* css3/flexbox/multiline-reverse-wrap-overflow-expected.txt:

* css3/flexbox/multiline-reverse-wrap-overflow.html:

* css3/flexbox/multiline-shrink-to-fit-expected.html:

* css3/flexbox/multiline-shrink-to-fit.html:

* css3/flexbox/multiline.html:

* css3/flexbox/negative-flex-rounding-assert.html:

* css3/flexbox/negative-margins-assert.html:

* css3/flexbox/negative-overflow-expected.txt:

* css3/flexbox/negative-overflow.html:

* css3/flexbox/nested-flexbox-min-size-auto-expected.txt: Added.

* css3/flexbox/nested-flexbox-min-size-auto.html: Added.

* css3/flexbox/nested-orthogonal-flexbox-relayout-expected.html: Added.

* css3/flexbox/nested-orthogonal-flexbox-relayout.html: Added.

* css3/flexbox/nested-stretch-expected.txt:

* css3/flexbox/nested-stretch.html:

* css3/flexbox/order-painting.html:

* css3/flexbox/orthogonal-flex-directions-expected.txt:

* css3/flexbox/orthogonal-flex-directions.html:

* css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing-expected.txt: Added.

* css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html: Added.

* css3/flexbox/overflow-and-padding-expected.txt: Added.

* css3/flexbox/overflow-and-padding.html: Added.

* css3/flexbox/overflow-auto-dynamic-changes-abspos-expected.html: Added.

* css3/flexbox/overflow-auto-dynamic-changes-abspos.html: Added.

* css3/flexbox/overflow-auto-dynamic-changes-expected.html: Added.

* css3/flexbox/overflow-auto-dynamic-changes.html: Added.

* css3/flexbox/overflow-auto-resizes-correctly-expected.txt: Added.

* css3/flexbox/overflow-auto-resizes-correctly.html: Added.

* css3/flexbox/overflow-keep-scrollpos-expected.txt:

* css3/flexbox/overflow-keep-scrollpos.html:

* css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item-expected.txt: Added.

* css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html: Added.

* css3/flexbox/percent-margins-expected.txt:

* css3/flexbox/percent-margins.html:

* css3/flexbox/percentage-height-in-abspos-expected.html: Added.

* css3/flexbox/percentage-height-in-abspos.html: Added.

* css3/flexbox/percentage-height-replaced-element-expected.txt: Added.

* css3/flexbox/percentage-height-replaced-element.html: Added.

* css3/flexbox/percentage-heights-expected.txt:

* css3/flexbox/percentage-heights.html:

* css3/flexbox/percentage-max-width-cross-axis-expected.txt: Added.

* css3/flexbox/percentage-max-width-cross-axis.html: Added.

* css3/flexbox/percentage-sizes-expected.txt:

* css3/flexbox/percentage-sizes-quirks-expected.txt:

* css3/flexbox/percentage-sizes-quirks.html:

* css3/flexbox/percentage-sizes.html:

* css3/flexbox/percentage-width-in-abspos-expected.html: Added.

* css3/flexbox/percentage-width-in-abspos.html: Added.

* css3/flexbox/perpendicular-writing-modes-inside-flex-item-expected.txt:

* css3/flexbox/perpendicular-writing-modes-inside-flex-item.html:

* css3/flexbox/position-absolute-child-expected.txt:

* css3/flexbox/position-absolute-child.html:

* css3/flexbox/position-absolute-children-expected.txt:

* css3/flexbox/position-absolute-children.html:

* css3/flexbox/preferred-widths-expected.txt:

* css3/flexbox/preferred-widths-orthogonal.html:

* css3/flexbox/preferred-widths.html:

* css3/flexbox/relayout-align-items-expected.txt:

* css3/flexbox/relayout-align-items.html:

* css3/flexbox/relayout-image-load-expected.txt:

* css3/flexbox/relayout-image-load.html:

* css3/flexbox/relpos-with-percentage-top-expected.txt: Added.

* css3/flexbox/relpos-with-percentage-top.html: Added.

* css3/flexbox/relpos-with-scrollable-with-abspos-crash-expected.txt: Added.

* css3/flexbox/relpos-with-scrollable-with-abspos-crash.html: Added.

* css3/flexbox/resize-min-content-flexbox-expected.txt: Added.

* css3/flexbox/resize-min-content-flexbox.html: Added.

* css3/flexbox/resources/box-orient-button.js: Added.

(setFlexDirection):

(gebi):

(test):

* css3/flexbox/scrollbars-auto-expected.html: Added.

* css3/flexbox/scrollbars-auto.html: Added.

* css3/flexbox/scrollbars-expected.html: Added.

* css3/flexbox/scrollbars.html: Added.

* css3/flexbox/shrinking-column-flexbox-expected.txt: Added.

* css3/flexbox/shrinking-column-flexbox.html: Added.

* css3/flexbox/stretch-after-sibling-size-change-expected.txt:

* css3/flexbox/stretch-after-sibling-size-change.html:

* css3/flexbox/stretch-input-in-column-expected.html:

* css3/flexbox/stretch-simplified-layout-expected.txt:

* css3/flexbox/stretch-simplified-layout.html:

* css3/flexbox/stretch-table-child-expected.txt: Added.

* css3/flexbox/stretch-table-child.html: Added.

* css3/flexbox/stretched-child-shrink-on-relayout-expected.txt: Added.

* css3/flexbox/stretched-child-shrink-on-relayout.html: Added.

* css3/flexbox/stretching-orthogonal-flows-expected.html: Added.

* css3/flexbox/stretching-orthogonal-flows.html: Added.

* css3/flexbox/style-change-expected.txt:

* css3/flexbox/style-change.html:

* css3/flexbox/text-overflow-on-flexbox-expected.html: Added.

* css3/flexbox/text-overflow-on-flexbox.html: Added.

* css3/flexbox/true-centering-expected.txt:

* css3/flexbox/true-centering.html:

* css3/flexbox/undefined-min-width-expected.txt: Added.

* css3/flexbox/undefined-min-width.html: Added.

* css3/flexbox/vertical-align-do-not-effect-flex-items-expected.html: Added.

* css3/flexbox/vertical-align-do-not-effect-flex-items.html: Added.

* css3/flexbox/vertical-flexbox-percentage-ignored-expected.html: Added.

* css3/flexbox/vertical-flexbox-percentage-ignored.html: Added.

* css3/flexbox/whitespace-in-flexitem-expected.html: Added.

* css3/flexbox/whitespace-in-flexitem.html: Added.

* css3/flexbox/width-change-and-relayout-children-expected.txt:

* css3/flexbox/width-change-and-relayout-children.html:

* css3/flexbox/wrapping-column-dynamic-changes-expected.txt: Added.

* css3/flexbox/wrapping-column-dynamic-changes.html: Added.

* css3/flexbox/writing-modes-expected.txt:

* css3/flexbox/writing-modes.html:

* css3/flexbox/z-index.html:

* resources/check-layout-th.js: Added.

(checkSubtreeExpectedValues):

(checkAttribute):

(assert_tolerance):

(checkExpectedValues):

(window.checkLayout):</pre>

<h3>Modified Paths</h3>

<ul>

<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>

<li><a href="#trunkLayoutTestsTestExpectations">trunk/LayoutTests/TestExpectations</a></li>

<li><a href="#trunkLayoutTestscss3flexboxalignabsolutechildexpectedtxt">trunk/LayoutTests/css3/flexbox/align-absolute-child-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxalignabsolutechildhtml">trunk/LayoutTests/css3/flexbox/align-absolute-child.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxanonymousblockmergecrashhtml">trunk/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxautoheightdynamicexpectedtxt">trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxautoheightdynamichtml">trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxboxsizingexpectedtxt">trunk/LayoutTests/css3/flexbox/box-sizing-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxboxsizingminmaxsizesexpectedtxt">trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxboxsizingminmaxsizeshtml">trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxboxsizinghtml">trunk/LayoutTests/css3/flexbox/box-sizing.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxchildoverflowexpectedhtml">trunk/LayoutTests/css3/flexbox/child-overflow-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxchildoverflowhtml">trunk/LayoutTests/css3/flexbox/child-overflow.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnsautosizeexpectedtxt">trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnsautosizehtml">trunk/LayoutTests/css3/flexbox/columns-auto-size.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnsheightsetviatopbottomexpectedtxt">trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnsheightsetviatopbottomhtml">trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcontentheightwithscrollbarshtml">trunk/LayoutTests/css3/flexbox/content-height-with-scrollbars.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcrossaxisscrollbarexpectedhtml">trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcrossaxisscrollbarhtml">trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcsspropertiesexpectedtxt">trunk/LayoutTests/css3/flexbox/css-properties-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcsspropertieshtml">trunk/LayoutTests/css3/flexbox/css-properties.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcsswgflexmarginnocollapsehtml">trunk/LayoutTests/css3/flexbox/csswg/flex-margin-no-collapse.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxdisplayflexboxsetgetexpectedtxt">trunk/LayoutTests/css3/flexbox/display-flexbox-set-get-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxdisplayflexboxsetgethtml">trunk/LayoutTests/css3/flexbox/display-flexbox-set-get.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalgorithmexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-algorithm-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalgorithmminmaxexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalgorithmminmaxhtml">trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalgorithmwithmarginsexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalgorithmwithmarginshtml">trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalgorithmhtml">trunk/LayoutTests/css3/flexbox/flex-algorithm.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignbaselineexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-baseline-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignbaselinehtml">trunk/LayoutTests/css3/flexbox/flex-align-baseline.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexaligncolumnexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexaligncolumnhtml">trunk/LayoutTests/css3/flexbox/flex-align-column.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignendexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-end-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignendhtml">trunk/LayoutTests/css3/flexbox/flex-align-end.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignmaxexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignmaxhtml">trunk/LayoutTests/css3/flexbox/flex-align-max.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignpercentheightexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-percent-height-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignpercentheighthtml">trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignstretchexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignstretchhtml">trunk/LayoutTests/css3/flexbox/flex-align-stretch.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignverticalwritingmodeexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignverticalwritingmodehtml">trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexalignhtml">trunk/LayoutTests/css3/flexbox/flex-align.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflow2expectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-2-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflow2html">trunk/LayoutTests/css3/flexbox/flex-flow-2.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowautomarginsexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespaceexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespacehtml">trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowautomarginshtml">trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowborderexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowborderhtml">trunk/LayoutTests/css3/flexbox/flex-flow-border.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowinitialexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-initial-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowinitialhtml">trunk/LayoutTests/css3/flexbox/flex-flow-initial.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowmarginsautosizeexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowmarginsautosizehtml">trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowmarginsexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowmarginshtml">trunk/LayoutTests/css3/flexbox/flex-flow-margins.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexfloworientationsexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexfloworientationshtml">trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowoverflowexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowoverflowhtml">trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowpaddingexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowpaddinghtml">trunk/LayoutTests/css3/flexbox/flex-flow-padding.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowhtml">trunk/LayoutTests/css3/flexbox/flex-flow.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemchildoverflowexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemchildoverflowhtml">trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemfirstLinevalidexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemfirstLinevalidhtml">trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexjustifycontentexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-justify-content-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexjustifycontenthtml">trunk/LayoutTests/css3/flexbox/flex-justify-content.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexlonghandparsingexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexlonghandparsinghtml">trunk/LayoutTests/css3/flexbox/flex-longhand-parsing.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexnoflexexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-no-flex-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexnoflexhtml">trunk/LayoutTests/css3/flexbox/flex-no-flex.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexorderhtml">trunk/LayoutTests/css3/flexbox/flex-order.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexpropertyparsingexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexpropertyparsinghtml">trunk/LayoutTests/css3/flexbox/flex-property-parsing.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxbaselinehtml">trunk/LayoutTests/css3/flexbox/flexbox-baseline.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxignorecontainerfirstLetterexpectedtxt">trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxignorecontainerfirstLetterhtml">trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxignorefirstLetterexpectedtxt">trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxignorefirstLetterhtml">trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxignorefirstLineexpectedtxt">trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxignorefirstLinehtml">trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaultexpectedtxt">trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaulthtml">trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemexpectedtxt">trunk/LayoutTests/css3/flexbox/flexitem-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemnomargincollapsingexpectedtxt">trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemnomargincollapsinghtml">trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitempercentheightchangeexpectedtxt">trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitempercentheightchangehtml">trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemstretchimageexpectedtxt">trunk/LayoutTests/css3/flexbox/flexitem-stretch-image-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemstretchimagehtml">trunk/LayoutTests/css3/flexbox/flexitem-stretch-image.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemstretchrangehtml">trunk/LayoutTests/css3/flexbox/flexitem-stretch-range.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemhtml">trunk/LayoutTests/css3/flexbox/flexitem.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxfloatedflexboxexpectedtxt">trunk/LayoutTests/css3/flexbox/floated-flexbox-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxfloatedflexboxhtml">trunk/LayoutTests/css3/flexbox/floated-flexbox.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxfloatedflexitemhtml">trunk/LayoutTests/css3/flexbox/floated-flexitem.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexcrashhtml">trunk/LayoutTests/css3/flexbox/inline-flex-crash.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexcrash2html">trunk/LayoutTests/css3/flexbox/inline-flex-crash2.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexexpectedtxt">trunk/LayoutTests/css3/flexbox/inline-flex-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexhtml">trunk/LayoutTests/css3/flexbox/inline-flex.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexboxignorefirstLineexpectedtxt">trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexboxignorefirstLinehtml">trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinserttextcrashhtml">trunk/LayoutTests/css3/flexbox/insert-text-crash.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxintrinsicminwidthapplieswithfixedwidthexpectedtxt">trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxintrinsicminwidthapplieswithfixedwidthhtml">trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxlinewrappinghtml">trunk/LayoutTests/css3/flexbox/line-wrapping.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxminsizeautoexpectedtxt">trunk/LayoutTests/css3/flexbox/min-size-auto-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxminsizeautohtml">trunk/LayoutTests/css3/flexbox/min-size-auto.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinealigncontentexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-align-content-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinealigncontenthorizontalcolumnexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinealigncontenthorizontalcolumnhtml">trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinealigncontenthtml">trunk/LayoutTests/css3/flexbox/multiline-align-content.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinealignselfexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-align-self-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinealignselfhtml">trunk/LayoutTests/css3/flexbox/multiline-align-self.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinecolumnautoexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-column-auto-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinecolumnautohtml">trunk/LayoutTests/css3/flexbox/multiline-column-auto.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilineexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinejustifycontentexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-justify-content-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinejustifycontenthtml">trunk/LayoutTests/css3/flexbox/multiline-justify-content.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilineminpreferredwidthexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilineminpreferredwidthhtml">trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinereversewrapbaselinehtml">trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinereversewrapoverflowexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinereversewrapoverflowhtml">trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilineshrinktofitexpectedhtml">trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilineshrinktofithtml">trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinehtml">trunk/LayoutTests/css3/flexbox/multiline.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnegativeflexroundingasserthtml">trunk/LayoutTests/css3/flexbox/negative-flex-rounding-assert.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnegativemarginsasserthtml">trunk/LayoutTests/css3/flexbox/negative-margins-assert.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnegativeoverflowexpectedtxt">trunk/LayoutTests/css3/flexbox/negative-overflow-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnegativeoverflowhtml">trunk/LayoutTests/css3/flexbox/negative-overflow.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnestedstretchexpectedtxt">trunk/LayoutTests/css3/flexbox/nested-stretch-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnestedstretchhtml">trunk/LayoutTests/css3/flexbox/nested-stretch.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxorderpaintinghtml">trunk/LayoutTests/css3/flexbox/order-painting.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxorthogonalflexdirectionsexpectedtxt">trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxorthogonalflexdirectionshtml">trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowkeepscrollposexpectedtxt">trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowkeepscrollposhtml">trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentmarginsexpectedtxt">trunk/LayoutTests/css3/flexbox/percent-margins-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentmarginshtml">trunk/LayoutTests/css3/flexbox/percent-margins.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentageheightsexpectedtxt">trunk/LayoutTests/css3/flexbox/percentage-heights-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentageheightshtml">trunk/LayoutTests/css3/flexbox/percentage-heights.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagesizesexpectedtxt">trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagesizesquirksexpectedtxt">trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagesizesquirkshtml">trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagesizeshtml">trunk/LayoutTests/css3/flexbox/percentage-sizes.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxperpendicularwritingmodesinsideflexitemexpectedtxt">trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxperpendicularwritingmodesinsideflexitemhtml">trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpositionabsolutechildexpectedtxt">trunk/LayoutTests/css3/flexbox/position-absolute-child-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpositionabsolutechildhtml">trunk/LayoutTests/css3/flexbox/position-absolute-child.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpositionabsolutechildrenexpectedtxt">trunk/LayoutTests/css3/flexbox/position-absolute-children-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpositionabsolutechildrenhtml">trunk/LayoutTests/css3/flexbox/position-absolute-children.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpreferredwidthsexpectedtxt">trunk/LayoutTests/css3/flexbox/preferred-widths-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpreferredwidthsorthogonalhtml">trunk/LayoutTests/css3/flexbox/preferred-widths-orthogonal.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpreferredwidthshtml">trunk/LayoutTests/css3/flexbox/preferred-widths.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelayoutalignitemsexpectedtxt">trunk/LayoutTests/css3/flexbox/relayout-align-items-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelayoutalignitemshtml">trunk/LayoutTests/css3/flexbox/relayout-align-items.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelayoutimageloadexpectedtxt">trunk/LayoutTests/css3/flexbox/relayout-image-load-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelayoutimageloadhtml">trunk/LayoutTests/css3/flexbox/relayout-image-load.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchaftersiblingsizechangeexpectedtxt">trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchaftersiblingsizechangehtml">trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchinputincolumnexpectedhtml">trunk/LayoutTests/css3/flexbox/stretch-input-in-column-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchsimplifiedlayoutexpectedtxt">trunk/LayoutTests/css3/flexbox/stretch-simplified-layout-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchsimplifiedlayouthtml">trunk/LayoutTests/css3/flexbox/stretch-simplified-layout.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstylechangeexpectedtxt">trunk/LayoutTests/css3/flexbox/style-change-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstylechangehtml">trunk/LayoutTests/css3/flexbox/style-change.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxtruecenteringexpectedtxt">trunk/LayoutTests/css3/flexbox/true-centering-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxtruecenteringhtml">trunk/LayoutTests/css3/flexbox/true-centering.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwidthchangeandrelayoutchildrenexpectedtxt">trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwidthchangeandrelayoutchildrenhtml">trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwritingmodesexpectedtxt">trunk/LayoutTests/css3/flexbox/writing-modes-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwritingmodeshtml">trunk/LayoutTests/css3/flexbox/writing-modes.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxzindexhtml">trunk/LayoutTests/css3/flexbox/z-index.html</a></li>

<li><a href="#trunkLayoutTestsfastreplacedtablepercentheighthtml">trunk/LayoutTests/fast/replaced/table-percent-height.html</a></li>

<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>

<li><a href="#trunkLayoutTestsplatformmacfastreplacedtablepercentheightexpectedtxt">trunk/LayoutTests/platform/mac/fast/replaced/table-percent-height-expected.txt</a></li>

<li><a href="#trunkSourceWebCoreCMakeListstxt">trunk/Source/WebCore/CMakeLists.txt</a></li>

<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>

<li><a href="#trunkSourceWebCoreWebCorexcodeprojprojectpbxproj">trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj</a></li>

<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingGridTrackSizingAlgorithmcpp">trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingGridTrackSizingAlgorithmh">trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.h</a></li>

<li><a href="#trunkSourceWebCorerenderingOrderIteratorcpp">trunk/Source/WebCore/rendering/OrderIterator.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingOrderIteratorh">trunk/Source/WebCore/rendering/OrderIterator.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderBlockcpp">trunk/Source/WebCore/rendering/RenderBlock.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderBlockh">trunk/Source/WebCore/rendering/RenderBlock.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderBlockFlowcpp">trunk/Source/WebCore/rendering/RenderBlockFlow.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderBoxcpp">trunk/Source/WebCore/rendering/RenderBox.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderBoxh">trunk/Source/WebCore/rendering/RenderBox.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderBoxModelObjectcpp">trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderBoxModelObjecth">trunk/Source/WebCore/rendering/RenderBoxModelObject.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderElementcpp">trunk/Source/WebCore/rendering/RenderElement.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderFlexibleBoxcpp">trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderFlexibleBoxh">trunk/Source/WebCore/rendering/RenderFlexibleBox.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderFullScreenh">trunk/Source/WebCore/rendering/RenderFullScreen.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderLayercpp">trunk/Source/WebCore/rendering/RenderLayer.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderListBoxcpp">trunk/Source/WebCore/rendering/RenderListBox.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderTablecpp">trunk/Source/WebCore/rendering/RenderTable.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderTableCellcpp">trunk/Source/WebCore/rendering/RenderTableCell.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderTableSectioncpp">trunk/Source/WebCore/rendering/RenderTableSection.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderTableSectionh">trunk/Source/WebCore/rendering/RenderTableSection.h</a></li>

<li><a href="#trunkSourceWebCorerenderingRenderTextControlcpp">trunk/Source/WebCore/rendering/RenderTextControl.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingstyleRenderStylecpp">trunk/Source/WebCore/rendering/style/RenderStyle.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleh">trunk/Source/WebCore/rendering/style/RenderStyle.h</a></li>

<li><a href="#trunkSourceWebCorestyleRenderTreeUpdatercpp">trunk/Source/WebCore/style/RenderTreeUpdater.cpp</a></li>

</ul>

<h3>Added Paths</h3>

<ul>

<li><a href="#trunkLayoutTestscss3flexboxalignContentapplieswithflexWrapwrapwithsinglelineexpectedtxt">trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxalignContentapplieswithflexWrapwrapwithsinglelinehtml">trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxassertgeneratednewflexboxexpectedtxt">trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxassertgeneratednewflexboxhtml">trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxautoheightwithflexexpectedhtml">trunk/LayoutTests/css3/flexbox/auto-height-with-flex-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxautoheightwithflexhtml">trunk/LayoutTests/css3/flexbox/auto-height-with-flex.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxborderandpaddingabsposexpectedtxt">trunk/LayoutTests/css3/flexbox/border-and-padding-abspos-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxborderandpaddingabsposhtml">trunk/LayoutTests/css3/flexbox/border-and-padding-abspos.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxboxorientbuttonexpectedtxt">trunk/LayoutTests/css3/flexbox/box-orient-button-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxboxorientbuttonhtml">trunk/LayoutTests/css3/flexbox/box-orient-button.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug527039expectedtxt">trunk/LayoutTests/css3/flexbox/bug527039-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug527039html">trunk/LayoutTests/css3/flexbox/bug527039.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug580586expectedtxt">trunk/LayoutTests/css3/flexbox/bug580586-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug580586html">trunk/LayoutTests/css3/flexbox/bug580586.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug604346expectedhtml">trunk/LayoutTests/css3/flexbox/bug604346-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug604346html">trunk/LayoutTests/css3/flexbox/bug604346.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug605682expectedtxt">trunk/LayoutTests/css3/flexbox/bug605682-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug605682html">trunk/LayoutTests/css3/flexbox/bug605682.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug633212expectedtxt">trunk/LayoutTests/css3/flexbox/bug633212-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug633212html">trunk/LayoutTests/css3/flexbox/bug633212.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug646288expectedtxt">trunk/LayoutTests/css3/flexbox/bug646288-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug646288html">trunk/LayoutTests/css3/flexbox/bug646288.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug669714expectedtxt">trunk/LayoutTests/css3/flexbox/bug669714-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxbug669714html">trunk/LayoutTests/css3/flexbox/bug669714.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcanvasdynamicchangeexpectedtxt">trunk/LayoutTests/css3/flexbox/canvas-dynamic-change-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcanvasdynamicchangehtml">trunk/LayoutTests/css3/flexbox/canvas-dynamic-change.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxchangeflexitemintoabsposexpectedtxt">trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxchangeflexitemintoabsposhtml">trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnflexchildwithoverflowscrollexpectedtxt">trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnflexchildwithoverflowscrollhtml">trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnscenterwithmarginsandwrapexpectedhtml">trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnscenterwithmarginsandwraphtml">trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnscenterwithmarginsexpectedhtml">trunk/LayoutTests/css3/flexbox/columns-center-with-margins-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxcolumnscenterwithmarginshtml">trunk/LayoutTests/css3/flexbox/columns-center-with-margins.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxdefinitecrosssizesexpectedtxt">trunk/LayoutTests/css3/flexbox/definite-cross-sizes-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxdefinitecrosssizeshtml">trunk/LayoutTests/css3/flexbox/definite-cross-sizes.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxdefinitemainsizeexpectedtxt">trunk/LayoutTests/css3/flexbox/definite-main-size-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxdefinitemainsizehtml">trunk/LayoutTests/css3/flexbox/definite-main-size.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexcolumnrelayoutassertexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexcolumnrelayoutasserthtml">trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexfactorlessthanoneexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexfactorlessthanonehtml">trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespaceassertexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespaceasserthtml">trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemcontainsstrictexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-item-contains-strict-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexitemcontainsstricthtml">trunk/LayoutTests/css3/flexbox/flex-item-contains-strict.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexonesetsflexbasistozeropxexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexonesetsflexbasistozeropxhtml">trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexorderexpectedhtml">trunk/LayoutTests/css3/flexbox/flex-order-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexshorthandflexbasismiddleexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexshorthandflexbasismiddlehtml">trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxheightwithoverflowautoexpectedtxt">trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxheightwithoverflowautohtml">trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxwithmulticolumnpropertyexpectedhtml">trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxwithmulticolumnpropertyhtml">trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxwordwrapexpectedtxt">trunk/LayoutTests/css3/flexbox/flexbox-wordwrap-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxwordwraphtml">trunk/LayoutTests/css3/flexbox/flexbox-wordwrap.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexboxwrapverticallywidthcalculationexpectedtxt">trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxinlineflexboxwrapverticallywidthcalculationhtml">trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxintrinsicwidthorthogonalwritingmodeexpectedtxt">trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxintrinsicwidthorthogonalwritingmodehtml">trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxlargeflexshrinkassertexpectedtxt">trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxlargeflexshrinkasserthtml">trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmainAxisExtentcrashexpectedtxt">trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmainAxisExtentcrashhtml">trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmaxwidthviolationexpectedtxt">trunk/LayoutTests/css3/flexbox/max-width-violation-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmaxwidthviolationhtml">trunk/LayoutTests/css3/flexbox/max-width-violation.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxminimumsizeimageexpectedtxt">trunk/LayoutTests/css3/flexbox/minimum-size-image-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxminimumsizeimagehtml">trunk/LayoutTests/css3/flexbox/minimum-size-image.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinecolumnoverflowexpectedhtml">trunk/LayoutTests/css3/flexbox/multiline-column-overflow-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilinecolumnoverflowhtml">trunk/LayoutTests/css3/flexbox/multiline-column-overflow.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilineminmaxexpectedtxt">trunk/LayoutTests/css3/flexbox/multiline-min-max-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxmultilineminmaxhtml">trunk/LayoutTests/css3/flexbox/multiline-min-max.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnestedflexboxminsizeautoexpectedtxt">trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnestedflexboxminsizeautohtml">trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnestedorthogonalflexboxrelayoutexpectedhtml">trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxnestedorthogonalflexboxrelayouthtml">trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxorthogonalwritingmodesandintrinsicsizingexpectedtxt">trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxorthogonalwritingmodesandintrinsicsizinghtml">trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowandpaddingexpectedtxt">trunk/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowandpaddinghtml">trunk/LayoutTests/css3/flexbox/overflow-and-padding.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowautodynamicchangesabsposexpectedhtml">trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowautodynamicchangesabsposhtml">trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowautodynamicchangesexpectedhtml">trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowautodynamicchangeshtml">trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowautoresizescorrectlyexpectedtxt">trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxoverflowautoresizescorrectlyhtml">trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentheightchildrenofalignSelfstretchflexitemexpectedtxt">trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentheightchildrenofalignSelfstretchflexitemhtml">trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentageheightinabsposexpectedhtml">trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentageheightinabsposhtml">trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentageheightreplacedelementexpectedtxt">trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentageheightreplacedelementhtml">trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagemaxwidthcrossaxisexpectedtxt">trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagemaxwidthcrossaxishtml">trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagewidthinabsposexpectedhtml">trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxpercentagewidthinabsposhtml">trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelposwithpercentagetopexpectedtxt">trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelposwithpercentagetophtml">trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelposwithscrollablewithabsposcrashexpectedtxt">trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxrelposwithscrollablewithabsposcrashhtml">trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxresizemincontentflexboxexpectedtxt">trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxresizemincontentflexboxhtml">trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxresourcesboxorientbuttonjs">trunk/LayoutTests/css3/flexbox/resources/box-orient-button.js</a></li>

<li><a href="#trunkLayoutTestscss3flexboxscrollbarsautoexpectedhtml">trunk/LayoutTests/css3/flexbox/scrollbars-auto-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxscrollbarsautohtml">trunk/LayoutTests/css3/flexbox/scrollbars-auto.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxscrollbarsexpectedhtml">trunk/LayoutTests/css3/flexbox/scrollbars-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxscrollbarshtml">trunk/LayoutTests/css3/flexbox/scrollbars.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxshrinkingcolumnflexboxexpectedtxt">trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxshrinkingcolumnflexboxhtml">trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchtablechildexpectedtxt">trunk/LayoutTests/css3/flexbox/stretch-table-child-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchtablechildhtml">trunk/LayoutTests/css3/flexbox/stretch-table-child.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchedchildshrinkonrelayoutexpectedtxt">trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchedchildshrinkonrelayouthtml">trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchingorthogonalflowsexpectedhtml">trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxstretchingorthogonalflowshtml">trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxtextoverflowonflexboxexpectedhtml">trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxtextoverflowonflexboxhtml">trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxundefinedminwidthexpectedtxt">trunk/LayoutTests/css3/flexbox/undefined-min-width-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxundefinedminwidthhtml">trunk/LayoutTests/css3/flexbox/undefined-min-width.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxverticalaligndonoteffectflexitemsexpectedhtml">trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxverticalaligndonoteffectflexitemshtml">trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxverticalflexboxpercentageignoredexpectedhtml">trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxverticalflexboxpercentageignoredhtml">trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwhitespaceinflexitemexpectedhtml">trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwhitespaceinflexitemhtml">trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwrappingcolumndynamicchangesexpectedtxt">trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxwrappingcolumndynamicchangeshtml">trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes.html</a></li>

<li><a href="#trunkLayoutTestsresourceschecklayoutthjs">trunk/LayoutTests/resources/check-layout-th.js</a></li>

<li><a href="#trunkSourceWebCorerenderingFlexibleBoxAlgorithmcpp">trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.cpp</a></li>

<li><a href="#trunkSourceWebCorerenderingFlexibleBoxAlgorithmh">trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.h</a></li>

</ul>

<h3>Removed Paths</h3>

<ul>

<li><a href="#trunkLayoutTestscss3flexboxautomarginsexpectedhtml">trunk/LayoutTests/css3/flexbox/auto-margins-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxautomarginshtml">trunk/LayoutTests/css3/flexbox/auto-margins.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexorderexpectedpng">trunk/LayoutTests/css3/flexbox/flex-order-expected.png</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexorderexpectedtxt">trunk/LayoutTests/css3/flexbox/flex-order-expected.txt</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxoverflowautoexpectedhtml">trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto-expected.html</a></li>

<li><a href="#trunkLayoutTestscss3flexboxflexboxoverflowautohtml">trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto.html</a></li>

</ul>

</div>

<div id="patch">

<h3>Diff</h3>

<a id="trunkLayoutTestsChangeLog"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/ChangeLog        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/ChangeLog        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,3 +1,329 @@

</span><ins>+2017-02-27  Dave Hyatt  &lt;hyatt@apple.com&gt;

+

+        Update flexbox to Blink's tip of tree

+        https://bugs.webkit.org/show_bug.cgi?id=168657

+

+        Reviewed by Zalan Bujtas.

+

+        * css3/flexbox/align-absolute-child-expected.txt:

+        * css3/flexbox/align-absolute-child.html:

+        * css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt: Added.

+        * css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html: Added.

+        * css3/flexbox/anonymous-block-merge-crash.html:

+        * css3/flexbox/assert-generated-new-flexbox-expected.txt: Added.

+        * css3/flexbox/assert-generated-new-flexbox.html: Added.

+        * css3/flexbox/auto-height-dynamic-expected.txt:

+        * css3/flexbox/auto-height-dynamic.html:

+        * css3/flexbox/auto-height-with-flex-expected.html: Added.

+        * css3/flexbox/auto-height-with-flex.html: Added.

+        * css3/flexbox/auto-margins-expected.html: Removed.

+        * css3/flexbox/auto-margins.html: Removed.

+        * css3/flexbox/border-and-padding-abspos-expected.txt: Added.

+        * css3/flexbox/border-and-padding-abspos.html: Added.

+        * css3/flexbox/box-orient-button-expected.txt: Added.

+        * css3/flexbox/box-orient-button.html: Added.

+        * css3/flexbox/box-sizing-expected.txt:

+        * css3/flexbox/box-sizing-min-max-sizes-expected.txt:

+        * css3/flexbox/box-sizing-min-max-sizes.html:

+        * css3/flexbox/box-sizing.html:

+        * css3/flexbox/bug527039-expected.txt: Added.

+        * css3/flexbox/bug527039.html: Added.

+        * css3/flexbox/bug580586-expected.txt: Added.

+        * css3/flexbox/bug580586.html: Added.

+        * css3/flexbox/bug604346-expected.html: Added.

+        * css3/flexbox/bug604346.html: Added.

+        * css3/flexbox/bug605682-expected.txt: Added.

+        * css3/flexbox/bug605682.html: Added.

+        * css3/flexbox/bug633212-expected.txt: Added.

+        * css3/flexbox/bug633212.html: Added.

+        * css3/flexbox/bug646288-expected.txt: Added.

+        * css3/flexbox/bug646288.html: Added.

+        * css3/flexbox/bug669714-expected.txt: Added.

+        * css3/flexbox/bug669714.html: Added.

+        * css3/flexbox/canvas-dynamic-change-expected.txt: Added.

+        * css3/flexbox/canvas-dynamic-change.html: Added.

+        * css3/flexbox/change-flexitem-into-abspos-expected.txt: Added.

+        * css3/flexbox/change-flexitem-into-abspos.html: Added.

+        * css3/flexbox/child-overflow-expected.html:

+        * css3/flexbox/child-overflow.html:

+        * css3/flexbox/column-flex-child-with-overflow-scroll-expected.txt: Added.

+        * css3/flexbox/column-flex-child-with-overflow-scroll.html: Added.

+        * css3/flexbox/columns-auto-size.html:

+        * css3/flexbox/columns-center-with-margins-and-wrap-expected.html: Added.

+        * css3/flexbox/columns-center-with-margins-and-wrap.html: Added.

+        * css3/flexbox/columns-center-with-margins-expected.html: Added.

+        * css3/flexbox/columns-center-with-margins.html: Added.

+        * css3/flexbox/columns-height-set-via-top-bottom-expected.txt:

+        * css3/flexbox/columns-height-set-via-top-bottom.html:

+        * css3/flexbox/content-height-with-scrollbars.html:

+        * css3/flexbox/cross-axis-scrollbar-expected.html:

+        * css3/flexbox/cross-axis-scrollbar.html:

+        * css3/flexbox/css-properties-expected.txt:

+        * css3/flexbox/css-properties.html:

+        * css3/flexbox/csswg/flex-margin-no-collapse.html:

+        * css3/flexbox/definite-cross-sizes-expected.txt: Added.

+        * css3/flexbox/definite-cross-sizes.html: Added.

+        * css3/flexbox/definite-main-size-expected.txt: Added.

+        * css3/flexbox/definite-main-size.html: Added.

+        * css3/flexbox/display-flexbox-set-get-expected.txt:

+        * css3/flexbox/display-flexbox-set-get.html:

+        * css3/flexbox/flex-algorithm-expected.txt:

+        * css3/flexbox/flex-algorithm-min-max-expected.txt:

+        * css3/flexbox/flex-algorithm-min-max.html:

+        * css3/flexbox/flex-algorithm-with-margins-expected.txt:

+        * css3/flexbox/flex-algorithm-with-margins.html:

+        * css3/flexbox/flex-algorithm.html:

+        * css3/flexbox/flex-align-baseline-expected.txt:

+        * css3/flexbox/flex-align-baseline.html:

+        * css3/flexbox/flex-align-column-expected.txt:

+        * css3/flexbox/flex-align-column.html:

+        * css3/flexbox/flex-align-end-expected.txt:

+        * css3/flexbox/flex-align-end.html:

+        * css3/flexbox/flex-align-max-expected.txt:

+        * css3/flexbox/flex-align-max.html:

+        * css3/flexbox/flex-align-percent-height-expected.txt:

+        * css3/flexbox/flex-align-percent-height.html:

+        * css3/flexbox/flex-align-stretch-expected.txt:

+        * css3/flexbox/flex-align-stretch.html:

+        * css3/flexbox/flex-align-vertical-writing-mode.html:

+        * css3/flexbox/flex-align.html:

+        * css3/flexbox/flex-column-relayout-assert-expected.txt: Added.

+        * css3/flexbox/flex-column-relayout-assert.html: Added.

+        * css3/flexbox/flex-factor-less-than-one-expected.txt: Added.

+        * css3/flexbox/flex-factor-less-than-one.html: Added.

+        * css3/flexbox/flex-flow-2-expected.txt:

+        * css3/flexbox/flex-flow-2.html:

+        * css3/flexbox/flex-flow-auto-margins-expected.txt:

+        * css3/flexbox/flex-flow-auto-margins-no-available-space-assert-expected.txt: Added.

+        * css3/flexbox/flex-flow-auto-margins-no-available-space-assert.html: Added.

+        * css3/flexbox/flex-flow-auto-margins-no-available-space-expected.txt:

+        * css3/flexbox/flex-flow-auto-margins-no-available-space.html:

+        * css3/flexbox/flex-flow-auto-margins.html:

+        * css3/flexbox/flex-flow-border-expected.txt:

+        * css3/flexbox/flex-flow-border.html:

+        * css3/flexbox/flex-flow-expected.txt:

+        * css3/flexbox/flex-flow-initial-expected.txt:

+        * css3/flexbox/flex-flow-initial.html:

+        * css3/flexbox/flex-flow-margins-auto-size-expected.txt:

+        * css3/flexbox/flex-flow-margins-auto-size.html:

+        * css3/flexbox/flex-flow-margins-expected.txt:

+        * css3/flexbox/flex-flow-margins.html:

+        * css3/flexbox/flex-flow-orientations-expected.txt:

+        * css3/flexbox/flex-flow-orientations.html:

+        * css3/flexbox/flex-flow-overflow-expected.txt:

+        * css3/flexbox/flex-flow-overflow.html:

+        * css3/flexbox/flex-flow-padding-expected.txt:

+        * css3/flexbox/flex-flow-padding.html:

+        * css3/flexbox/flex-flow.html:

+        * css3/flexbox/flex-item-child-overflow-expected.txt:

+        * css3/flexbox/flex-item-child-overflow.html:

+        * css3/flexbox/flex-item-contains-strict-expected.txt: Added.

+        * css3/flexbox/flex-item-contains-strict.html: Added.

+        * css3/flexbox/flex-item-firstLine-valid-expected.txt:

+        * css3/flexbox/flex-item-firstLine-valid.html:

+        * css3/flexbox/flex-justify-content-expected.txt:

+        * css3/flexbox/flex-justify-content.html:

+        * css3/flexbox/flex-longhand-parsing-expected.txt:

+        * css3/flexbox/flex-longhand-parsing.html:

+        * css3/flexbox/flex-no-flex-expected.txt:

+        * css3/flexbox/flex-no-flex.html:

+        * css3/flexbox/flex-one-sets-flex-basis-to-zero-px-expected.txt: Added.

+        * css3/flexbox/flex-one-sets-flex-basis-to-zero-px.html: Added.

+        * css3/flexbox/flex-order-expected.html: Added.

+        * css3/flexbox/flex-order-expected.png: Removed.

+        * css3/flexbox/flex-order-expected.txt: Removed.

+        * css3/flexbox/flex-order.html:

+        * css3/flexbox/flex-property-parsing-expected.txt:

+        * css3/flexbox/flex-property-parsing.html:

+        * css3/flexbox/flex-shorthand-flex-basis-middle-expected.txt: Added.

+        * css3/flexbox/flex-shorthand-flex-basis-middle.html: Added.

+        * css3/flexbox/flexbox-baseline.html:

+        * css3/flexbox/flexbox-height-with-overflow-auto-expected.txt: Added.

+        * css3/flexbox/flexbox-height-with-overflow-auto.html: Added.

+        * css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt:

+        * css3/flexbox/flexbox-ignore-container-firstLetter.html:

+        * css3/flexbox/flexbox-ignore-firstLetter-expected.txt:

+        * css3/flexbox/flexbox-ignore-firstLetter.html:

+        * css3/flexbox/flexbox-ignore-firstLine-expected.txt:

+        * css3/flexbox/flexbox-ignore-firstLine.html:

+        * css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt:

+        * css3/flexbox/flexbox-lines-must-be-stretched-by-default.html:

+        * css3/flexbox/flexbox-overflow-auto-expected.html:

+        * css3/flexbox/flexbox-overflow-auto.html:

+        * css3/flexbox/flexbox-with-multi-column-property-expected.html: Added.

+        * css3/flexbox/flexbox-with-multi-column-property.html: Added.

+        * css3/flexbox/flexbox-wordwrap-expected.txt: Added.

+        * css3/flexbox/flexbox-wordwrap.html: Added.

+        * css3/flexbox/flexitem-expected.txt:

+        * css3/flexbox/flexitem-no-margin-collapsing-expected.txt:

+        * css3/flexbox/flexitem-no-margin-collapsing.html:

+        * css3/flexbox/flexitem-percent-height-change-expected.txt:

+        * css3/flexbox/flexitem-percent-height-change.html:

+        * css3/flexbox/flexitem-stretch-image-expected.txt:

+        * css3/flexbox/flexitem-stretch-image.html:

+        * css3/flexbox/flexitem-stretch-range.html:

+        * css3/flexbox/flexitem.html:

+        * css3/flexbox/floated-flexbox-expected.txt:

+        * css3/flexbox/floated-flexbox.html:

+        * css3/flexbox/floated-flexitem.html:

+        * css3/flexbox/inline-flex-crash.html:

+        * css3/flexbox/inline-flex-crash2.html:

+        * css3/flexbox/inline-flex-expected.txt:

+        * css3/flexbox/inline-flex.html:

+        * css3/flexbox/inline-flexbox-ignore-firstLine-expected.txt:

+        * css3/flexbox/inline-flexbox-ignore-firstLine.html:

+        * css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt: Added.

+        * css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html: Added.

+        * css3/flexbox/insert-text-crash.html:

+        * css3/flexbox/intrinsic-min-width-applies-with-fixed-width-expected.txt:

+        * css3/flexbox/intrinsic-min-width-applies-with-fixed-width.html:

+        * css3/flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt: Added.

+        * css3/flexbox/intrinsic-width-orthogonal-writing-mode.html: Added.

+        * css3/flexbox/large-flex-shrink-assert-expected.txt: Added.

+        * css3/flexbox/large-flex-shrink-assert.html: Added.

+        * css3/flexbox/line-wrapping.html:

+        * css3/flexbox/mainAxisExtent-crash-expected.txt: Added.

+        * css3/flexbox/mainAxisExtent-crash.html: Added.

+        * css3/flexbox/max-width-violation-expected.txt: Added.

+        * css3/flexbox/max-width-violation.html: Added.

+        * css3/flexbox/min-size-auto-expected.txt:

+        * css3/flexbox/min-size-auto.html:

+        * css3/flexbox/minimum-size-image-expected.txt: Added.

+        * css3/flexbox/minimum-size-image.html: Added.

+        * css3/flexbox/multiline-align-content-expected.txt:

+        * css3/flexbox/multiline-align-content-horizontal-column-expected.txt:

+        * css3/flexbox/multiline-align-content-horizontal-column.html:

+        * css3/flexbox/multiline-align-content.html:

+        * css3/flexbox/multiline-align-self-expected.txt:

+        * css3/flexbox/multiline-align-self.html:

+        * css3/flexbox/multiline-column-auto-expected.txt:

+        * css3/flexbox/multiline-column-auto.html:

+        * css3/flexbox/multiline-column-overflow-expected.html: Added.

+        * css3/flexbox/multiline-column-overflow.html: Added.

+        * css3/flexbox/multiline-expected.txt:

+        * css3/flexbox/multiline-justify-content-expected.txt:

+        * css3/flexbox/multiline-justify-content.html:

+        * css3/flexbox/multiline-min-max-expected.txt: Added.

+        * css3/flexbox/multiline-min-max.html: Added.

+        * css3/flexbox/multiline-min-preferred-width-expected.txt:

+        * css3/flexbox/multiline-min-preferred-width.html:

+        * css3/flexbox/multiline-reverse-wrap-baseline.html:

+        * css3/flexbox/multiline-reverse-wrap-overflow-expected.txt:

+        * css3/flexbox/multiline-reverse-wrap-overflow.html:

+        * css3/flexbox/multiline-shrink-to-fit-expected.html:

+        * css3/flexbox/multiline-shrink-to-fit.html:

+        * css3/flexbox/multiline.html:

+        * css3/flexbox/negative-flex-rounding-assert.html:

+        * css3/flexbox/negative-margins-assert.html:

+        * css3/flexbox/negative-overflow-expected.txt:

+        * css3/flexbox/negative-overflow.html:

+        * css3/flexbox/nested-flexbox-min-size-auto-expected.txt: Added.

+        * css3/flexbox/nested-flexbox-min-size-auto.html: Added.

+        * css3/flexbox/nested-orthogonal-flexbox-relayout-expected.html: Added.

+        * css3/flexbox/nested-orthogonal-flexbox-relayout.html: Added.

+        * css3/flexbox/nested-stretch-expected.txt:

+        * css3/flexbox/nested-stretch.html:

+        * css3/flexbox/order-painting.html:

+        * css3/flexbox/orthogonal-flex-directions-expected.txt:

+        * css3/flexbox/orthogonal-flex-directions.html:

+        * css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing-expected.txt: Added.

+        * css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html: Added.

+        * css3/flexbox/overflow-and-padding-expected.txt: Added.

+        * css3/flexbox/overflow-and-padding.html: Added.

+        * css3/flexbox/overflow-auto-dynamic-changes-abspos-expected.html: Added.

+        * css3/flexbox/overflow-auto-dynamic-changes-abspos.html: Added.

+        * css3/flexbox/overflow-auto-dynamic-changes-expected.html: Added.

+        * css3/flexbox/overflow-auto-dynamic-changes.html: Added.

+        * css3/flexbox/overflow-auto-resizes-correctly-expected.txt: Added.

+        * css3/flexbox/overflow-auto-resizes-correctly.html: Added.

+        * css3/flexbox/overflow-keep-scrollpos-expected.txt:

+        * css3/flexbox/overflow-keep-scrollpos.html:

+        * css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item-expected.txt: Added.

+        * css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html: Added.

+        * css3/flexbox/percent-margins-expected.txt:

+        * css3/flexbox/percent-margins.html:

+        * css3/flexbox/percentage-height-in-abspos-expected.html: Added.

+        * css3/flexbox/percentage-height-in-abspos.html: Added.

+        * css3/flexbox/percentage-height-replaced-element-expected.txt: Added.

+        * css3/flexbox/percentage-height-replaced-element.html: Added.

+        * css3/flexbox/percentage-heights-expected.txt:

+        * css3/flexbox/percentage-heights.html:

+        * css3/flexbox/percentage-max-width-cross-axis-expected.txt: Added.

+        * css3/flexbox/percentage-max-width-cross-axis.html: Added.

+        * css3/flexbox/percentage-sizes-expected.txt:

+        * css3/flexbox/percentage-sizes-quirks-expected.txt:

+        * css3/flexbox/percentage-sizes-quirks.html:

+        * css3/flexbox/percentage-sizes.html:

+        * css3/flexbox/percentage-width-in-abspos-expected.html: Added.

+        * css3/flexbox/percentage-width-in-abspos.html: Added.

+        * css3/flexbox/perpendicular-writing-modes-inside-flex-item-expected.txt:

+        * css3/flexbox/perpendicular-writing-modes-inside-flex-item.html:

+        * css3/flexbox/position-absolute-child-expected.txt:

+        * css3/flexbox/position-absolute-child.html:

+        * css3/flexbox/position-absolute-children-expected.txt:

+        * css3/flexbox/position-absolute-children.html:

+        * css3/flexbox/preferred-widths-expected.txt:

+        * css3/flexbox/preferred-widths-orthogonal.html:

+        * css3/flexbox/preferred-widths.html:

+        * css3/flexbox/relayout-align-items-expected.txt:

+        * css3/flexbox/relayout-align-items.html:

+        * css3/flexbox/relayout-image-load-expected.txt:

+        * css3/flexbox/relayout-image-load.html:

+        * css3/flexbox/relpos-with-percentage-top-expected.txt: Added.

+        * css3/flexbox/relpos-with-percentage-top.html: Added.

+        * css3/flexbox/relpos-with-scrollable-with-abspos-crash-expected.txt: Added.

+        * css3/flexbox/relpos-with-scrollable-with-abspos-crash.html: Added.

+        * css3/flexbox/resize-min-content-flexbox-expected.txt: Added.

+        * css3/flexbox/resize-min-content-flexbox.html: Added.

+        * css3/flexbox/resources/box-orient-button.js: Added.

+        (setFlexDirection):

+        (gebi):

+        (test):

+        * css3/flexbox/scrollbars-auto-expected.html: Added.

+        * css3/flexbox/scrollbars-auto.html: Added.

+        * css3/flexbox/scrollbars-expected.html: Added.

+        * css3/flexbox/scrollbars.html: Added.

+        * css3/flexbox/shrinking-column-flexbox-expected.txt: Added.

+        * css3/flexbox/shrinking-column-flexbox.html: Added.

+        * css3/flexbox/stretch-after-sibling-size-change-expected.txt:

+        * css3/flexbox/stretch-after-sibling-size-change.html:

+        * css3/flexbox/stretch-input-in-column-expected.html:

+        * css3/flexbox/stretch-simplified-layout-expected.txt:

+        * css3/flexbox/stretch-simplified-layout.html:

+        * css3/flexbox/stretch-table-child-expected.txt: Added.

+        * css3/flexbox/stretch-table-child.html: Added.

+        * css3/flexbox/stretched-child-shrink-on-relayout-expected.txt: Added.

+        * css3/flexbox/stretched-child-shrink-on-relayout.html: Added.

+        * css3/flexbox/stretching-orthogonal-flows-expected.html: Added.

+        * css3/flexbox/stretching-orthogonal-flows.html: Added.

+        * css3/flexbox/style-change-expected.txt:

+        * css3/flexbox/style-change.html:

+        * css3/flexbox/text-overflow-on-flexbox-expected.html: Added.

+        * css3/flexbox/text-overflow-on-flexbox.html: Added.

+        * css3/flexbox/true-centering-expected.txt:

+        * css3/flexbox/true-centering.html:

+        * css3/flexbox/undefined-min-width-expected.txt: Added.

+        * css3/flexbox/undefined-min-width.html: Added.

+        * css3/flexbox/vertical-align-do-not-effect-flex-items-expected.html: Added.

+        * css3/flexbox/vertical-align-do-not-effect-flex-items.html: Added.

+        * css3/flexbox/vertical-flexbox-percentage-ignored-expected.html: Added.

+        * css3/flexbox/vertical-flexbox-percentage-ignored.html: Added.

+        * css3/flexbox/whitespace-in-flexitem-expected.html: Added.

+        * css3/flexbox/whitespace-in-flexitem.html: Added.

+        * css3/flexbox/width-change-and-relayout-children-expected.txt:

+        * css3/flexbox/width-change-and-relayout-children.html:

+        * css3/flexbox/wrapping-column-dynamic-changes-expected.txt: Added.

+        * css3/flexbox/wrapping-column-dynamic-changes.html: Added.

+        * css3/flexbox/writing-modes-expected.txt:

+        * css3/flexbox/writing-modes.html:

+        * css3/flexbox/z-index.html:

+        * resources/check-layout-th.js: Added.

+        (checkSubtreeExpectedValues):

+        (checkAttribute):

+        (assert_tolerance):

+        (checkExpectedValues):

+        (window.checkLayout):

+

</ins><span class="cx"> 2017-02-28  Alex Christensen  &lt;achristensen@webkit.org&gt;

</span><span class="cx"> 

</span><span class="cx">         Main resource requests need cachePartition

</span></span></pre></div>

<a id="trunkLayoutTestsTestExpectations"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/TestExpectations (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/TestExpectations        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/TestExpectations        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1194,5 +1194,8 @@

</span><span class="cx"> # Test landed disabled in r26904; never enabled

</span><span class="cx"> svg/custom/font-face-fallback.svg [ Skip ]

</span><span class="cx"> 

</span><ins>+# Test disabled until we can fix layout of orthogonal writing mode roots

+fast/table/colspanMinWidth-vertical.html [ Skip ]

+

</ins><span class="cx"> ### END OF -disabled tests

</span><span class="cx"> ########################################

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxalignabsolutechildexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/align-absolute-child-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/align-absolute-child-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/align-absolute-child-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,16 +1,18 @@

</span><del>-PASS beforePosition[key] is afterPosition[key]

-PASS beforePosition[key] is afterPosition[key]

-PASS beforePosition[key] is afterPosition[key]

-PASS beforePosition[key] is afterPosition[key]

-PASS beforePosition[key] is afterPosition[key]

-PASS beforePosition[key] is afterPosition[key]

-PASS beforePosition[key] is afterPosition[key]

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS position of top 

+PASS position of right 

+PASS position of bottom 

+PASS position of left 

+PASS position of width 

+PASS position of height 

+PASS position of toJSON 

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxalignabsolutechildhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/align-absolute-child.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/align-absolute-child.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/align-absolute-child.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -12,8 +12,7 @@

</span><span class="cx">     margin: 10px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

-    -moz-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .relative {

</span><span class="cx">     position: relative;

</span><span class="lines">@@ -60,10 +59,12 @@

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class='flexbox relative align-items-center'&gt;

</span><span class="cx">     &lt;div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20&gt;&lt;/div&gt;

</span><span class="lines">@@ -71,7 +72,7 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;div class='flexbox relative align-items-center'&gt;

</span><span class="cx">     &lt;div data-offset-x=0 data-offset-y=40&gt;&lt;/div&gt;

</span><del>-    &lt;div class='absolute' data-offset-x=20 data-offset-y=0&gt;&lt;/div&gt;

</del><ins>+    &lt;div class='absolute' data-offset-x=0 data-offset-y=40&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div data-offset-x=20 data-offset-y=40&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div class=&quot;absolute&quot; style=&quot;top: 5px; left: 5px&quot; data-offset-x=5 data-offset-y=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -79,7 +80,7 @@

</span><span class="cx"> &lt;div class=&quot;relative&quot;&gt;

</span><span class="cx"> &lt;div class='flexbox align-items-center'&gt;

</span><span class="cx">     &lt;div data-offset-x=10 data-offset-y=40&gt;&lt;/div&gt;

</span><del>-    &lt;div class='absolute' data-offset-x=30 data-offset-y=0&gt;&lt;/div&gt;

</del><ins>+    &lt;div class='absolute' data-offset-x=10 data-offset-y=40&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div data-offset-x=30 data-offset-y=40&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div class=&quot;absolute&quot; style=&quot;top: 5px; left: 5px&quot; data-offset-x=5 data-offset-y=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -87,7 +88,7 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;div class='flexbox relative column rtl'&gt;

</span><span class="cx">     &lt;div data-offset-x=80 data-offset-y=0&gt;&lt;/div&gt;

</span><del>-    &lt;div class='absolute' data-offset-x=80 data-offset-y=20&gt;&lt;/div&gt;

</del><ins>+    &lt;div class='absolute' data-offset-x=80 data-offset-y=0&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div data-offset-x=80 data-offset-y=20&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div class=&quot;absolute&quot; style=&quot;top: 5px; left: 5px&quot; data-offset-x=5 data-offset-y=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -95,11 +96,11 @@

</span><span class="cx"> &lt;div class=&quot;relative&quot;&gt;

</span><span class="cx"> &lt;div class='flexbox wrap-reverse'&gt;

</span><span class="cx">     &lt;div style=&quot;width:90px&quot; data-offset-x=10 data-offset-y=80&gt;&lt;/div&gt;

</span><del>-    &lt;div class=&quot;absolute&quot; data-offset-x=100 data-offset-y=100&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;absolute&quot; data-offset-x=10 data-offset-y=80&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div data-offset-x=10 data-offset-y=30&gt;&lt;/div&gt;

</span><del>-    &lt;div class=&quot;absolute&quot; data-offset-x=30 data-offset-y=50&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;absolute&quot; data-offset-x=10 data-offset-y=80&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div data-offset-x=30 data-offset-y=30&gt;&lt;/div&gt;

</span><del>-    &lt;div class=&quot;absolute&quot; data-offset-x=50 data-offset-y=50&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;absolute&quot; data-offset-x=10 data-offset-y=80&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div class=&quot;absolute&quot; style=&quot;top: 5px; left: 5px&quot; data-offset-x=5 data-offset-y=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -106,33 +107,33 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;div class='flexbox relative'&gt;

</span><span class="cx">     &lt;div style=&quot;margin: auto;&quot; data-offset-x=40 data-offset-y=40&gt;&lt;/div&gt;

</span><del>-    &lt;div class=&quot;absolute&quot; style=&quot;margin: auto;&quot; data-offset-x=100 data-offset-y=0&gt;&lt;/div&gt;

-    &lt;div class=&quot;absolute&quot; style=&quot;margin: auto;&quot; data-offset-x=100 data-offset-y=0&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;absolute&quot; style=&quot;margin: auto;&quot; data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

+    &lt;div class=&quot;absolute&quot; style=&quot;margin: auto;&quot; data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div class=&quot;absolute&quot; style=&quot;margin: auto; top: 5px; left: 5px&quot; data-offset-x=5 data-offset-y=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class='flexbox align-items-stretch relative'&gt;

</span><span class="cx">     &lt;div style=&quot;height: auto&quot; data-offset-x=0 data-offset-y=0 data-expected-height=100&gt;&lt;/div&gt;

</span><del>-    &lt;div class=&quot;absolute&quot; style=&quot;height: auto&quot; data-offset-x=20 data-offset-y=0 data-expected-height=0&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;absolute&quot; style=&quot;height: auto&quot; data-offset-x=0 data-offset-y=0 data-expected-height=0&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div class=&quot;absolute&quot; style=&quot;height: auto; top: 5px; left: 5px&quot; data-offset-x=5 data-offset-y=5 data-expected-height=0&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox wrap relative&quot;&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px;&quot; data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;absolute&quot; data-offset-x=100 data-offset-y=0&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;absolute&quot; data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div style=&quot;width: 50px;&quot; data-offset-x=0 data-offset-y=50&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;absolute&quot; data-offset-x=50 data-offset-y=50&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;absolute&quot; data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div style=&quot;width: 50px;&quot; data-offset-x=50 data-offset-y=50&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;absolute&quot; data-offset-x=100 data-offset-y=50&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;absolute&quot; data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox wrap relative align-items-flex-end&quot;&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px;&quot; data-offset-x=0 data-offset-y=30&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;absolute&quot; data-offset-x=100 data-offset-y=0&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;absolute&quot; data-offset-x=0 data-offset-y=80&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div style=&quot;width: 50px;&quot; data-offset-x=0 data-offset-y=80&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;absolute&quot; data-offset-x=50 data-offset-y=50&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;absolute&quot; data-offset-x=0 data-offset-y=80&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div style=&quot;width: 50px;&quot; data-offset-x=50 data-offset-y=80&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;absolute&quot; data-offset-x=100 data-offset-y=50&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;absolute&quot; data-offset-x=0 data-offset-y=80&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> 

</span><span class="lines">@@ -143,8 +144,11 @@

</span><span class="cx"> var afterPosition = absolute.getBoundingClientRect();

</span><span class="cx"> 

<span class="cx"> // Positioned element should not change position when the height of it's parent flexbox is changed.

</span><del>-for (key in beforePosition)

-    shouldBe('beforePosition[key]', 'afterPosition[key]');

</del><ins>+for (key in beforePosition) {

+    test(function() {

+        assert_equals(beforePosition[key], afterPosition[key]);

+    }, 'position of ' + key);

+}

</ins><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxalignContentapplieswithflexWrapwrapwithsinglelineexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,27 @@

</span><ins>+

+PASS .default, .verticalWriting 1 

+PASS .default, .verticalWriting 2 

+PASS .default, .verticalWriting 3 

+PASS .default, .verticalWriting 4 

+PASS .default, .verticalWriting 5 

+PASS .default, .verticalWriting 6 

+PASS .default, .verticalWriting 7 

+PASS .default, .verticalWriting 8 

+PASS .default, .verticalWriting 9 

+PASS .default, .verticalWriting 10 

+PASS .default, .verticalWriting 11 

+PASS .default, .verticalWriting 12 

+Test for BUG=324178: Chrome incorrectly honors &quot;align-content&quot; in &quot;flex-wrap: wrap&quot; flex containers that only have a single line

+

+This text should be at the top of its container

+This text should be at the top of its container

+This text should be at the top of its container

+This text should be at the top of its container

+This text should be at the top of its container

+This text should be at the top of its container

+This text should be at the left of its container

+This text should be at the left of its container

+This text should be at the left of its container

+This text should be at the left of its container

+This text should be at the left of its container

+This text should be at the left of its container

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxalignContentapplieswithflexWrapwrapwithsinglelinehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,68 @@

</span><ins>+&lt;!doctype html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;style&gt;

+.default {

+    display: flex;

+    flex-wrap: wrap;

+    position: relative;

+    height: 75px;

+    border: 1px solid red;

+    margin: 5px;

+}

+

+.verticalWriting {

+    display: flex;

+    flex-wrap: wrap;

+    position: relative;

+    width: 75px;

+    border: 1px solid red;

+    margin: 5px;

+    writing-mode: vertical-lr;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;/head&gt;

+&lt;body onload=&quot;checkLayout('.default, .verticalWriting'); &quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;p&gt;Test for BUG=324178: Chrome incorrectly honors &quot;align-content&quot; in &quot;flex-wrap: wrap&quot; flex containers that only have a single line&lt;/p&gt;

+&lt;div class=&quot;default&quot; style=&quot;align-content: flex-start&quot;&gt;

+&lt;div data-offset-y=&quot;0&quot;&gt;This text should be at the top of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;default&quot; style=&quot;align-content: flex-end&quot;&gt;

+&lt;div data-offset-y=&quot;0&quot;&gt;This text should be at the top of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;default&quot; style=&quot;align-content: center&quot;&gt;

+&lt;div data-offset-y=&quot;0&quot;&gt;This text should be at the top of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;default&quot; style=&quot;align-content: space-between&quot;&gt;

+&lt;div data-offset-y=&quot;0&quot;&gt;This text should be at the top of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;default&quot; style=&quot;align-content: space-around&quot;&gt;

+&lt;div data-offset-y=&quot;0&quot;&gt;This text should be at the top of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;default&quot; style=&quot;align-content: stretch&quot;&gt;

+&lt;div data-offset-y=&quot;0&quot;&gt;This text should be at the top of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;verticalWriting&quot; style=&quot;align-content: flex-start&quot;&gt;

+&lt;div data-offset-x=&quot;0&quot;&gt;This text should be at the left of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;verticalWriting&quot; style=&quot;align-content: flex-end&quot;&gt;

+&lt;div data-offset-x=&quot;0&quot;&gt;This text should be at the left of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;verticalWriting&quot; style=&quot;align-content: center&quot;&gt;

+&lt;div data-offset-x=&quot;0&quot;&gt;This text should be at the left of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;verticalWriting&quot; style=&quot;align-content: space-between&quot;&gt;

+&lt;div data-offset-x=&quot;0&quot;&gt;This text should be at the left of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;verticalWriting&quot; style=&quot;align-content: space-around&quot;&gt;

+&lt;div data-offset-x=&quot;0&quot;&gt;This text should be at the left of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;verticalWriting&quot; style=&quot;align-content: stretch&quot;&gt;

+&lt;div data-offset-x=&quot;0&quot;&gt;This text should be at the left of its container&lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxanonymousblockmergecrashhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,4 +1,4 @@

</span><del>-&lt;div style=&quot;display:-webkit-flex; display:-moz-flex;&quot;&gt;&lt;div id=&quot;inner&quot;&gt;&lt;/div&gt;If this page doesn't crash then this test passes.&lt;/div&gt;

</del><ins>+&lt;div style=&quot;display:flex;&quot;&gt;&lt;div id=&quot;inner&quot;&gt;&lt;/div&gt;If this page doesn't crash then this test passes.&lt;/div&gt;

</ins><span class="cx"> &lt;script&gt;

</span><span class="cx"> if (window.testRunner)

</span><span class="cx">     testRunner.dumpAsText()

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxassertgeneratednewflexboxexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+Bug 91003: ASSERT(genChild-&gt;isListMarker() || genChild-&gt;style()-&gt;styleType() == FIRST_LETTER) triggered on flex-box content

+

+This test has passed if it doesn't crash or ASSERT.

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxassertgeneratednewflexboxhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/assert-generated-new-flexbox.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,16 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+    &lt;style&gt;

+        div:after {

+            content: 'Generated content wrapped in a flex-box.';

+            display: -webkit-flex;

+        }

+    &lt;/style&gt;

+    &lt;script&gt;

+        if (window.testRunner)

+            testRunner.dumpAsText();

+    &lt;/script&gt;

+    &lt;p&gt;Bug &lt;a href=&quot;https://bugs.webkit.org/show_bug.cgi?id=91003&quot;&gt;91003&lt;/a&gt;: ASSERT(genChild-&gt;isListMarker() || genChild-&gt;style()-&gt;styleType() == FIRST_LETTER) triggered on flex-box content&lt;/p&gt;

+    &lt;p&gt;This test has passed if it doesn't crash or ASSERT.&lt;/p&gt;

+    &lt;div&gt;&lt;/div&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxautoheightdynamicexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/auto-height-dynamic-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,4 @@

</span><del>-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxautoheightdynamichtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -11,22 +11,25 @@

</span><span class="cx">     background-color: blue;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; data-expected-height=0&gt;

</span><del>-    &lt;div class=&quot;flexitem&quot; data-expected-height=0 style=&quot;-webkit-flex: 100px&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;flexitem&quot; data-expected-height=0 style=&quot;flex: 100px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; data-expected-height=0&gt;

</span><del>-    &lt;div class=&quot;flexitem2&quot; data-expected-height=0 style=&quot;-webkit-flex: 100px&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;flexitem2&quot; data-expected-height=0 style=&quot;flex: 100px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> document.querySelector('.flexitem').offsetHeight;

</span><span class="cx"> document.querySelector('.flexitem2').offsetHeight;

</span><del>-document.querySelector('.flexitem').style.webkitFlex = &quot;1&quot;;

-document.querySelector('.flexitem2').style.webkitFlex = &quot;1 auto&quot;;

</del><ins>+document.querySelector('.flexitem').style.flex = &quot;1&quot;;

+document.querySelector('.flexitem2').style.flex = &quot;1 auto&quot;;

</ins><span class="cx"> &lt;/script&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxautoheightwithflexexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/auto-height-with-flex-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/auto-height-with-flex-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/auto-height-with-flex-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+&lt;div style=&quot;border:1px solid purple;&quot;&gt;

+&lt;div&gt;Header&lt;/div&gt;

+&lt;div&gt;Flexible content&lt;br&gt;

+&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxautoheightwithflexhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/auto-height-with-flex.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/auto-height-with-flex.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/auto-height-with-flex.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,6 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;div style=&quot;display: flex; flex-direction: column; border: 1px solid purple;&quot;&gt;

+&lt;div&gt;Header&lt;/div&gt;

+&lt;div style=&quot;flex: 1&quot;&gt;Flexible content&lt;br&gt;

+&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxautomarginsexpectedhtml"></a>

<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/flexbox/auto-margins-expected.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/auto-margins-expected.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/auto-margins-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,37 +0,0 @@

</span><del>-&lt;!DOCTYPE html&gt;

-&lt;html&gt;

-&lt;head&gt;

-&lt;style&gt;

-

-#circles, #circles div {

-    border: 1em solid blue;

-    border-radius:50%;

-    margin: auto;

-}

-

-#circles { width:9em; height:9em; }

-

-&lt;/style&gt;

-&lt;/head&gt;

-&lt;body&gt;

-&lt;p&gt;These tests are from the spec: &lt;a href=&quot;http://dev.w3.org/csswg/css3-flexbox/#auto-margins&quot;&gt;http://dev.w3.org/csswg/css3-flexbox/#auto-margins&lt;/a&gt;.&lt;/p&gt;

-

-&lt;p&gt;A black box should be centered vertically and horizontally.&lt;/p&gt;

-&lt;div style=&quot;width: 4em; height: 4em; background: silver&quot;&gt;

-  &lt;table style=&quot;width: 100%; height: 100%;&quot;&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; font-family: Ahem;&quot;&gt;OK&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

-&lt;/div&gt;

-

-&lt;div style=&quot;width: 4em; height: 4em; margin-top: 10px; background: silver; -webkit-writing-mode: vertical-rl&quot;&gt;

-  &lt;table style=&quot;width: 100%; height: 100%;&quot;&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; font-family: Ahem;&quot;&gt;OK&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

-&lt;/div&gt;

-

-&lt;p&gt;You should see 3 blue concentric circles.&lt;/p&gt;

-&lt;div id=&quot;circles&quot;&gt;

-  &lt;div style=&quot;width: 5em; height: 5em; margin-top: 1em;&quot;&gt;

-    &lt;div style=&quot;width: 1em; height: 1em; margin-top: 1em;&quot;&gt;&lt;/div&gt;

-  &lt;/div&gt;

-&lt;/div&gt;

-

-&lt;p&gt;The computed style of each margin should not be 0.&lt;br&gt;OK: PASS&lt;br&gt;Vertical OK: PASS&lt;/p&gt;

-&lt;/body&gt;

-&lt;/html&gt;

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxautomarginshtml"></a>

<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/flexbox/auto-margins.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/auto-margins.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/auto-margins.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,49 +0,0 @@

</span><del>-&lt;!DOCTYPE html&gt;

-&lt;html&gt;

-&lt;head&gt;

-&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

-&lt;style&gt;

-

-#circles, #circles div {

-    display: -webkit-flex;

-    display: -moz-flex;

-    width: -webkit-calc(100% - 4em);

-    width: calc(100% - 4em);

-    height: -webkit-calc(100% - 4em);

-    height: calc(100% - 4em);

-    border: 1em solid blue;

-    border-radius:50%;

-    margin: auto;

-}

-

-#circles { width:9em; height:9em; }

-

-&lt;/style&gt;

-&lt;/head&gt;

-&lt;body&gt;

-&lt;p&gt;These tests are from the spec: &lt;a href=&quot;http://dev.w3.org/csswg/css3-flexbox/#auto-margins&quot;&gt;http://dev.w3.org/csswg/css3-flexbox/#auto-margins&lt;/a&gt;.&lt;/p&gt;

-

-&lt;p&gt;A black box should be centered vertically and horizontally.&lt;/p&gt;

-&lt;div class=&quot;flexbox&quot; style=&quot;width: 4em; height: 4em; background: silver&quot;&gt;

-  &lt;p id=&quot;ok&quot; style=&quot;margin: auto; font-family: Ahem;&quot;&gt;OK&lt;/p&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;flexbox&quot; style=&quot;width: 4em; height: 4em; margin-top: 10px; background: silver; -webkit-writing-mode: vertical-rl&quot;&gt;

-  &lt;p id=&quot;okVertical&quot; style=&quot;margin: auto; font-family: Ahem;&quot;&gt;OK&lt;/p&gt;

-&lt;/div&gt;

-

-&lt;p&gt;You should see 3 blue concentric circles.&lt;/p&gt;

-&lt;div id=&quot;circles&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

-

-&lt;p id=&quot;log&quot;&gt;The computed style of each margin should not be 0.&lt;/p&gt;

-&lt;script&gt;

-var okStyle = getComputedStyle(document.getElementById('ok'));

-document.getElementById(&quot;log&quot;).innerHTML += &quot;&lt;br&gt;OK: &quot; + 

-    ((parseInt(okStyle.marginTop) &amp;&amp; parseInt(okStyle.marginRight) &amp;&amp; parseInt(okStyle.marginBottom) &amp;&amp; parseInt(okStyle.marginLeft)) ? &quot;PASS&quot; : &quot;FAIL&quot;);

-

-var okVerticalStyle = getComputedStyle(document.getElementById('okVertical'));

-document.getElementById(&quot;log&quot;).innerHTML += &quot;&lt;br&gt;Vertical OK: &quot; + 

-    ((parseInt(okVerticalStyle.marginTop) &amp;&amp; parseInt(okVerticalStyle.marginRight) &amp;&amp; parseInt(okVerticalStyle.marginBottom) &amp;&amp; parseInt(okVerticalStyle.marginLeft)) ? &quot;PASS&quot; : &quot;FAIL&quot;);

-&lt;/script&gt;

-&lt;/body&gt;

-&lt;/html&gt;

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxborderandpaddingabsposexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/border-and-padding-abspos-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/border-and-padding-abspos-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/border-and-padding-abspos-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,18 @@

</span><ins>+

+PASS .rect 1 

+PASS .rect 2 

+PASS .rect 3 

+PASS .rect 4 

+PASS .rect 5 

+PASS .rect 6 

+PASS .rect 7 

+PASS .rect 8 

+PASS .rect 9 

+PASS .rect 10 

+PASS .rect 11 

+PASS .rect 12 

+PASS .rect 13 

+PASS .rect 14 

+PASS .rect 15 

+PASS .rect 16 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxborderandpaddingabsposhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/border-and-padding-abspos.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/border-and-padding-abspos.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/border-and-padding-abspos.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,91 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+.rect {

+  position: absolute;

+  width: 50px;

+  height: 50px;

+  background-color: green;

+}

+

+.flexbox {

+  position: relative;

+  width: 100px;

+  height: 100px;

+  outline: 3px solid black;

+}

+&lt;/style&gt;

+

+&lt;link rel=&quot;stylesheet&quot; href=&quot;resources/flexbox.css&quot;&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.rect')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;padding-top: 10px; padding-left: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;padding-top: 10px; padding-left: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;direction: rtl; padding-top: 10px; padding-right: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;direction: rtl; padding-top: 10px; padding-right: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;hr&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;border-top: 10px solid; border-left: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;border-top: 10px solid; border-left: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;direction: rtl; border-top: 10px solid; border-right: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;direction: rtl; border-top: 10px solid; border-right: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;&quot;&gt;

+  &lt;div class=&quot;rect&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxboxorientbuttonexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/box-orient-button-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/box-orient-button-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/box-orient-button-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,36 @@

</span><ins>+Check if box-orient is working in &lt;button&gt;. See https://bugs.webkit.org/show_bug.cgi?id=25406

+

+reference of horizontal button:

+hello world

+

+reference of vertical button:

+hello

+world

+

+default:

+

+hello

+world

+horizontal:

+

+hello

+world

+vertical:

+

+hello

+world

+default =&gt; vertical:

+

+hello

+world

+vertical =&gt; horizontal:

+

+hello

+world

+

+PASS default height 

+PASS horizontal height 

+PASS vertical height 

+PASS toHorizontal height 

+PASS toVertical height 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxboxorientbuttonhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/box-orient-button.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/box-orient-button.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/box-orient-button.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,75 @@

</span><ins>+&lt;!DOCTYPE HTML PUBLIC &quot;-//IETF//DTD HTML//EN&quot;&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;style type=&quot;text/css&quot;&gt;

+.box {

+  display: -webkit-flex;

+  display: flex;

+}

+.horizontal {

+  -webkit-flex-direction: row;

+  flex-direction: horizontal;

+}

+.vertical {

+  -webkit-flex-direction: column;

+  flex-direction: column;

+}

+.box span {

+  display: -webkit-flex;

+  display: flex;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;/head&gt;

+&lt;body&gt;

+&lt;p id=&quot;description&quot;&gt;Check if box-orient is working in &amp;lt;button&amp;gt;. See https://bugs.webkit.org/show_bug.cgi?id=25406&lt;/p&gt;

+&lt;div id=&quot;log&quot;&gt;&lt;/p&gt;

+&lt;div id=&quot;main&quot;&gt;

+&lt;p&gt;

+reference of horizontal button:&lt;br&gt;

+&lt;button id=&quot;reference_horizontal&quot;&gt;

+  &lt;span&gt;hello&lt;/span&gt;

+  &lt;span&gt;world&lt;/span&gt;

+&lt;/button&gt;

+&lt;p&gt;

+reference of vertical button:&lt;br&gt;

+&lt;button id=&quot;reference_vertical&quot;&gt;

+  &lt;span&gt;hello&lt;/span&gt;&lt;br&gt;

+  &lt;span&gt;world&lt;/span&gt;

+&lt;/button&gt;

+&lt;p&gt;

+default:&lt;br&gt;

+&lt;button id=&quot;default&quot; class=&quot;box&quot;&gt;

+  &lt;span&gt;hello&lt;/span&gt;

+  &lt;span&gt;world&lt;/span&gt;

+&lt;/button&gt;

+&lt;p&gt;

+horizontal:&lt;br&gt;

+&lt;button id=&quot;horizontal&quot; class=&quot;box horizontal&quot;&gt;

+  &lt;span&gt;hello&lt;/span&gt;

+  &lt;span&gt;world&lt;/span&gt;

+&lt;/button&gt;

+&lt;p&gt;

+vertical:&lt;br&gt;

+&lt;button id=&quot;vertical&quot; class=&quot;box vertical&quot;&gt;

+  &lt;span&gt;hello&lt;/span&gt;

+  &lt;span&gt;world&lt;/span&gt;

+&lt;/button&gt;

+&lt;p&gt;

+default =&gt; vertical:&lt;br&gt;

+&lt;button id=&quot;toVertical&quot; class=&quot;box&quot;&gt;

+  &lt;span&gt;hello&lt;/span&gt;

+  &lt;span&gt;world&lt;/span&gt;

+&lt;/button&gt;

+&lt;p&gt;

+vertical =&gt; horizontal:&lt;br&gt;

+&lt;button id=&quot;toHorizontal&quot; class=&quot;box vertical&quot;&gt;

+  &lt;span&gt;hello&lt;/span&gt;

+  &lt;span&gt;world&lt;/span&gt;

+&lt;/button&gt;

+&lt;/div&gt;

+&lt;div id=&quot;console&quot;&gt;&lt;/div&gt;

+&lt;script src=&quot;resources/box-orient-button.js&quot;&gt;&lt;/script&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxboxsizingexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/box-sizing-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/box-sizing-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/box-sizing-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,31 +1,33 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

</ins><span class="cx"> All blue boxes are 100x100px with box-sizing: border-box and 2px border (4px border-top), we expect offsetWidth/Height to be 100x100

</span><span class="cx"> flex-flow: default, orange box has width: 300px

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-flow: default, orange box has width: 400px

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-flow: default, orange box has width: auto

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-flow: default, orange box has width: auto, flex-box has box-sizing: border-box

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-flow: column, red box has height: 300px

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-flow: column, red box has height: 400px

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-flow: column, red box has height: auto

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-box has box-sizing: border-box and flex-wrap: wrap;

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-box has box-sizing: default and flex-wrap: wrap;

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> flex-flow: column, flex-box has box-sizing: border-box, flex items have flex: 1

</span><span class="cx"> 

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxboxsizingminmaxsizesexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,4 @@

</span><del>-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxboxsizingminmaxsizeshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,8 +8,11 @@

</span><span class="cx">     box-sizing: border-box;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">     &lt;div style=&quot;border: 5px solid orange; padding: 5px; max-width: 30px; width: 40px;&quot; data-expected-width=30&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxboxsizinghtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/box-sizing.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/box-sizing.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/box-sizing.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -26,8 +26,11 @@

</span><span class="cx">     padding: 3px;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> All blue boxes are 100x100px with box-sizing: border-box and 2px border (4px border-top), we expect offsetWidth/Height to be &lt;b&gt;100x100&lt;/b&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -80,9 +83,9 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;h3&gt;flex-flow: column, flex-box has box-sizing: border-box, flex items have flex: 1&lt;/h3&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; style=&quot;box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 343px; width: 100px;&quot; data-expected-width=100 data-expected-height=343&gt;

</span><del>-    &lt;div style=&quot;-webkit-flex: 1; -moz-flex: 1&quot; data-expected-height=111&gt;&lt;/div&gt;

-    &lt;div style=&quot;-webkit-flex: 1; -moz-flex: 1&quot; data-expected-height=111&gt;&lt;/div&gt;

-    &lt;div style=&quot;-webkit-flex: 1; -moz-flex: 1&quot; data-expected-height=111&gt;&lt;/div&gt;

</del><ins>+    &lt;div style=&quot;flex: 1;&quot; data-expected-height=111&gt;&lt;/div&gt;

+    &lt;div style=&quot;flex: 1;&quot; data-expected-height=111&gt;&lt;/div&gt;

+    &lt;div style=&quot;flex: 1;&quot; data-expected-height=111&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug527039expectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug527039-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug527039-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug527039-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,18 @@

<ins>+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+Suspendisse eu nunc lectus. Curabitur.

+

+PASS .OuterFlexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug527039html"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug527039.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug527039.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug527039.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,66 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+body,

+html {

+  height: 100%;

+}

+

+.OuterFlexbox {

+  display: flex;

+  flex-direction: column;

+  height: 100%;

+}

+

+.InnerFlexbox {

+  display: flex;

+  flex-direction: column;

+  max-height: 100%;

+  outline: 1px blue solid;

+}

+

+.InnerFlexbox-body {

+  flex: 1 1 auto;

+  overflow-y: hidden;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;update()&quot;&gt;

+

+&lt;div class=&quot;OuterFlexbox&quot; data-expected-height=&quot;250&quot;&gt;

+  &lt;div class=&quot;InnerFlexbox&quot; data-expected-height=&quot;250&quot;&gt;

+       &lt;div class=&quot;InnerFlexbox-body&quot; data-expected-height=&quot;250&quot;&gt;

+         &lt;ul&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+           &lt;li&gt;Suspendisse eu nunc lectus. Curabitur.&lt;/li&gt;

+         &lt;/ul&gt;

+       &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+function update() {

+  document.body.offsetHeight;

+  document.body.style.height = '50px';

+  document.body.offsetHeight;

+  document.body.style.height = '250px';

+  document.body.offsetHeight;

+  checkLayout('.OuterFlexbox');

+}

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug580586expectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug580586-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug580586-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug580586-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

</span><ins>+

+PASS section 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug580586html"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug580586.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug580586.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug580586.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,58 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+body {

+  height: 200vh;

+}

+

+section {

+    height: 400px;

+    display: flex;

+    flex-direction: column;

+}

+

+.side-menu {

+    border: 1px solid black;

+    width: 200px;

+    display: flex;

+    flex-direction: column;

+}

+

+.box-body {

+    height: 1000px;

+    flex: 1 1 0%;

+    display: flex;

+    min-height: 0px;

+}

+

+.list {

+    list-style: none;

+    padding: 0;

+    overflow: auto;

+    flex: 1 1 0;

+}

+

+li {

+    height: 20px;

+    background-color: red;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('section')&quot;&gt;

+

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;section&gt;

+  &lt;div class=&quot;box-body&quot;&gt;

+    &lt;div class=&quot;side-menu&quot;&gt;

+      &lt;ul class=&quot;list&quot;&gt;

+        &lt;li data-expected-width=&quot;200&quot;&gt;

+        &lt;/li&gt;

+      &lt;/ul&gt;

+    &lt;/div&gt;

+    &lt;div style=&quot;height: 1000px;&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/section&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug604346expectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug604346-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug604346-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug604346-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,19 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+.fixed-pos{

+  position: fixed;

+  background: green;

+}

+&lt;/style&gt;

+

+&lt;p&gt;You should see no red.&lt;/p&gt;

+

+&lt;div class=&quot;fixed-pos&quot; &gt;

+  &lt;div&gt;

+    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

+  &lt;/div&gt;

+  &lt;div&gt;

+    YYYY

+  &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug604346html"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug604346.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug604346.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug604346.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,41 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+.fixed-pos{

+  position: fixed;

+  background: red;

+}

+

+.inner {

+  width: 100%;

+  background: green;

+}

+

+.flexbox {

+  display: flex;

+}

+

+.column {

+  flex-direction: column;

+}

+&lt;/style&gt;

+

+&lt;p&gt;You should see no red.&lt;/p&gt;

+

+&lt;div class=&quot;fixed-pos&quot; &gt;

+  &lt;div class=&quot;flexbox column&quot;&gt;

+

+    &lt;div class=&quot;flexbox&quot;&gt;

+      &lt;div class=&quot;inner&quot;&gt;

+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

+      &lt;/div&gt;

+    &lt;/div&gt;

+

+    &lt;div class=&quot;flexbox&quot;&gt;

+      &lt;div class=&quot;inner&quot;&gt;

+        YYYY

+      &lt;/div&gt;

+    &lt;/div&gt;

+

+  &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug605682expectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug605682-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug605682-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug605682-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+

+PASS .flexbox 1 

+Below there should be a olive square centered inside a papayawhip box.

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug605682html"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug605682.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug605682.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug605682.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,50 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;style&gt;

+html, body {

+  margin: 0;

+  padding: 0;

+}

+

+.flexbox {

+  display: flex;

+  background: papayawhip;

+  width: 800px;

+}

+

+.flexbox &gt; div {

+  width: 300px;

+  height: 300px;

+  margin: 0 auto;

+  background: olive;

+}

+

+.flexbox &gt; div &gt; div {

+  overflow-y: auto;

+  height: 50px;

+  visibility: hidden;

+}

+

+.elm {

+  height: 10px;

+}

+

+&lt;/style&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;p&gt;Below there should be a olive square &lt;em&gt;centered&lt;/em&gt; inside a papayawhip box.&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot;&gt;

+    &lt;div data-offset-x=&quot;250&quot;&gt;

+        &lt;div&gt;

+            &lt;div id=&quot;elm&quot;&gt;&lt;/div&gt;

+        &lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

+&lt;script&gt;

+    document.body.offsetTop;

+    document.getElementById(&quot;elm&quot;).style.height = &quot;800px&quot;;

+    checkLayout('.flexbox');

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug633212expectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug633212-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug633212-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug633212-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

</span><ins>+

+PASS sizes 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug633212html"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug633212.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug633212.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug633212.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,51 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+html, body {

+  margin: 0;

+}

+

+#flexbox {

+    display: flex;

+    flex-direction: column;

+}

+

+#flexitem {

+    outline: 1px solid black;

+    width: 100%;

+    height: 166px;

+    position: relative;

+    background: green;

+}

+

+#abspos {

+    position: absolute;

+}

+

+#container {

+    background: red;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+

+&lt;script&gt;

+function runTest() {

+  test(function() {

+    assert_equals(document.getElementById('flexbox').offsetWidth,

+      document.getElementById('flexitem').offsetWidth);

+  }, &quot;sizes&quot;);

+}

+&lt;/script&gt;

+

+&lt;body onload=&quot;runTest()&quot;&gt;

+&lt;div id=&quot;container&quot;&gt;

+  &lt;div id=&quot;flexbox&quot;&gt;

+      &lt;div id=&quot;flexitem&quot;&gt;

+          &lt;div id=&quot;abspos&quot;&gt;

+              &lt;svg&gt;&lt;/svg&gt;

+          &lt;/div&gt;

+      &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug646288expectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug646288-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug646288-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug646288-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,6 @@

</span><ins>+Tests that there's no vertical scrollbar for this content

+

+http://www.ispeech.org/p/generic/getaudio?text=http%3A%2F%2Fwww.ispeech.org%2Ftext.to.speech%3Flink%3Dhttp%253A%252F%252Fwww.ispeech.org%252Ftext.to.speech%253Fvoice%253Dusenglishfemale%2526action%253Dconvert%2526speed%253D0%2526text%253DType%252520some%252520text%252520and%252520click%252520play%2C&amp;voice=usenglishfemale&amp;speed=0&amp;action=convert

+

+PASS #list-wrapper 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug646288html"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug646288.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug646288.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug646288.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,31 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+body { width: 800px; }

+

+* { min-width: 0; min-height: 0; }

+

+#list-wrapper {

+  display: flex;

+  flex-direction: column;

+}

+

+#player-list-wrapper {

+  flex-grow: 1;

+  overflow: auto;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;p&gt;Tests that there's no vertical scrollbar for this content&lt;/p&gt;

+

+&lt;body onload=&quot;checkLayout('#list-wrapper')&quot;&gt;

+  &lt;div id=&quot;list-wrapper&quot; data-expected-width=&quot;800&quot;&gt;

+    &lt;div id=&quot;player-list-wrapper&quot; data-expected-width=&quot;800&quot;&gt;

+      &lt;div data-expected-width=&quot;800&quot;&gt;http://www.ispeech.org/p/generic/getaudio?text=http%3A%2F%2Fwww.ispeech.org%2Ftext.to.speech%3Flink%3Dhttp%253A%252F%252Fwww.ispeech.org%252Ftext.to.speech%253Fvoice%253Dusenglishfemale%2526action%253Dconvert%2526speed%253D0%2526text%253DType%252520some%252520text%252520and%252520click%252520play%2C&amp;amp;voice=usenglishfemale&amp;amp;speed=0&amp;amp;action=convert&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+

+&lt;/body&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug669714expectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug669714-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug669714-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug669714-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,16 @@

<ins>+XXX and YYY should be on separate lines and not overlap, i.e. the height of .flex should not be 0.

+

+XXX

+YYY

+

+FAIL #container 1 assert_equals: 

+&lt;div class=&quot;layout-column&quot; id=&quot;container&quot;&gt;

+    &lt;div class=&quot;layout-row&quot;&gt;

+      &lt;div class=&quot;layout-column&quot;&gt;

+        &lt;div class=&quot;flex&quot; data-expected-height=&quot;18&quot;&gt;XXX&lt;span id=&quot;relpos&quot;&gt; &lt;/span&gt;&lt;/div&gt;

+        &lt;div&gt;YYY&lt;/div&gt;

+      &lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

+height expected 18 but got 0

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxbug669714html"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/bug669714.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/bug669714.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/bug669714.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,34 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+html { line-height: 1; font-size: 18px; }

+#relpos { position: relative; top: 1px; }

+.flex { flex: 1; }

+.flex { min-height: 0; }

+.layout, .layout-column, .layout-row { display: flex; }

+.layout-column { flex-direction: column; }

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;script&gt;

+function update() {

+  document.body.offsetHeight;

+  document.getElementById(&quot;relpos&quot;).innerText = &quot; &quot;;

+  checkLayout(&quot;#container&quot;);

+}

+&lt;/script&gt;

+

+&lt;body onload=&quot;update();&quot;&gt;

+&lt;p&gt;XXX and YYY should be on separate lines and not overlap, i.e. the height of

+.flex should not be 0.&lt;/p&gt;

+&lt;div class=&quot;layout-column&quot; id=&quot;container&quot;&gt;

+    &lt;div class=&quot;layout-row&quot;&gt;

+      &lt;div class=&quot;layout-column&quot;&gt;

+        &lt;div class=&quot;flex&quot; data-expected-height=&quot;18&quot;&gt;XXX&lt;span id=&quot;relpos&quot;&gt;&lt;/span&gt;&lt;/div&gt;

+        &lt;div&gt;YYY&lt;/div&gt;

+      &lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcanvasdynamicchangeexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/canvas-dynamic-change-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/canvas-dynamic-change-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/canvas-dynamic-change-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

</span><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcanvasdynamicchangehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/canvas-dynamic-change.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/canvas-dynamic-change.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/canvas-dynamic-change.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,31 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.red {

+  height: 400px;

+  background: red;

+}

+canvas {

+  background: green;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;div class=&quot;red&quot;&gt;

+  &lt;div class=&quot;flexbox column&quot;&gt;

+    &lt;canvas id=&quot;canvas&quot; data-expected-height=&quot;400&quot;&gt;&lt;/canvas&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+var canvas = document.getElementById('canvas');

+

+requestAnimationFrame(function() {

+  canvas.height = 400;

+  checkLayout('.flexbox');

+});

+

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxchangeflexitemintoabsposexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

</span><ins>+

+PASS #flex 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxchangeflexitemintoabsposhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/change-flexitem-into-abspos.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,39 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+#flex {

+  display: flex;

+  position: relative;

+  background: red;

+  width: 500px;

+  height: 200px;

+}

+

+#item {

+  background: green;

+  left: 0;

+  right: 0;

+  top: 0;

+  bottom: 0;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;script&gt;

+function update() {

+  var item = document.getElementById(&quot;item&quot;);

+  item.offsetHeight;

+  item.style.position = &quot;absolute&quot;;

+  item.offsetHeight;

+  checkLayout(&quot;#flex&quot;);

+}

+&lt;/script&gt;

+

+&lt;body onload=&quot;update();&quot;&gt;

+

+&lt;div id=&quot;flex&quot;&gt;

+  &lt;div id=&quot;item&quot; data-expected-width=&quot;500&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxchildoverflowexpectedhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/child-overflow-expected.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/child-overflow-expected.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/child-overflow-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -34,11 +34,6 @@

</span><span class="cx">     &lt;p&gt;Scrollbars should work in all the flexboxes. Each row should be aligned

</span><span class="cx">     to the same corner.&lt;/p&gt;

</span><span class="cx"> 

</span><del>-    &lt;div class=&quot;container bottomLeft&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div class=&quot;container bottomLeft&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div class=&quot;container bottomLeft&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div class=&quot;container bottomLeft&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;br&gt;

</del><span class="cx">     &lt;div class=&quot;container topRight&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div class=&quot;container topRight&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div class=&quot;container topRight&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxchildoverflowhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/child-overflow.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/child-overflow.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/child-overflow.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -10,19 +10,15 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

-

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox {

</span><span class="lines">@@ -54,7 +50,7 @@

</span><span class="cx">     to the same corner.&lt;/p&gt;

</span><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;script&gt;

</span><del>-var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-tb'];

</del><ins>+var writingModes = ['vertical-rl', 'vertical-lr', 'horizontal-tb'];

</ins><span class="cx"> var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> writingModes.forEach(function(writingMode) {

</span><span class="cx">     flexDirections.forEach(function(flexDirection) {

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnflexchildwithoverflowscrollexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,4 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnflexchildwithoverflowscrollhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/column-flex-child-with-overflow-scroll.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,35 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+div {

+    box-sizing: border-box;

+}

+

+.scroll {

+    overflow: scroll;

+}

+

+.box {

+    width: 100px;

+    height: 75px;

+    padding: 5px;

+    border: 2px solid red;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;box&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;75&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;box scroll&quot; id=&quot;box2&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;75&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column-reverse&quot;&gt;

+  &lt;div class=&quot;box&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;75&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;box scroll&quot; id=&quot;box4&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;75&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins><span class="cx">\ No newline at end of file

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnsautosizeexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/columns-auto-size-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,11 +1,27 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+FAIL .flexbox 1 assert_equals: 

+&lt;div class=&quot;flexbox column vertical&quot; style=&quot;margin-left: 100px;&quot;&gt;

+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;20&quot; style=&quot;min-width: 0; flex: 1;&quot;&gt;&lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;20&quot; class=&quot;child-div&quot; style=&quot;width: 50px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;0&quot; data-offset-x=&quot;20&quot; style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;10&quot; style=&quot;width: 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 auto;&quot;&gt;&lt;div style=&quot;width: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+width expected 50 but got 0

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+FAIL .flexbox 10 assert_equals: 

+&lt;div class=&quot;flexbox column horizontal&quot;&gt;

+  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;height: 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 1 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; style=&quot;min-height: 0; flex: 1;&quot;&gt;&lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; class=&quot;child-div&quot; style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+height expected 10 but got 0

+PASS .flexbox 11 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnsautosizehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/columns-auto-size.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-auto-size.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/columns-auto-size.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -18,7 +18,7 @@

</span><span class="cx">     width: 100%;

</span><span class="cx"> }

</span><span class="cx"> .vertical {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx">     height: 50px;

</span><span class="cx"> }

</span><span class="cx"> .vertical div {

</span><span class="lines">@@ -41,10 +41,13 @@

</span><span class="cx">     background-color: yellow;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 10px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;height: 10px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot;&gt;&lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -51,14 +54,14 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- The last div is sized to 0 because there is no available space, however its child overflows. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1; -moz-flex: 1&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;height: 10px;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;-webkit-flex: 1 auto; -moz-flex: 1 auto&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; style=&quot;min-height: 0; -webkit-flex: 1; -moz-flex: 1&quot;&gt;&lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; class=&quot;child-div&quot; style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 1 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; style=&quot;min-height: 0; flex: 1;&quot;&gt;&lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; class=&quot;child-div&quot; style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px; margin-top: 10px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 1 0 10px; margin-top: 10px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; style=&quot;height: 10px; margin-bottom: 20px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-height=&quot;20&quot; data-offset-y=&quot;50&quot; style=&quot;padding-top: 10px&quot;&gt;&lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;60&quot; style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -66,29 +69,29 @@

</span><span class="cx"> &lt;!-- Same as previous test case but with a justify-content set.  Since there's no

</span><span class="cx">      available space, it should layout the same. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal justify-content-space-between&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px; margin-top: 10px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 1 0 10px; margin-top: 10px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;20&quot; style=&quot;height: 10px; margin-bottom: 20px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-height=&quot;20&quot; data-offset-y=&quot;50&quot; style=&quot;padding-top: 10px&quot;&gt;&lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;60&quot; style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot; data-expected-height=&quot;20&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 0 1 auto; -moz-flex: 0 1 auto&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;-webkit-flex: 0 2 auto; -moz-flex: 0 2 auto&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 0 1 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 0 2 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot; style=&quot;min-height: 10px&quot; data-expected-height=&quot;20&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 0 1 auto; -moz-flex: 0 1 auto&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;-webkit-flex: 0 2 auto; -moz-flex: 0 2 auto&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 0 1 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 0 2 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot; style=&quot;min-height: 5px; max-height: 17px;&quot; data-expected-height=&quot;17&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;9&quot; data-offset-y=&quot;0&quot; style=&quot;min-height: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;8&quot; data-offset-y=&quot;9&quot; style=&quot;min-height: 0; -webkit-flex: 0 2 auto; -moz-flex: 0 2 auto&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;9&quot; data-offset-y=&quot;0&quot; style=&quot;min-height: 0; flex: 0 1 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;8&quot; data-offset-y=&quot;9&quot; style=&quot;min-height: 0; flex: 0 2 auto;&quot;&gt;&lt;div style=&quot;height: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot; style=&quot;min-height: 5px; max-height: 30px; padding-top: 1px; padding-bottom: 2px;&quot; data-expected-height=&quot;33&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;15&quot; data-offset-y=&quot;1&quot; style=&quot;min-height: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto&quot;&gt;&lt;div style=&quot;height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;15&quot; data-offset-y=&quot;16&quot; style=&quot;min-height: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto&quot;&gt;&lt;div style=&quot;height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;15&quot; data-offset-y=&quot;1&quot; style=&quot;min-height: 0; flex: 0 1 auto;&quot;&gt;&lt;div style=&quot;height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;15&quot; data-offset-y=&quot;16&quot; style=&quot;min-height: 0; flex: 0 1 auto;&quot;&gt;&lt;div style=&quot;height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column horizontal&quot;&gt;

</span><span class="lines">@@ -96,7 +99,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column vertical&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;20&quot; style=&quot;-webkit-flex: 1 0 10px; -moz-flex: 1 0 10px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;20&quot; style=&quot;flex: 1 0 10px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;10&quot; style=&quot;width: 10px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;0&quot;&gt;&lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;0&quot; style=&quot;width: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -103,10 +106,10 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- The first div overflows to the left, so give it a margin-left so we can see box it paints. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column vertical&quot; style=&quot;margin-left: 100px;&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;20&quot; style=&quot;min-width: 0; -webkit-flex: 1; -moz-flex: 1&quot;&gt;&lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;20&quot; class=&quot;child-div&quot; style=&quot;width: 50px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;0&quot; data-offset-x=&quot;20&quot; style=&quot;-webkit-flex: 1; -moz-flex: 1&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;20&quot; style=&quot;min-width: 0; flex: 1;&quot;&gt;&lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;20&quot; class=&quot;child-div&quot; style=&quot;width: 50px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;0&quot; data-offset-x=&quot;20&quot; style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;10&quot; style=&quot;width: 10px;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 auto; -moz-flex: 1 auto&quot;&gt;&lt;div style=&quot;width: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;10&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 auto;&quot;&gt;&lt;div style=&quot;width: 10px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnscenterwithmarginsandwrapexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,38 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+ &lt;style&gt;

+    .flexbox {

+      border: 1px solid black;

+      width: 400px;

+      height: 200px;

+    }

+    .item1 {

+      background: lightblue;

+    }

+    .item2 {

+      background: lime;

+    }

+  &lt;/style&gt;

+&lt;/head&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flexbox column wrap&quot;&gt;

+    &lt;div class=&quot;item1 align-self-center&quot;&gt;centeredWithMargins&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnscenterwithmarginsandwraphtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/columns-center-with-margins-and-wrap.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,39 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+ &lt;style&gt;

+    .flexbox {

+      border: 1px solid black;

+      width: 400px;

+      height: 200px;

+    }

+    .item1 {

+      margin: 0 auto;

+      background: lightblue;

+    }

+    .item2 {

+      background: lime;

+    }

+  &lt;/style&gt;

+&lt;/head&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flexbox column wrap&quot;&gt;

+    &lt;div class=&quot;item1&quot;&gt;centeredWithMargins&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnscenterwithmarginsexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/columns-center-with-margins-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-center-with-margins-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/columns-center-with-margins-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,31 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+ &lt;style&gt;

+    .flexbox {

+      border: 1px solid black;

+      width: 400px;

+      height: 200px;

+    }

+    .item1 {

+      background: lightblue;

+    }

+    .item2 {

+      background: lime;

+    }

+  &lt;/style&gt;

+&lt;/head&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flexbox column&quot;&gt;

+    &lt;div class=&quot;item1 align-self-center&quot;&gt;centeredWithMargins&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div style=&quot;writing-mode: vertical-lr;&quot;&gt;

+    &lt;div class=&quot;flexbox column&quot;&gt;

+      &lt;div class=&quot;item1 align-self-center&quot;&gt;centeredWithMargins&lt;/div&gt;

+      &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnscenterwithmarginshtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/columns-center-with-margins.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-center-with-margins.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/columns-center-with-margins.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,36 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+ &lt;style&gt;

+    .flexbox {

+      border: 1px solid black;

+      width: 400px;

+      height: 200px;

+    }

+    .item1 {

+      margin: 0 auto;

+      background: lightblue;

+    }

+    .item1v {

+      margin: auto 0;

+      background: lightblue;

+    }

+    .item2 {

+      background: lime;

+    }

+  &lt;/style&gt;

+&lt;/head&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flexbox column&quot;&gt;

+    &lt;div class=&quot;item1&quot;&gt;centeredWithMargins&lt;/div&gt;

+    &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div style=&quot;writing-mode: vertical-lr;&quot;&gt;

+    &lt;div class=&quot;flexbox column&quot;&gt;

+      &lt;div class=&quot;item1v&quot;&gt;centeredWithMargins&lt;/div&gt;

+      &lt;div class=&quot;item2 align-self-center&quot;&gt;centeredWithAlignSelf&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnsheightsetviatopbottomexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,4 @@

</span><del>-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcolumnsheightsetviatopbottomhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -9,7 +9,7 @@

</span><span class="cx">     border: 2px solid orange;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    -webkit-flex-direction: column;

</del><ins>+    flex-direction: column;

</ins><span class="cx">     position: absolute;

</span><span class="cx">     top: 0;

</span><span class="cx">     right: 0;

</span><span class="lines">@@ -24,13 +24,16 @@

</span><span class="cx">     background-color: lightgreen;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container&quot;&gt;

</span><span class="cx">     &lt;div data-expected-height=100 class=&quot;flexbox column&quot;&gt;

</span><span class="cx">         &lt;div data-expected-height=30 data-expected-width=80 style=&quot;height: 30px&quot;&gt;&lt;/div&gt;

</span><del>-        &lt;div data-expected-height=50 data-expected-width=80 style=&quot;-webkit-flex: 1; -moz-flex: 1&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div data-expected-height=50 data-expected-width=80 style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -37,7 +40,7 @@

</span><span class="cx"> &lt;div class=&quot;container&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox column wrap&quot;&gt;

</span><span class="cx">         &lt;div data-expected-height=50 data-expected-width=40 style=&quot;height: 50px&quot;&gt;&lt;/div&gt;

</span><del>-        &lt;div data-expected-height=80 data-expected-width=40 style=&quot;-webkit-flex: 1 50px; -moz-flex: 1 50px&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div data-expected-height=80 data-expected-width=40 style=&quot;flex: 1 50px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcontentheightwithscrollbarshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/content-height-with-scrollbars.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/content-height-with-scrollbars.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/content-height-with-scrollbars.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,8 +8,8 @@

</span><span class="cx">     overflow: scroll;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><del>-    -webkit-flex: none;

</del><span class="cx">     flex: none;

</span><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: lightgreen;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcrossaxisscrollbarexpectedhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar-expected.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar-expected.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -26,13 +26,13 @@

</span><span class="cx">     &lt;div style=&quot;width: 100px; height: 10px; position: relative; z-index: -1&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; -webkit-writing-mode: vertical-lr; top: 0; left: 150px&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; writing-mode: vertical-lr; top: 0; left: 150px&quot;&gt;

</ins><span class="cx">     &lt;div style=&quot;width: 100px&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div style=&quot;overflow-y: scroll&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div style=&quot;width: 10px; position: relative; z-index: -1&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; -webkit-writing-mode: vertical-lr; top: 0; left: 300px&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; writing-mode: vertical-lr; top: 0; left: 300px&quot;&gt;

</ins><span class="cx">     &lt;div style=&quot;width: 100px&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div style=&quot;overflow-y: scroll&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div style=&quot;width: 10px; position: relative; z-index: -1&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -50,7 +50,7 @@

</span><span class="cx">     &lt;div style=&quot;width: 100px; height: 10px; position: relative; z-index: -1&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; -webkit-writing-mode: vertical-lr; top: 100px; left: 150px&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; writing-mode: vertical-lr; top: 100px; left: 150px&quot;&gt;

</ins><span class="cx">     &lt;div style=&quot;width: 90px; overflow-y: scroll&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div style=&quot;width: 10px; position: relative; z-index: -1&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -60,7 +60,7 @@

</span><span class="cx">     &lt;div style=&quot;width: 100px; height: 10px; position: relative; z-index: -1&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; -webkit-writing-mode: vertical-lr; top: 100px; left: 450px&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 50px; writing-mode: vertical-lr; top: 100px; left: 450px&quot;&gt;

</ins><span class="cx">     &lt;div style=&quot;width: 100px&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div style=&quot;overflow-y: scroll&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div style=&quot;width: 10px; position: relative; z-index: -1&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcrossaxisscrollbarhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -12,15 +12,14 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .column &gt; div {

</span><del>-    -webkit-flex: none;

</del><span class="cx">     flex: none;

</span><span class="cx">     background-color: green;

</span><span class="cx">     width: 100px;

</span><span class="lines">@@ -29,7 +28,6 @@

</span><span class="cx"> 

</span><span class="cx"> .row &gt; div {

</span><span class="cx">     background-color: green;

</span><del>-    -webkit-flex: 1;

</del><span class="cx">     flex: 1;

</span><span class="cx">     height: 50px;

</span><span class="cx">     min-height: 0;

</span><span class="lines">@@ -36,7 +34,6 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-lr &gt; .column &gt; div {

</span><del>-    -webkit-flex: none;

</del><span class="cx">     flex: none;

</span><span class="cx">     height: 50px;

</span><span class="cx">     width: 20px;

</span><span class="lines">@@ -43,7 +40,6 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-lr &gt; .row &gt; div {

</span><del>-    -webkit-flex: 1;

</del><span class="cx">     flex: 1;

</span><span class="cx">     width: 100px;

</span><span class="cx"> }

</span><span class="lines">@@ -137,7 +133,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;!-- FIXME: Add tests for horizontal-bt and vertical-rl.  Setting the logical

</del><ins>+&lt;!-- FIXME: Add tests for vertical-rl.  Setting the logical

</ins><span class="cx"> bottom border on these tests cause additional scrollbars to appear. --&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcsspropertiesexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/css-properties-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/css-properties-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/css-properties-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,221 +1,221 @@

<del>-Tests being able to set the display to -webkit-flex and -webkit-inline-flex.

</del><ins>+Tests being able to set the display to flex and inline-flex.

</ins><span class="cx"> 

<span class="cx"> On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS flexbox.style.display is &quot;-webkit-flex&quot;

</del><ins>+PASS flexbox.style.display is &quot;flex&quot;

</ins><span class="cx"> PASS flexbox.style.display is &quot;inline&quot;

</span><del>-PASS flexbox.style.display is &quot;-webkit-inline-flex&quot;

-PASS flexbox.style.display is &quot;-webkit-inline-flex&quot;

</del><ins>+PASS flexbox.style.display is &quot;inline-flex&quot;

+PASS flexbox.style.display is &quot;inline-flex&quot;

</ins><span class="cx"> PASS flexbox.style.display is &quot;block&quot;

</span><del>-PASS flexitem.style.webkitOrder is &quot;&quot;

-PASS flexitem.style.webkitOrder is &quot;2&quot;

-PASS flexitem.style.webkitOrder is &quot;-1&quot;

-PASS flexitem.style.webkitOrder is &quot;0&quot;

-PASS flexitem.style.webkitOrder is &quot;0&quot;

-PASS flexitem.style.webkitOrder is &quot;0&quot;

-PASS flexitem.style.webkitOrder is &quot;&quot;

-PASS flexbox.style.webkitJustifyContent is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is &quot;normal&quot;

-PASS flexbox.style.webkitJustifyContent is &quot;&quot;

-PASS flexbox.style.webkitJustifyContent is &quot;flex-start&quot;

-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is &quot;flex-start&quot;

-PASS flexbox.style.webkitJustifyContent is &quot;flex-end&quot;

-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is &quot;flex-end&quot;

-PASS flexbox.style.webkitJustifyContent is &quot;center&quot;

-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is &quot;center&quot;

-PASS flexbox.style.webkitJustifyContent is &quot;space-between&quot;

-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is &quot;space-between&quot;

-PASS flexbox.style.webkitJustifyContent is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitJustifyContent is &quot;normal&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;normal&quot;

-PASS window.getComputedStyle(document.documentElement, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;auto&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;flex-start&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;flex-start&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;flex-end&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;flex-end&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;center&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;center&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;stretch&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;stretch&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;baseline&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;baseline&quot;

-PASS flexbox.style.webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignItems is &quot;&quot;

-PASS flexitem.style.webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;normal&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignItems is &quot;&quot;

-PASS flexitem.style.webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;normal&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignItems is &quot;&quot;

-PASS flexitem.style.webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;normal&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignItems is &quot;flex-start&quot;

-PASS flexitem.style.webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;flex-start&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;flex-start&quot;

-PASS flexbox.style.webkitAlignItems is &quot;flex-end&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;flex-end&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;flex-end&quot;

-PASS flexbox.style.webkitAlignItems is &quot;center&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;center&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;center&quot;

-PASS flexbox.style.webkitAlignItems is &quot;stretch&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;stretch&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;stretch&quot;

-PASS flexbox.style.webkitAlignItems is &quot;baseline&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;baseline&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;baseline&quot;

-PASS flexbox.style.webkitAlignItems is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;normal&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;normal&quot;

-PASS flexbox.style.webkitAlignItems is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignItems is &quot;normal&quot;

-PASS window.getComputedStyle(flexitem, null).webkitAlignSelf is &quot;normal&quot;

-PASS window.getComputedStyle(detachedFlexbox, null).webkitAlignSelf is &quot;&quot;

-PASS window.getComputedStyle(detachedFlexItem, null).webkitAlignSelf is &quot;&quot;

-PASS flexbox.style.webkitFlexDirection is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is &quot;row&quot;

-PASS flexbox.style.webkitFlexDirection is &quot;&quot;

-PASS flexbox.style.webkitFlexDirection is &quot;row&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is &quot;row&quot;

-PASS flexbox.style.webkitFlexDirection is &quot;row-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is &quot;row-reverse&quot;

-PASS flexbox.style.webkitFlexDirection is &quot;column&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is &quot;column&quot;

-PASS flexbox.style.webkitFlexDirection is &quot;column-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is &quot;column-reverse&quot;

-PASS flexbox.style.webkitFlexWrap is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is &quot;nowrap&quot;

-PASS flexbox.style.webkitFlexWrap is &quot;&quot;

-PASS flexbox.style.webkitFlexWrap is &quot;nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is &quot;nowrap&quot;

-PASS flexbox.style.webkitFlexWrap is &quot;wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is &quot;wrap&quot;

-PASS flexbox.style.webkitFlexWrap is &quot;wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is &quot;wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse nowrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column-reverse wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column-reverse wrap-reverse&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column nowrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;column wrap&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;column wrap&quot;

-PASS flexbox.style.webkitFlexFlow is &quot;row-reverse wrap-reverse&quot;

-PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is &quot;row-reverse wrap-reverse&quot;

</del><ins>+PASS flexitem.style.order is &quot;&quot;

+PASS flexitem.style.order is &quot;2&quot;

+PASS flexitem.style.order is &quot;-1&quot;

+PASS flexitem.style.order is &quot;0&quot;

+PASS flexitem.style.order is &quot;0&quot;

+PASS flexitem.style.order is &quot;0&quot;

+PASS flexitem.style.order is &quot;&quot;

+PASS flexbox.style.justifyContent is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).justifyContent is &quot;normal&quot;

+PASS flexbox.style.justifyContent is &quot;&quot;

+PASS flexbox.style.justifyContent is &quot;flex-start&quot;

+PASS window.getComputedStyle(flexbox, null).justifyContent is &quot;flex-start&quot;

+PASS flexbox.style.justifyContent is &quot;flex-end&quot;

+PASS window.getComputedStyle(flexbox, null).justifyContent is &quot;flex-end&quot;

+PASS flexbox.style.justifyContent is &quot;center&quot;

+PASS window.getComputedStyle(flexbox, null).justifyContent is &quot;center&quot;

+PASS flexbox.style.justifyContent is &quot;space-between&quot;

+PASS window.getComputedStyle(flexbox, null).justifyContent is &quot;space-between&quot;

+PASS flexbox.style.justifyContent is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).justifyContent is &quot;normal&quot;

+PASS flexbox.style.alignSelf is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;normal&quot;

+PASS window.getComputedStyle(document.documentElement, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignSelf is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignSelf is &quot;auto&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignSelf is &quot;flex-start&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;flex-start&quot;

+PASS flexbox.style.alignSelf is &quot;flex-end&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;flex-end&quot;

+PASS flexbox.style.alignSelf is &quot;center&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;center&quot;

+PASS flexbox.style.alignSelf is &quot;stretch&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;stretch&quot;

+PASS flexbox.style.alignSelf is &quot;baseline&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;baseline&quot;

+PASS flexbox.style.alignSelf is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignItems is &quot;&quot;

+PASS flexitem.style.alignSelf is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;normal&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignItems is &quot;&quot;

+PASS flexitem.style.alignSelf is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;normal&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignItems is &quot;&quot;

+PASS flexitem.style.alignSelf is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;normal&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignItems is &quot;flex-start&quot;

+PASS flexitem.style.alignSelf is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;flex-start&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;flex-start&quot;

+PASS flexbox.style.alignItems is &quot;flex-end&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;flex-end&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;flex-end&quot;

+PASS flexbox.style.alignItems is &quot;center&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;center&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;center&quot;

+PASS flexbox.style.alignItems is &quot;stretch&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;stretch&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;stretch&quot;

+PASS flexbox.style.alignItems is &quot;baseline&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;baseline&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;baseline&quot;

+PASS flexbox.style.alignItems is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;normal&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;normal&quot;

+PASS flexbox.style.alignItems is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignItems is &quot;normal&quot;

+PASS window.getComputedStyle(flexitem, null).alignSelf is &quot;normal&quot;

+PASS window.getComputedStyle(detachedFlexbox, null).alignSelf is &quot;&quot;

+PASS window.getComputedStyle(detachedFlexItem, null).alignSelf is &quot;&quot;

+PASS flexbox.style.flexDirection is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).flexDirection is &quot;row&quot;

+PASS flexbox.style.flexDirection is &quot;&quot;

+PASS flexbox.style.flexDirection is &quot;row&quot;

+PASS window.getComputedStyle(flexbox, null).flexDirection is &quot;row&quot;

+PASS flexbox.style.flexDirection is &quot;row-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexDirection is &quot;row-reverse&quot;

+PASS flexbox.style.flexDirection is &quot;column&quot;

+PASS window.getComputedStyle(flexbox, null).flexDirection is &quot;column&quot;

+PASS flexbox.style.flexDirection is &quot;column-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexDirection is &quot;column-reverse&quot;

+PASS flexbox.style.flexWrap is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).flexWrap is &quot;nowrap&quot;

+PASS flexbox.style.flexWrap is &quot;&quot;

+PASS flexbox.style.flexWrap is &quot;nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexWrap is &quot;nowrap&quot;

+PASS flexbox.style.flexWrap is &quot;wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexWrap is &quot;wrap&quot;

+PASS flexbox.style.flexWrap is &quot;wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexWrap is &quot;wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap&quot;

+PASS flexbox.style.flexFlow is &quot;wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap&quot;

+PASS flexbox.style.flexFlow is &quot;wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;row&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap&quot;

+PASS flexbox.style.flexFlow is &quot;row wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap&quot;

+PASS flexbox.style.flexFlow is &quot;row wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;row wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse wrap&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse wrap&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;column&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column wrap&quot;

+PASS flexbox.style.flexFlow is &quot;column wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column wrap&quot;

+PASS flexbox.style.flexFlow is &quot;column wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;column wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse nowrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse wrap&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse wrap&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;column-reverse wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column-reverse wrap-reverse&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS flexbox.style.flexFlow is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column nowrap&quot;

+PASS flexbox.style.flexFlow is &quot;column wrap&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;column wrap&quot;

+PASS flexbox.style.flexFlow is &quot;row-reverse wrap-reverse&quot;

+PASS window.getComputedStyle(flexbox, null).flexFlow is &quot;row-reverse wrap-reverse&quot;

</ins><span class="cx"> PASS foundFlexFlow is false

</span><del>-PASS flexbox.style.webkitAlignContent is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;normal&quot;

-PASS flexbox.style.webkitAlignContent is &quot;flex-start&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;flex-start&quot;

-PASS flexbox.style.webkitAlignContent is &quot;flex-end&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;flex-end&quot;

-PASS flexbox.style.webkitAlignContent is &quot;center&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;center&quot;

-PASS flexbox.style.webkitAlignContent is &quot;space-between&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;space-between&quot;

-PASS flexbox.style.webkitAlignContent is &quot;space-around&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;space-around&quot;

-PASS flexbox.style.webkitAlignContent is &quot;stretch&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;stretch&quot;

-PASS flexbox.style.webkitAlignContent is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;normal&quot;

-PASS flexbox.style.webkitAlignContent is &quot;&quot;

-PASS window.getComputedStyle(flexbox, null).webkitAlignContent is &quot;normal&quot;

</del><ins>+PASS flexbox.style.alignContent is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;normal&quot;

+PASS flexbox.style.alignContent is &quot;flex-start&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;flex-start&quot;

+PASS flexbox.style.alignContent is &quot;flex-end&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;flex-end&quot;

+PASS flexbox.style.alignContent is &quot;center&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;center&quot;

+PASS flexbox.style.alignContent is &quot;space-between&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;space-between&quot;

+PASS flexbox.style.alignContent is &quot;space-around&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;space-around&quot;

+PASS flexbox.style.alignContent is &quot;stretch&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;stretch&quot;

+PASS flexbox.style.alignContent is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;normal&quot;

+PASS flexbox.style.alignContent is &quot;&quot;

+PASS window.getComputedStyle(flexbox, null).alignContent is &quot;normal&quot;

</ins><span class="cx"> PASS successfullyParsed is true

</span><span class="cx"> 

</span><span class="cx"> TEST COMPLETE

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcsspropertieshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/css-properties.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/css-properties.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/css-properties.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,7 @@

</span><span class="cx"> &lt;!DOCTYPE HTML PUBLIC &quot;-//IETF//DTD HTML//EN&quot;&gt;

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/js-test.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><span class="cx"> &lt;div id=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -8,170 +8,169 @@

</span><span class="cx">     &lt;div id=&quot;flexitem&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;script&gt;

</span><del>-description('Tests being able to set the display to -webkit-flex and -webkit-inline-flex.');

</del><ins>+description('Tests being able to set the display to flex and inline-flex.');

</ins><span class="cx"> 

</span><span class="cx"> var flexbox = document.getElementById(&quot;flexbox&quot;);

</span><span class="cx"> 

</span><del>-flexbox.style.display = '-webkit-flex';

-shouldBeEqualToString('flexbox.style.display', '-webkit-flex');

</del><ins>+flexbox.style.display = 'flex';

+shouldBeEqualToString('flexbox.style.display', 'flex');

</ins><span class="cx"> 

</span><span class="cx"> flexbox.style.display = 'inline';

</span><span class="cx"> shouldBeEqualToString('flexbox.style.display', 'inline');

</span><span class="cx"> 

</span><del>-flexbox.style.display = '-webkit-inline-flex';

-shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');

</del><ins>+flexbox.style.display = 'inline-flex';

+shouldBeEqualToString('flexbox.style.display', 'inline-flex');

</ins><span class="cx"> 

</span><span class="cx"> flexbox.style.display = 'junk';

</span><del>-shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');

</del><ins>+shouldBeEqualToString('flexbox.style.display', 'inline-flex');

</ins><span class="cx"> 

</span><span class="cx"> flexbox.style.display = 'block';

</span><span class="cx"> shouldBeEqualToString('flexbox.style.display', 'block');

</span><span class="cx"> 

</span><ins>+flexbox.style.display = 'flex';

</ins><span class="cx"> 

</span><span class="cx"> var flexitem = document.getElementById(&quot;flexitem&quot;);

</span><del>-shouldBeEqualToString('flexitem.style.webkitOrder', '');

</del><ins>+shouldBeEqualToString('flexitem.style.order', '');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitOrder = 2;

-shouldBeEqualToString('flexitem.style.webkitOrder', '2');

</del><ins>+flexitem.style.order = 2;

+shouldBeEqualToString('flexitem.style.order', '2');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitOrder = -1;

-shouldBeEqualToString('flexitem.style.webkitOrder', '-1');

</del><ins>+flexitem.style.order = -1;

+shouldBeEqualToString('flexitem.style.order', '-1');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitOrder = 0;

-shouldBeEqualToString('flexitem.style.webkitOrder', '0');

</del><ins>+flexitem.style.order = 0;

+shouldBeEqualToString('flexitem.style.order', '0');

</ins><span class="cx"> 

<del>-// -webkit-order must be an integer.

-flexitem.style.webkitOrder = 1.5;

-shouldBeEqualToString('flexitem.style.webkitOrder', '0');

</del><ins>+// order must be an integer.

+flexitem.style.order = 1.5;

+shouldBeEqualToString('flexitem.style.order', '0');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitOrder = &quot;test&quot;;

-shouldBeEqualToString('flexitem.style.webkitOrder', '0');

</del><ins>+flexitem.style.order = &quot;test&quot;;

+shouldBeEqualToString('flexitem.style.order', '0');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitOrder = '';

-shouldBeEqualToString('flexitem.style.webkitOrder', '');

</del><ins>+flexitem.style.order = '';

+shouldBeEqualToString('flexitem.style.order', '');

</ins><span class="cx"> 

</span><span class="cx"> 

</span><del>-flexbox.style.display = '-webkit-flex';

-

-shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');

</del><ins>+shouldBeEqualToString('flexbox.style.justifyContent', '');

</ins><span class="cx"> // The initial value is 'normal'.

</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'normal');

</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitJustifyContent = 'foo';

-shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');

</del><ins>+flexbox.style.justifyContent = 'foo';

+shouldBeEqualToString('flexbox.style.justifyContent', '');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitJustifyContent = 'flex-start';

-shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-start');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');

</del><ins>+flexbox.style.justifyContent = 'flex-start';

+shouldBeEqualToString('flexbox.style.justifyContent', 'flex-start');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-start');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitJustifyContent = 'flex-end';

-shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-end');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-end');

</del><ins>+flexbox.style.justifyContent = 'flex-end';

+shouldBeEqualToString('flexbox.style.justifyContent', 'flex-end');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-end');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitJustifyContent = 'center';

-shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'center');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'center');

</del><ins>+flexbox.style.justifyContent = 'center';

+shouldBeEqualToString('flexbox.style.justifyContent', 'center');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'center');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitJustifyContent = 'space-between';

-shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'space-between');

</del><ins>+flexbox.style.justifyContent = 'space-between';

+shouldBeEqualToString('flexbox.style.justifyContent', 'space-between');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'space-between');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitJustifyContent = '';

-shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'normal');

</del><ins>+flexbox.style.justifyContent = '';

+shouldBeEqualToString('flexbox.style.justifyContent', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'normal');

</ins><span class="cx"> 

</span><del>-shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');

</del><ins>+shouldBeEqualToString('flexbox.style.alignSelf', '');

</ins><span class="cx"> // The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).

</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');

-shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'normal');

</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');

+shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = 'foo';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');

</del><ins>+flexbox.style.alignSelf = 'foo';

+shouldBeEqualToString('flexbox.style.alignSelf', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = 'auto';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');

</del><ins>+flexbox.style.alignSelf = 'auto';

+shouldBeEqualToString('flexbox.style.alignSelf', 'auto');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = 'flex-start';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start');

</del><ins>+flexbox.style.alignSelf = 'flex-start';

+shouldBeEqualToString('flexbox.style.alignSelf', 'flex-start');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex-start');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = 'flex-end';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end');

</del><ins>+flexbox.style.alignSelf = 'flex-end';

+shouldBeEqualToString('flexbox.style.alignSelf', 'flex-end');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex-end');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = 'center';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center');

</del><ins>+flexbox.style.alignSelf = 'center';

+shouldBeEqualToString('flexbox.style.alignSelf', 'center');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'center');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = 'stretch';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');

</del><ins>+flexbox.style.alignSelf = 'stretch';

+shouldBeEqualToString('flexbox.style.alignSelf', 'stretch');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'stretch');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = 'baseline';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline');

</del><ins>+flexbox.style.alignSelf = 'baseline';

+shouldBeEqualToString('flexbox.style.alignSelf', 'baseline');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'baseline');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignSelf = '';

-shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'normal');

</del><ins>+flexbox.style.alignSelf = '';

+shouldBeEqualToString('flexbox.style.alignSelf', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'normal');

</ins><span class="cx"> 

</span><del>-shouldBeEqualToString('flexbox.style.webkitAlignItems', '');

-shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');

</del><ins>+shouldBeEqualToString('flexbox.style.alignItems', '');

+shouldBeEqualToString('flexitem.style.alignSelf', '');

</ins><span class="cx"> // The initial value is 'auto', which will be resolved to 'normal' in case of flexbox containers.

</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');

</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = 'foo';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', '');

-shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');

</del><ins>+flexbox.style.alignItems = 'foo';

+shouldBeEqualToString('flexbox.style.alignItems', '');

+shouldBeEqualToString('flexitem.style.alignSelf', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');

</ins><span class="cx"> 

<span class="cx"> // The 'auto' value is not valid for the align-items property.

</span><del>-flexbox.style.webkitAlignItems = 'auto';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', '');

-shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');

</del><ins>+flexbox.style.alignItems = 'auto';

+shouldBeEqualToString('flexbox.style.alignItems', '');

+shouldBeEqualToString('flexitem.style.alignSelf', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = 'flex-start';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');

-shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start');

</del><ins>+flexbox.style.alignItems = 'flex-start';

+shouldBeEqualToString('flexbox.style.alignItems', 'flex-start');

+shouldBeEqualToString('flexitem.style.alignSelf', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-start');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-start');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = 'flex-end';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end');

</del><ins>+flexbox.style.alignItems = 'flex-end';

+shouldBeEqualToString('flexbox.style.alignItems', 'flex-end');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-end');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-end');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = 'center';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'center');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'center');

</del><ins>+flexbox.style.alignItems = 'center';

+shouldBeEqualToString('flexbox.style.alignItems', 'center');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'center');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'center');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = 'stretch';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', 'stretch');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');

</del><ins>+flexbox.style.alignItems = 'stretch';

+shouldBeEqualToString('flexbox.style.alignItems', 'stretch');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = 'baseline';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', 'baseline');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline');

</del><ins>+flexbox.style.alignItems = 'baseline';

+shouldBeEqualToString('flexbox.style.alignItems', 'baseline');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'baseline');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'baseline');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = '';

-shouldBeEqualToString('flexbox.style.webkitAlignItems', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');

</del><ins>+flexbox.style.alignItems = '';

+shouldBeEqualToString('flexbox.style.alignItems', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');

</ins><span class="cx"> 

</span><span class="cx"> flexbox.style.display = 'none';

</span><del>-shouldBeEqualToString('flexbox.style.webkitAlignItems', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'normal');

-shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'normal');

-flexbox.style.display = '';

</del><ins>+shouldBeEqualToString('flexbox.style.alignItems', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');

+shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'normal');

+flexbox.style.display = 'flex';

</ins><span class="cx"> 

</span><span class="cx"> 

<span class="cx"> // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.

</span><span class="lines">@@ -178,63 +177,63 @@

</span><span class="cx"> var detachedFlexbox = document.createElement('div');

</span><span class="cx"> var detachedFlexItem = document.createElement('div');

</span><span class="cx"> detachedFlexbox.appendChild(detachedFlexItem);

</span><del>-shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlignSelf', '');

-shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAlignSelf', '');

</del><ins>+shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).alignSelf', '');

+shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).alignSelf', '');

</ins><span class="cx"> 

</span><span class="cx"> 

</span><del>-shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');

</del><ins>+shouldBeEqualToString('flexbox.style.flexDirection', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexDirection = 'foo';

-shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');

</del><ins>+flexbox.style.flexDirection = 'foo';

+shouldBeEqualToString('flexbox.style.flexDirection', '');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexDirection = 'row';

-shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');

</del><ins>+flexbox.style.flexDirection = 'row';

+shouldBeEqualToString('flexbox.style.flexDirection', 'row');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexDirection = 'row-reverse';

-shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');

</del><ins>+flexbox.style.flexDirection = 'row-reverse';

+shouldBeEqualToString('flexbox.style.flexDirection', 'row-reverse');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row-reverse');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexDirection = 'column';

-shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');

</del><ins>+flexbox.style.flexDirection = 'column';

+shouldBeEqualToString('flexbox.style.flexDirection', 'column');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'column');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexDirection = 'column-reverse';

-shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');

</del><ins>+flexbox.style.flexDirection = 'column-reverse';

+shouldBeEqualToString('flexbox.style.flexDirection', 'column-reverse');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'column-reverse');

</ins><span class="cx"> 

</span><del>-shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');

</del><ins>+shouldBeEqualToString('flexbox.style.flexWrap', '');

</ins><span class="cx"> // The initial value is 'nowrap'.

</span><del>-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');

</del><ins>+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexWrap = 'foo';

-shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');

</del><ins>+flexbox.style.flexWrap = 'foo';

+shouldBeEqualToString('flexbox.style.flexWrap', '');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexWrap = 'nowrap';

-shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');

</del><ins>+flexbox.style.flexWrap = 'nowrap';

+shouldBeEqualToString('flexbox.style.flexWrap', 'nowrap');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexWrap = 'wrap';

-shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');

</del><ins>+flexbox.style.flexWrap = 'wrap';

+shouldBeEqualToString('flexbox.style.flexWrap', 'wrap');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexWrap = 'wrap-reverse';

-shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');

</del><ins>+flexbox.style.flexWrap = 'wrap-reverse';

+shouldBeEqualToString('flexbox.style.flexWrap', 'wrap-reverse');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap-reverse');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexFlow = '';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');

</del><ins>+flexbox.style.flexFlow = '';

+shouldBeEqualToString('flexbox.style.flexFlow', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row nowrap');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexFlow = 'foo';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

</del><ins>+flexbox.style.flexFlow = 'foo';

+shouldBeEqualToString('flexbox.style.flexFlow', '');

</ins><span class="cx"> 

</span><span class="cx"> function testFlexFlowValue(value, expected, expectedComputed)

</span><span class="cx"> {

</span><del>-    flexbox.style.webkitFlexFlow = value;

-    shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));

-    shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);

</del><ins>+    flexbox.style.flexFlow = value;

+    shouldBeEqualToString('flexbox.style.flexFlow', expected.replace(/^ /, '').replace(/ $/, ''));

+    shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', expectedComputed);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];

</span><span class="lines">@@ -248,74 +247,71 @@

</span><span class="cx">     });

</span><span class="cx"> });

</span><span class="cx"> 

</span><del>-flexbox.style.webkitFlexFlow = '';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

-flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

-flexbox.style.webkitFlexFlow = 'column row';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

</del><ins>+flexbox.style.flexFlow = '';

+shouldBeEqualToString('flexbox.style.flexFlow', '');

+flexbox.style.flexFlow = 'wrap wrap-reverse';

+shouldBeEqualToString('flexbox.style.flexFlow', '');

+flexbox.style.flexFlow = 'column row';

+shouldBeEqualToString('flexbox.style.flexFlow', '');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitFlexFlow = '';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');

-flexbox.style.webkitFlexDirection = 'column';

-flexbox.style.webkitFlexWrap = 'initial';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column nowrap');

-flexbox.style.webkitFlexWrap = 'wrap';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');

-flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';

-shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');

</del><ins>+flexbox.style.flexFlow = '';

+shouldBeEqualToString('flexbox.style.flexFlow', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row nowrap');

+flexbox.style.flexDirection = 'column';

+flexbox.style.flexWrap = 'initial';

+shouldBeEqualToString('flexbox.style.flexFlow', 'column');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column nowrap');

+flexbox.style.flexWrap = 'wrap';

+shouldBeEqualToString('flexbox.style.flexFlow', 'column wrap');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column wrap');

+flexbox.style.flexFlow = 'row-reverse wrap-reverse';

+shouldBeEqualToString('flexbox.style.flexFlow', 'row-reverse wrap-reverse');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row-reverse wrap-reverse');

</ins><span class="cx"> 

<del>-// -webkit-flex-flow is a shorthand, so it shouldn't show up as a computed property.

</del><ins>+// flex-flow is a shorthand, so it shouldn't show up as a computed property.

</ins><span class="cx"> var computedStyle = getComputedStyle(flexbox);

</span><span class="cx"> var foundFlexFlow = false;

</span><span class="cx"> for (var i = 0; i &lt; computedStyle.length; ++i) {

</span><del>-    if (computedStyle[i] == 'webkitFlexFlow')

</del><ins>+    if (computedStyle[i] == 'flexFlow')

</ins><span class="cx">         foundFlexFlow = true;

</span><span class="cx"> }

</span><span class="cx"> shouldBeFalse('foundFlexFlow');

</span><span class="cx"> 

</span><del>-flexbox.style.display = '-webkit-flex';

-

</del><span class="cx"> // The initial value is 'normal'.

</span><del>-shouldBeEqualToString('flexbox.style.webkitAlignContent', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');

</del><ins>+shouldBeEqualToString('flexbox.style.alignContent', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = 'flex-start';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-start');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-start');

</del><ins>+flexbox.style.alignContent = 'flex-start';

+shouldBeEqualToString('flexbox.style.alignContent', 'flex-start');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'flex-start');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = 'flex-end';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-end');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-end');

</del><ins>+flexbox.style.alignContent = 'flex-end';

+shouldBeEqualToString('flexbox.style.alignContent', 'flex-end');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'flex-end');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = 'center';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', 'center');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'center');

</del><ins>+flexbox.style.alignContent = 'center';

+shouldBeEqualToString('flexbox.style.alignContent', 'center');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'center');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = 'space-between';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-between');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-between');

</del><ins>+flexbox.style.alignContent = 'space-between';

+shouldBeEqualToString('flexbox.style.alignContent', 'space-between');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-between');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = 'space-around';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-around');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-around');

</del><ins>+flexbox.style.alignContent = 'space-around';

+shouldBeEqualToString('flexbox.style.alignContent', 'space-around');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-around');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = 'stretch';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', 'stretch');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');

</del><ins>+flexbox.style.alignContent = 'stretch';

+shouldBeEqualToString('flexbox.style.alignContent', 'stretch');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'stretch');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = '';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');

</del><ins>+flexbox.style.alignContent = '';

+shouldBeEqualToString('flexbox.style.alignContent', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'normal');

</ins><span class="cx"> 

</span><del>-flexbox.style.webkitAlignContent = 'foo';

-shouldBeEqualToString('flexbox.style.webkitAlignContent', '');

-shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'normal');

</del><ins>+flexbox.style.alignContent = 'foo';

+shouldBeEqualToString('flexbox.style.alignContent', '');

+shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'normal');

</ins><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;

</del><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxcsswgflexmarginnocollapsehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/csswg/flex-margin-no-collapse.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/csswg/flex-margin-no-collapse.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/csswg/flex-margin-no-collapse.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -22,6 +22,7 @@

</span><span class="cx">                         width: 100px;

</span><span class="cx">                         height: 100px;

</span><span class="cx">                         background-color: green;

</span><ins>+            flex: none;

</ins><span class="cx">                 }

</span><span class="cx"> 

</span><span class="cx">                 #box1 {

</span><span class="lines">@@ -50,4 +51,4 @@

</span><span class="cx">                 &lt;div id=&quot;box2&quot; class=&quot;box&quot;&gt;&lt;/div&gt;

</span><span class="cx">         &lt;/div&gt;

</span><span class="cx"> &lt;/body&gt;

</span><del>-&lt;/html&gt;

</del><span class="cx">\ No newline at end of file

</span><ins>+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxdefinitecrosssizesexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/definite-cross-sizes-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/definite-cross-sizes-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/definite-cross-sizes-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,36 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+This test verifies that we consider flex items' cross sizes to be definite if the align value is stretch (the default)

+

+Tests that we get a definite size in the simple case.

+

+Tests that we get an definite size in a wrapping flexbox

+

+Tests that we get an indefinite size when not stretch-aligning

+

+Tests that we get an definite size in a definite-height flexbox

+

+Tests that we get an definite size in a nested flexbox where only the outer one has an explicit height

+

+Tests that we get an definite size in a nested flexbox where only the outer one has an explicit height and has an opposite direction.

+

+Tests that we respect min-height

+

+Tests that percentage sizes can also be definite

+

+Tests that we use a definite size even when a percentage size is not definite

+

+Tests that we don't mix up widths and heights

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxdefinitecrosssizeshtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/definite-cross-sizes.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/definite-cross-sizes.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/definite-cross-sizes.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,130 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;title&gt;CSS Flexbox: Definite cross sizes&lt;/title&gt;

+

+&lt;style&gt;

+.rect {

+  width: 50px;

+  height: 50px;

+  background-color: green;

+}

+

+.flexbox {

+  width: 50px;

+  outline: 3px solid black;

+}

+

+.flexbox &gt; div &gt; div {

+  overflow: hidden;

+}

+&lt;/style&gt;

+

+&lt;link rel=&quot;stylesheet&quot; href=&quot;resources/flexbox.css&quot;&gt;

+&lt;link rel=&quot;help&quot; href=&quot;https://drafts.csswg.org/css-flexbox-1/#definite-sizes&quot;&gt;

+&lt;link rel=&quot;author&quot; title=&quot;Google Inc.&quot; href=&quot;https://www.google.com/&quot;&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.flexbox')&quot; style=&quot;height: 800px;&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;p&gt;This test verifies that we consider flex items' cross sizes to be definite

+if the align value is stretch (the default)&lt;/p&gt;

+

+&lt;p&gt;Tests that we get a definite size in the simple case.&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot;&gt;

+    &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;25&quot;&gt;

+      &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we get an definite size in a wrapping flexbox&lt;/p&gt;

+&lt;div class=&quot;flexbox wrap&quot; style=&quot;height: 50px;&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot;&gt;

+    &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;25&quot;&gt;

+      &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we get an indefinite size when not stretch-aligning&lt;/p&gt;

+&lt;div class=&quot;flexbox wrap&quot; style=&quot;height: 50px;&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div class=&quot;align-self-flex-start&quot; data-expected-height=&quot;50&quot;&gt;

+    &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;50&quot;&gt;

+      &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we get an definite size in a definite-height flexbox&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 50px;&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot;&gt;

+    &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;25&quot;&gt;

+      &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we get an definite size in a nested flexbox where only the outer one has an explicit height&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 50px;&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div class=&quot;flexbox&quot; data-expected-height=&quot;50&quot;&gt;

+    &lt;div data-expected-height=&quot;50&quot;&gt;

+      &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;25&quot;&gt;

+        &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+      &lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we get an definite size in a nested flexbox where only the outer one has an explicit height and has an opposite direction.&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 50px;&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div class=&quot;flexbox column&quot; data-expected-height=&quot;50&quot;&gt;

+    &lt;div class=&quot;flex-one&quot; data-expected-height=&quot;50&quot;&gt;

+      &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;25&quot;&gt;

+        &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+      &lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we respect min-height&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 50px;&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot;&gt;

+    &lt;div style=&quot;height: 50%; min-height: 30px;&quot; data-expected-height=&quot;30&quot;&gt;

+      &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that percentage sizes can also be definite&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 10%;&quot; data-expected-height=&quot;80&quot;&gt;

+  &lt;div data-expected-height=&quot;80&quot;&gt;

+    &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;40&quot;&gt;

+      &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we use a definite size even when a percentage size is not definite&lt;/p&gt;

+&lt;div&gt;

+  &lt;div class=&quot;flexbox&quot; style=&quot;height: 10%;&quot; data-expected-height=&quot;50&quot;&gt;

+    &lt;div data-expected-height=&quot;50&quot;&gt;

+      &lt;div style=&quot;height: 50%&quot; data-expected-height=&quot;25&quot;&gt;

+        &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+      &lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Tests that we don't mix up widths and heights&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 50px; width: 100px;&quot; data-expected-height=&quot;50&quot;&gt;

+  &lt;div style=&quot;width: 100px;&quot; data-expected-height=&quot;50&quot; data-expected-width=&quot;100&quot;&gt;

+    &lt;div style=&quot;width: 50%&quot; data-expected-width=&quot;50&quot;&gt;

+      &lt;div class=&quot;rect&quot; data-expected-height=&quot;50&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxdefinitemainsizeexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/definite-main-size-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/definite-main-size-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/definite-main-size-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,14 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+Simple case of percentage resolution:

+

+auto flex-basis. However, as this is a width, we follow regular width rules and resolve the percentage:

+

+Simple case of percentage resolution, columns:

+

+auto flex-basis, we should ignore the percentage height here:

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxdefinitemainsizehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/definite-main-size.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/definite-main-size.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/definite-main-size.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,72 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;title&gt;CSS Flexbox: Definite main sizes&lt;/title&gt;

+

+&lt;style&gt;

+.rect {

+  width: 50px;

+  height: 50px;

+  background-color: green;

+}

+

+.flexbox {

+  border: 3px solid black;

+}

+

+.flexbox &gt; div &gt; div {

+  overflow: hidden;

+}

+

+&lt;/style&gt;

+

+&lt;link rel=&quot;stylesheet&quot; href=&quot;resources/flexbox.css&quot;&gt;

+&lt;link rel=&quot;help&quot; href=&quot;https://drafts.csswg.org/css-flexbox/#definite-sizes&quot;&gt;

+&lt;link rel=&quot;author&quot; title=&quot;Google Inc.&quot; href=&quot;https://www.google.com/&quot;&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.flexbox')&quot; style=&quot;height: 800px;&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;p&gt;Simple case of percentage resolution:&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 300px;&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; data-expected-width=&quot;250&quot;&gt;

+    &lt;div style=&quot;width: 50%;&quot; data-expected-width=&quot;125&quot;&gt;

+      &lt;div class=&quot;rect&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;rect flex-none&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;auto flex-basis. However, as this is a width, we follow regular width

+rules and resolve the percentage:&lt;/p&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 300px;&quot;&gt;

+  &lt;div data-expected-width=&quot;50&quot;&gt;

+    &lt;div style=&quot;width: 50%;&quot; data-expected-width=&quot;25&quot;&gt;

+      &lt;div class=&quot;rect&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;rect flex-none&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Simple case of percentage resolution, columns:&lt;/p&gt;

+&lt;div class=&quot;flexbox column&quot; style=&quot;height: 300px;&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; data-expected-height=&quot;250&quot;&gt;

+    &lt;div style=&quot;height: 50%;&quot; data-expected-height=&quot;125&quot;&gt;

+      &lt;div class=&quot;rect&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;rect flex-none&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;auto flex-basis, we should ignore the percentage height here:&lt;/p&gt;

+&lt;div class=&quot;flexbox column&quot; style=&quot;height: 300px;&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot;&gt;

+    &lt;div style=&quot;height: 50%;&quot; data-expected-height=&quot;50&quot;&gt;

+      &lt;div class=&quot;rect&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;rect flex-none&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxdisplayflexboxsetgetexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/display-flexbox-set-get-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/display-flexbox-set-get-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/display-flexbox-set-get-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,18 +1,6 @@

</span><del>-Test that setting and getting display: -webkit-flex and -webkit-inline-flex works as expected

</del><ins>+Test that setting and getting display: flex and inline-flex works as expected

</ins><span class="cx"> 

<del>-On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.

</del><span class="cx"> 

</span><ins>+PASS Test getting |display| set through CSS 

+PASS Test getting and setting display through JS 

</ins><span class="cx"> 

</span><del>-Test getting |display| set through CSS

-PASS getComputedStyle(flexboxElement, '').getPropertyValue('display') is 'flex'

-PASS getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display') is 'inline-flex'

-

-Test getting and setting display through JS

-PASS getComputedStyle(element, '').getPropertyValue('display') is 'block'

-PASS getComputedStyle(element, '').getPropertyValue('display') is 'flex'

-PASS getComputedStyle(element, '').getPropertyValue('display') is 'block'

-PASS getComputedStyle(element, '').getPropertyValue('display') is 'inline-flex'

-PASS successfullyParsed is true

-

-TEST COMPLETE

-

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxdisplayflexboxsetgethtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/display-flexbox-set-get.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/display-flexbox-set-get.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/display-flexbox-set-get.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,38 +1,42 @@

</span><span class="cx"> &lt;!DOCTYPE HTML PUBLIC &quot;-//IETF//DTD HTML//EN&quot;&gt;

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><del>-&lt;style&gt;

-.flexbox { display: -webkit-flex; }

-.flexboxInline { display: -webkit-inline-flex; }

-&lt;/style&gt;

-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;p&gt;Test that setting and getting display: flex and inline-flex works as expected&lt;/p&gt;

+&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot; id=&quot;flexbox&quot;&gt;&lt;/div&gt;

</span><del>-&lt;div class=&quot;flexboxInline&quot; id=&quot;flexboxInline&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;inline-flexbox&quot; id=&quot;flexboxInline&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;script&gt;

</span><del>-description('Test that setting and getting display: -webkit-flex and -webkit-inline-flex works as expected');

</del><span class="cx"> 

</span><del>-debug(&quot;Test getting |display| set through CSS&quot;);

</del><ins>+test(function() {

</ins><span class="cx"> var flexboxElement = document.getElementById(&quot;flexbox&quot;);

</span><del>-shouldBe(&quot;getComputedStyle(flexboxElement, '').getPropertyValue('display')&quot;, &quot;'flex'&quot;);

</del><ins>+assert_equals(getComputedStyle(flexboxElement, '').getPropertyValue('display'), 'flex');

</ins><span class="cx"> var inlineFlexboxElement = document.getElementById(&quot;flexboxInline&quot;);

</span><del>-shouldBe(&quot;getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display')&quot;, &quot;'inline-flex'&quot;);

</del><ins>+assert_equals(getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display'), 'inline-flex');

+}, &quot;Test getting |display| set through CSS&quot;);

</ins><span class="cx"> 

</span><del>-debug(&quot;&quot;);

-debug(&quot;Test getting and setting display through JS&quot;);

</del><ins>+test(function() {

</ins><span class="cx"> var element = document.createElement(&quot;div&quot;);

</span><span class="cx"> document.body.appendChild(element);

</span><del>-shouldBe(&quot;getComputedStyle(element, '').getPropertyValue('display')&quot;, &quot;'block'&quot;);

-element.style.display = &quot;-webkit-flex&quot;;

-shouldBe(&quot;getComputedStyle(element, '').getPropertyValue('display')&quot;, &quot;'flex'&quot;);

</del><ins>+assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'block');

+element.style.display = &quot;flex&quot;;

+assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'flex');

</ins><span class="cx"> 

</span><span class="cx"> element = document.createElement(&quot;div&quot;);

</span><span class="cx"> document.body.appendChild(element);

</span><del>-shouldBe(&quot;getComputedStyle(element, '').getPropertyValue('display')&quot;, &quot;'block'&quot;);

</del><ins>+assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'block');

+element.style.display = &quot;inline-flex&quot;;

+assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'inline-flex');

+element.style.display = &quot;-webkit-flex&quot;;

+assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'flex');

</ins><span class="cx"> element.style.display = &quot;-webkit-inline-flex&quot;;

</span><del>-shouldBe(&quot;getComputedStyle(element, '').getPropertyValue('display')&quot;, &quot;'inline-flex'&quot;);

</del><ins>+assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'inline-flex');

+

+}, &quot;Test getting and setting display through JS&quot;);

</ins><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;

</del><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalgorithmexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-algorithm-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-algorithm-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,27 +1,28 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> 

</span><ins>+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalgorithmminmaxexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,12 +1,14 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalgorithmminmaxhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -26,24 +26,23 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flex1 {

</span><del>-    -webkit-flex: 1;

-    -moz-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> .flex2 {

</span><del>-    -webkit-flex: 2;

-    -moz-flex: 2;

</del><ins>+    flex: 2;

</ins><span class="cx"> }

</span><span class="cx"> .flex3 {

</span><del>-    -webkit-flex: 3;

-    -moz-flex: 3;

</del><ins>+    flex: 3;

</ins><span class="cx"> }

</span><span class="cx"> .flex1-0-0 {

</span><del>-    -webkit-flex: 1 0 0px;

-    -moz-flex: 1 0 0px;

</del><ins>+    flex: 1 0 0px;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex1-0-0&quot; style=&quot;max-width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;250&quot; class=&quot;flex1-0-0&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -53,32 +52,32 @@

</span><span class="cx"> &lt;!-- The first two flexitems should hit their max width and the third item fills the remaining space. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; class=&quot;flex1-0-0&quot; style=&quot;max-width: 50px;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;300&quot; style=&quot;-webkit-flex: 4 0 0; -moz-flex: 4 0 0; max-width: 300px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;250&quot; style=&quot;-webkit-flex: 1 0 0; -moz-flex: 1 0 0&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;300&quot; style=&quot;flex: 4 0 0; max-width: 300px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;250&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex1-0-0&quot; style=&quot;max-width: 100px;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;300&quot; style=&quot;-webkit-flex: 1 0 200px; -moz-flex: 1 0 200px; max-width: 300px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;300&quot; style=&quot;flex: 1 0 200px; max-width: 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;200&quot; class=&quot;flex1-0-0&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Test min-width. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;350&quot; style=&quot;-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px; min-width: 350px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;250&quot; style=&quot;-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;350&quot; style=&quot;flex: 1 1 400px; min-width: 350px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;250&quot; style=&quot;flex: 1 1 400px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- The flex items can overflow the flexbox. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;350&quot; style=&quot;-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px; min-width: 350px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;300&quot; style=&quot;-webkit-flex: 2 0 300px; -moz-flex: 2 0 300px; max-width: 300px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;350&quot; style=&quot;flex: 1 1 400px; min-width: 350px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;300&quot; style=&quot;flex: 2 0 300px; max-width: 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;0&quot; class=&quot;flex1-0-0&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex1-0-0&quot; style=&quot;margin: 0 auto; max-width: 100px;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;333&quot; data-offset-x=&quot;100&quot; style=&quot;-webkit-flex: 2 0 0; -moz-flex: 2 0 0&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;333&quot; data-offset-x=&quot;100&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;167&quot; data-offset-x=&quot;433&quot; class=&quot;flex1-0-0&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -85,7 +84,7 @@

</span><span class="cx"> &lt;!-- min-width and max-width take priority over the preferred size. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;500&quot; class=&quot;flex1-0-0&quot; style=&quot;min-width: 300px&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 50%; -moz-flex: 1 0 50%; max-width: 100px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 50%; max-width: 100px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;width: 200px&quot;&gt;

</span><span class="lines">@@ -104,8 +103,8 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;width: 200px&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;150&quot; style=&quot;-webkit-flex: 1 50px; -moz-flex: 1 50px; min-width: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 100px; -moz-flex: 1 100px; max-width: 50px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;150&quot; style=&quot;flex: 1 50px; min-width: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 100px; max-width: 50px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalgorithmwithmarginsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,12 +1,14 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalgorithmwithmarginshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -26,28 +26,26 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flex1 {

</span><del>-    -webkit-flex: 1;

-    -moz-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> .flex2 {

</span><del>-    -webkit-flex: 2;

-    -moz-flex: 2;

</del><ins>+    flex: 2;

</ins><span class="cx"> }

</span><span class="cx"> .flex4 {

</span><del>-    -webkit-flex: 4;

-    -moz-flex: 4;

</del><ins>+    flex: 4;

</ins><span class="cx"> }

</span><span class="cx"> .flex1-0-0 {

</span><del>-    -webkit-flex: 1 0 0px;

-    -moz-flex: 1 0 0px;

</del><ins>+    flex: 1 0 0px;

</ins><span class="cx"> }

</span><span class="cx"> .flex2-0-0 {

</span><del>-    -webkit-flex: 2 0 0px;

-    -moz-flex: 2 0 0px;

</del><ins>+    flex: 2 0 0px;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;200&quot; class=&quot;flex1-0-0&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;250&quot; class=&quot;flex-none&quot; style=&quot;width: 100px; margin: 0 50px;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -69,28 +67,28 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex1-0-0&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;100&quot; style=&quot;-webkit-flex: 2 0 100px; -moz-flex: 2 0 100px; margin-left: auto;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;100&quot; style=&quot;flex: 2 0 100px; margin-left: auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; class=&quot;flex1-0-0&quot; style=&quot;margin-right: 100px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Margins set to auto don't have negative flex. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;150&quot; style=&quot;-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;150&quot; style=&quot;-webkit-flex: 1 0 300px; -moz-flex: 1 0 300px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;150&quot; data-offset-x=&quot;450&quot; style=&quot;-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;150&quot; style=&quot;flex: 1 1 300px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;150&quot; style=&quot;flex: 1 0 300px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;150&quot; data-offset-x=&quot;450&quot; style=&quot;flex: 1 1 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;300px&quot; data-offset-x=&quot;150&quot; style=&quot;-webkit-flex: 0 0 300px; -moz-flex: 0 0 300px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;150&quot; style=&quot;flex: 0 0 300px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;700px&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 0 0 700px; -moz-flex: 0 0 700px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;700&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 0 0 700px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;600px&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 300px; -moz-flex: 1 0 300px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;600&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 300px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -105,8 +103,8 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;padding: 100px;&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0px; -moz-flex: 1 0 0px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;400&quot; style=&quot;-webkit-flex: 1 0 0em; -moz-flex: 1 0 0em; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;100&quot; style=&quot;flex: 1 0 0px; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;400&quot; style=&quot;flex: 1 0 0em; margin: 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalgorithmhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-algorithm.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-algorithm.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-algorithm.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -24,24 +24,23 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flex1 {

</span><del>-    -webkit-flex: 1;

-    -moz-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> .flex2 {

</span><del>-    -webkit-flex: 2;

-    -moz-flex: 2;

</del><ins>+    flex: 2;

</ins><span class="cx"> }

</span><span class="cx"> .flex3 {

</span><del>-    -webkit-flex: 3;

-    -moz-flex: 3;

</del><ins>+    flex: 3;

</ins><span class="cx"> }

</span><span class="cx"> .flex1-0-0 {

</span><del>-    -webkit-flex: 1 0 0px;

-    -moz-flex: 1 0 0px;

</del><ins>+    flex: 1 0 0px;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;200&quot; class=&quot;flex1&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -50,9 +49,9 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: .5; -moz-flex: .5&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: .5; -moz-flex: .5&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: .5; -moz-flex: .5&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;200&quot; style=&quot;flex: .5;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; style=&quot;flex: .5;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; style=&quot;flex: .5;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -76,7 +75,7 @@

</span><span class="cx"> &lt;!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;150&quot; class=&quot;flex1&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;350&quot; style=&quot;-webkit-flex: 1 200px; -moz-flex: 1 200px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;350&quot; style=&quot;flex: 1 200px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex-none&quot; style=&quot;width: 100px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -83,54 +82,54 @@

</span><span class="cx"> &lt;!-- Like the last test, except the middle box gets more space than the first box. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex1&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;400&quot; style=&quot;-webkit-flex: 2 33.333333%; -moz-flex: 2 33.333333%&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;400&quot; style=&quot;flex: 2 33.333333%;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex-none&quot; style=&quot;width: 100px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Test some negative flexing. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: 2 1 300px; -moz-flex: 2 1 300px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: 3 1 300px; -moz-flex: 3 1 300px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;200&quot; style=&quot;flex: 1 1 300px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; style=&quot;flex: 2 1 300px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; style=&quot;flex: 3 1 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;250&quot; style=&quot;-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;150&quot; style=&quot;-webkit-flex: 2 3 300px; -moz-flex: 2 3 300px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;250&quot; style=&quot;flex: 1 1 300px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;150&quot; style=&quot;flex: 2 3 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;200&quot; class=&quot;flex-none&quot; style=&quot;width: 200px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;250&quot; style=&quot;-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;250&quot; style=&quot;flex: 1 1 500px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;300&quot; class=&quot;flex-none&quot; style=&quot;width: 300px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;250&quot; style=&quot;-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; margin-right: 300px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;250&quot; style=&quot;flex: 1 1 500px; margin-right: 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;550&quot; style=&quot;-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; padding-left: 300px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;550&quot; style=&quot;flex: 1 1 500px; padding-left: 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 1 100px; -moz-flex: 1 1 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;550&quot; style=&quot;-webkit-flex: 1 1 500px; -moz-flex: 1 1 500px; border-left: 200px dashed orange; border-right: 100px dashed orange;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;550&quot; style=&quot;flex: 1 1 500px; border-left: 200px dashed orange; border-right: 100px dashed orange;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Test some overflow cases. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;600&quot; style=&quot;-webkit-flex: 0 100000000000000000000000000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;600&quot; style=&quot;-webkit-flex: 0 100000000000000000000000000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;600&quot; style=&quot;flex: 0 100000000000000000000000000000000000000 600px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;600&quot; style=&quot;flex: 0 100000000000000000000000000000000000000 600px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;600&quot; style=&quot;-webkit-flex: 100000000000000000000000000000000000000 0 600px; -moz-flex: 100000000000000000000000000000000000000 0 600px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;600&quot; style=&quot;-webkit-flex: 0 100000000000000000000000000000000000000 600px; -moz-flex: 0 100000000000000000000000000000000000000 600px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;33554428&quot; style=&quot;-webkit-flex: 1 1 100000000000000000000000000000000000000px; -moz-flex: 1 1 100000000000000000000000000000000000000px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;600&quot; style=&quot;flex: 100000000000000000000000000000000000000 0 600px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;600&quot; style=&quot;flex: 0 100000000000000000000000000000000000000 600px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;33554428&quot; style=&quot;flex: 1 1 100000000000000000000000000000000000000px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Test flexitem borders. --&gt;

</span><span class="lines">@@ -141,7 +140,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;300&quot; style=&quot;width: 100px; border: 100px solid black; -webkit-flex: none;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;300&quot; style=&quot;width: 100px; border: 100px solid black; flex: none;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;200&quot; class=&quot;flex2&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex1&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -198,7 +197,7 @@

</span><span class="cx">   &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;height: 60px; -webkit-flex-flow: row wrap; position: relative;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;height: 60px; flex-flow: row wrap; position: relative;&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;position: absolute;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;width: 700px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignbaselineexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-baseline-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-baseline-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-baseline-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,16 +6,8 @@

</span><span class="cx"> PASS firstChild.offsetTop is lastChild.offsetTop

</span><span class="cx"> PASS firstChild.offsetLeft is lastChild.offsetLeft

</span><span class="cx"> PASS firstChild.offsetLeft is lastChild.offsetLeft

</span><del>-PASS firstChild.offsetTop is lastChild.offsetTop

-PASS firstChild.offsetTop is lastChild.offsetTop

</del><span class="cx"> PASS firstChild.offsetLeft is lastChild.offsetLeft

</span><span class="cx"> PASS firstChild.offsetLeft is lastChild.offsetLeft

</span><del>-PASS firstChild.offsetTop is lastChild.offsetTop

-PASS firstChild.offsetTop is lastChild.offsetTop

-PASS firstChild.offsetLeft is lastChild.offsetLeft

-PASS firstChild.offsetLeft is lastChild.offsetLeft

-PASS firstChild.offsetLeft is lastChild.offsetLeft

-PASS firstChild.offsetLeft is lastChild.offsetLeft

</del><span class="cx"> PASS firstChild.offsetTop is 0

</span><span class="cx"> PASS lastChild.offsetTop is 20

</span><span class="cx"> PASS firstChild.offsetTop is lastChild.offsetTop

</span><span class="lines">@@ -45,14 +37,6 @@

</span><span class="cx"> horizontal-tb rtl row-reverse

</span><span class="cx"> horizontal-tb ltr column-reverse

</span><span class="cx"> horizontal-tb rtl column-reverse

</span><del>-horizontal-bt ltr row

-horizontal-bt rtl row

-horizontal-bt ltr column

-horizontal-bt rtl column

-horizontal-bt ltr row-reverse

-horizontal-bt rtl row-reverse

-horizontal-bt ltr column-reverse

-horizontal-bt rtl column-reverse

</del><span class="cx"> vertical-lr ltr row

</span><span class="cx"> vertical-lr rtl row

</span><span class="cx"> vertical-lr ltr column

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignbaselinehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-baseline.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-baseline.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-baseline.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -30,16 +30,13 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> &lt;script&gt;

</span><span class="lines">@@ -46,10 +43,10 @@

</span><span class="cx"> if (window.testRunner)

</span><span class="cx">     testRunner.dumpAsText();

</span><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/js-test.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body&gt;

</span><span class="cx"> &lt;script&gt;

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> 

</span><span class="lines">@@ -67,7 +64,7 @@

</span><span class="cx">             var isHorizontalFlow = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn;

</span><span class="cx"> 

</span><span class="cx">             var container = document.createElement('div');

</span><del>-            container.innerHTML = '&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; style=&quot;-webkit-align-items: baseline;&quot;&gt;' +

</del><ins>+            container.innerHTML = '&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; style=&quot;align-items: baseline;&quot;&gt;' +

</ins><span class="cx">                 '&lt;div&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;' +

</span><span class="cx">                 '&lt;div style=&quot;margin-top:20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;' +

</span><span class="cx">             '&lt;/div&gt;';

</span><span class="lines">@@ -96,6 +93,5 @@

</span><span class="cx">         shouldBe('firstChild.offsetLeft', 'lastChild.offsetLeft');

</span><span class="cx"> }

</span><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;

</del><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexaligncolumnexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-column-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,4 @@

</span><del>-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexaligncolumnhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-column.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-column.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-column.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -12,7 +12,7 @@

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="cx"> .vertical {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox :nth-child(1) {

</span><span class="cx">     background-color: blue;

</span><span class="lines">@@ -36,25 +36,28 @@

</span><span class="cx">     background-color: lime;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot;&gt;

</span><del>-    &lt;div data-offset-x=0 data-expected-width=600 data-expected-height=40 style=&quot;-webkit-flex: 1;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-x=0 data-expected-width=600 data-expected-height=40 style=&quot;-webkit-flex: 1; -webkit-align-self: stretch; &quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-x=0 data-expected-width=20 data-expected-height=40 style=&quot;-webkit-flex: 1; -webkit-align-self: flex-start; width: 20px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-x=580 data-expected-width=20 data-expected-height=40 style=&quot;-webkit-flex: 1; -webkit-align-self: flex-end; width: 20px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-x=290 data-expected-width=20 data-expected-height=40 style=&quot;-webkit-flex: 1; -webkit-align-self: center; width: 20px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-x=0 data-expected-width=20 data-expected-height=40 style=&quot;-webkit-flex: 1; -webkit-align-self: baseline; width: 20px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-offset-x=0 data-expected-width=600 data-expected-height=40 style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-x=0 data-expected-width=600 data-expected-height=40 style=&quot;flex: 1; align-self: stretch; &quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-x=0 data-expected-width=20 data-expected-height=40 style=&quot;flex: 1; align-self: flex-start; width: 20px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-x=580 data-expected-width=20 data-expected-height=40 style=&quot;flex: 1; align-self: flex-end; width: 20px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-x=290 data-expected-width=20 data-expected-height=40 style=&quot;flex: 1; align-self: center; width: 20px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-x=0 data-expected-width=20 data-expected-height=40 style=&quot;flex: 1; align-self: baseline; width: 20px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column vertical&quot;&gt;

</span><del>-    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=&quot;-webkit-flex: 1;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=&quot;-webkit-flex: 1; -webkit-align-self: stretch; &quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=20 style=&quot;-webkit-flex: 1; -webkit-align-self: flex-start; height: 20px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=220 data-expected-width=100 data-expected-height=20 style=&quot;-webkit-flex: 1; -webkit-align-self: flex-end; height: 20px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=110 data-expected-width=100 data-expected-height=20 style=&quot;-webkit-flex: 1; -webkit-align-self: center; height: 20px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=20 style=&quot;-webkit-flex: 1; -webkit-align-self: baseline; height: 20px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=240 style=&quot;flex: 1; align-self: stretch; &quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=20 style=&quot;flex: 1; align-self: flex-start; height: 20px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=220 data-expected-width=100 data-expected-height=20 style=&quot;flex: 1; align-self: flex-end; height: 20px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=110 data-expected-width=100 data-expected-height=20 style=&quot;flex: 1; align-self: center; height: 20px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=0 data-expected-width=100 data-expected-height=20 style=&quot;flex: 1; align-self: baseline; height: 20px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignendexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-end-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-end-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-end-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,64 +1,50 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

</ins><span class="cx"> horizontal-tb ltr row

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse

</span><del>-PASS

-horizontal-bt ltr row

-PASS

-horizontal-bt rtl row

-PASS

-horizontal-bt ltr column

-PASS

-horizontal-bt rtl column

-PASS

-horizontal-bt ltr row-reverse

-PASS

-horizontal-bt rtl row-reverse

-PASS

-horizontal-bt ltr column-reverse

-PASS

-horizontal-bt rtl column-reverse

-PASS

</del><span class="cx"> vertical-lr ltr row

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignendhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-end.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-end.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-end.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -30,20 +30,20 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function positionAsString(position)

</span><span class="lines">@@ -58,12 +58,6 @@

</span><span class="cx">         'column': { rtl: [0, 0], ltr: [-10, 0]},

</span><span class="cx">         'column-reverse': { rtl: [0, -10], ltr: [-10, -10]}

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        'row': { rtl: [-10, 0], ltr: [0, 0]},

-        'row-reverse': { rtl: [0, 0], ltr: [-10, 0]},

-        'column': { rtl: [0, -10], ltr: [-10, -10]},

-        'column-reverse': { rtl: [0, 0], ltr: [-10, 0]}

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         'row': { rtl: [-10, -10], ltr: [-10, 0]},

</span><span class="cx">         'row-reverse': { rtl: [-10, 0], ltr: [-10, -10]},

</span><span class="lines">@@ -78,7 +72,7 @@

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,33 +1,34 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

</ins><span class="cx"> ahem

</span><span class="cx"> 

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> ahem

</span><span class="cx"> 

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignmaxexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-max-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,4 +1,6 @@

</span><del>-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignmaxhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-max.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-max.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-max.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -13,7 +13,7 @@

</span><span class="cx">     border: 0;

</span><span class="cx"> }

</span><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox :nth-child(1) {

</span><span class="cx">     background-color: blue;

</span><span class="lines">@@ -25,31 +25,34 @@

</span><span class="cx">     background-color: red;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; max-height: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; max-height: 25px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0; max-height: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0; height: 50px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;25&quot; style=&quot;flex: 1 0 0; max-height: 25px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; style=&quot;width: 200px&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;150&quot; style=&quot;-webkit-flex: 1 0 20px; max-width: 150px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 20px; width: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: 1 0 20px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;150&quot; style=&quot;flex: 1 0 20px; max-width: 150px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 20px; width: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; style=&quot;flex: 1 0 20px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-rl&quot; style=&quot;height: 60px&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 20px; max-width: 110px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 20px; width: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 0 20px; max-width: 50px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 20px; max-width: 110px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 20px; width: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0 20px; max-width: 50px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column vertical-rl&quot; style=&quot;height: 50px&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 100px; max-height: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 100px; height: 50px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;25&quot; style=&quot;-webkit-flex: 1 0 100px; max-height: 25px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 100px; max-height: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 100px; height: 50px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;25&quot; style=&quot;flex: 1 0 100px; max-height: 25px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignpercentheightexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-percent-height-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-percent-height-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-percent-height-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>-PASS

</del><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignpercentheighthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -28,8 +28,11 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 50%;&quot;&gt;

</span><span class="cx">   &lt;div data-expected-height=&quot;50&quot;  data-offset-y=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;height: 50px;&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignstretchexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-stretch-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,6 +1,7 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignstretchhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-stretch.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-stretch.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-stretch.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -30,8 +30,11 @@

</span><span class="cx">   background-color: yellow !important;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;width: 600px&quot;&gt;

</span><span class="cx">   &lt;div data-expected-height=&quot;100&quot; class=&quot;flex-one&quot; style=&quot;position: relative&quot;&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; class=&quot;absolute&quot; style=&quot;bottom:0;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -42,19 +45,7 @@

</span><span class="cx">   &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div style=&quot;-webkit-writing-mode: horizontal-bt&quot;&gt;

-&lt;div class=&quot;flexbox&quot; style=&quot;width: 600px&quot;&gt;

-  &lt;div data-expected-height=&quot;100&quot; class=&quot;flex-one&quot; style=&quot;position: relative&quot;&gt;

-    &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; class=&quot;absolute&quot; style=&quot;top:0;&quot;&gt;&lt;/div&gt;

-  &lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; class=&quot;flex-one&quot; style=&quot;height: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; class=&quot;flex-one&quot; style=&quot;position: relative&quot;&gt;

-    &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; class=&quot;absolute&quot; style=&quot;bottom:0;&quot;&gt;&lt;/div&gt;

-  &lt;/div&gt;

-&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div style=&quot;-webkit-writing-mode: vertical-rl&quot;&gt;

</del><ins>+&lt;div style=&quot;writing-mode: vertical-rl&quot;&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 200px&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex-one&quot; style=&quot;position: relative&quot;&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; class=&quot;absolute&quot; style=&quot;left:0;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -66,7 +57,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div style=&quot;-webkit-writing-mode: vertical-lr&quot;&gt;

</del><ins>+&lt;div style=&quot;writing-mode: vertical-lr&quot;&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 200px&quot;&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; class=&quot;flex-one&quot; style=&quot;position: relative&quot;&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; class=&quot;absolute&quot; style=&quot;right:0;&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignverticalwritingmodeexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,31 +1,32 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

</ins><span class="cx"> ahem

</span><span class="cx"> 

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> ahem

</span><span class="cx"> 

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> ahem

</span><span class="cx"> 

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> ahem

</span><span class="cx"> 

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignverticalwritingmodehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -9,7 +9,8 @@

</span><span class="cx">     height: 100px;

</span><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

+    -webkit-text-orientation: sideways-right;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox div {

</span><span class="cx">     border: 0;

</span><span class="lines">@@ -49,8 +50,11 @@

</span><span class="cx">     background-color: salmon;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;!-- stretch is the default align-items so these flexitems should all have the same height. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -68,8 +72,7 @@

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one&quot; style=&quot;width: 50px; margin: 0 20px 0 10px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;90&quot; data-offset-x=&quot;10&quot; class=&quot;flex-one&quot; style=&quot;margin: 0 20px 0 10px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;120&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot;&gt;

</span><del>-    &lt;!-- Since no parent has a fixed height, this div shrink-wraps. --&gt;

-    &lt;div data-expected-width=&quot;0&quot; style=&quot;width: 100%; background-color:black&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-width=&quot;120&quot; style=&quot;width: 100%; background-color:black&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -90,8 +93,8 @@

</span><span class="cx">   &lt;div data-expected-width=&quot;0&quot; data-offset-x=&quot;100&quot; class=&quot;flex-one align-self-flex-start&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; margin: 0 auto&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; margin: 0 auto 0 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; margin: 0 0 0 auto&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; margin: 0 auto 0 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; margin: 0 0 0 auto&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; margin: 0 25px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;30&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; margin: 0 20px 0 10px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -101,8 +104,8 @@

</span><span class="cx">   &lt;div data-expected-width=&quot;0&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-end&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; margin: 0 auto&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; margin: 0 auto 0 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; margin: 0 0 0 auto&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; margin: 0 auto 0 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; margin: 0 0 0 auto&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; margin: 0 25px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;10&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; margin: 0 20px 0 10px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -112,8 +115,8 @@

</span><span class="cx">   &lt;div data-expected-width=&quot;0&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-center&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; margin: 0 auto&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; margin: 0 auto 0 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; margin: 0 0 0 auto&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; margin: 0 auto 0 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; margin: 0 0 0 auto&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; margin: 0 25px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;20&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; margin: 0 20px 0 10px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -129,11 +132,11 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; -webkit-writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; -webkit-writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; -webkit-writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one&quot; style=&quot;width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;width: 100px; -webkit-writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one align-self-flex-start&quot; style=&quot;width: 50px; writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-center&quot; style=&quot;width: 50px; writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-flex-end&quot; style=&quot;width: 50px; writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;50&quot; class=&quot;flex-one&quot; style=&quot;width: 50px; margin: auto 0; writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;width: 100px; writing-mode: horizontal-tb;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -158,7 +161,7 @@

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-writing-mode: vertical-lr&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;writing-mode: vertical-lr&quot;&gt;

</ins><span class="cx">   &lt;div id=&quot;baseline6&quot; class=&quot;flex-one align-self-baseline&quot;&gt;ahem&lt;/div&gt;

</span><span class="cx">   &lt;div id=&quot;baseline7&quot; class=&quot;flex-one align-self-baseline&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;width: 50px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;25&quot; class=&quot;flex-one align-self-center&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;width: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -166,7 +169,7 @@

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-writing-mode: vertical-lr&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;writing-mode: vertical-lr&quot;&gt;

</ins><span class="cx">   &lt;div id=&quot;baseline8&quot; class=&quot;flex-one align-self-baseline&quot;&gt;ahem&lt;/div&gt;

</span><span class="cx">   &lt;div id=&quot;baseline9&quot; class=&quot;flex-one align-self-baseline&quot;&gt;&lt;br&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;width: 50px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;50&quot; data-offset-x=&quot;0&quot; class=&quot;flex-one align-self-baseline&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;width: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexalignhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-align.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-align.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-align.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -48,216 +48,218 @@

</span><span class="cx">     background-color: salmon;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;!-- stretch is the default align-items so these flexitems should all have the same height. --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;100&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; style=&quot;flex: 1 0 0; height: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;60&quot;  data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 60px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;120&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;60&quot;  data-offset-y=&quot;30&quot; style=&quot;-webkit-flex: 1 0 0; height: 60px; margin: auto 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;120&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;60&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;10&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px; margin: 10px 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;20&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;90&quot; data-offset-y=&quot;20&quot; style=&quot;-webkit-flex: 1 0 0; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;120&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;

-    &lt;!-- Since no parent has a fixed height, this div shrink-wraps. --&gt;

-    &lt;div data-expected-height=&quot;0&quot; style=&quot;height: 100%; background-color:black&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;60&quot;  data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 60px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;120&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;60&quot;  data-offset-y=&quot;30&quot; style=&quot;flex: 1 0 0; height: 60px; margin: auto 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;120&quot; style=&quot;flex: 1 0 0; margin: auto 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;60&quot; style=&quot;flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 1 0 0; height: 100px; margin: 10px 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;20&quot; style=&quot;flex: 1 0 0; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;90&quot; data-offset-y=&quot;20&quot; style=&quot;flex: 1 0 0; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;120&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;

+    &lt;div data-expected-height=&quot;120&quot; style=&quot;height: 100%; background-color:black&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: flex-start&quot;&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: flex-start&quot;&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: flex-end&quot;&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: flex-end&quot;&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: center&quot;&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: center&quot;&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: baseline&quot;&gt;

-    &lt;div style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: baseline&quot;&gt;

+    &lt;div style=&quot;flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: stretch&quot;&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: stretch&quot;&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: flex-start&quot;&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: flex-start; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-align-self: flex-end; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-align-self: center; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;50&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;30&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 30px 0 auto;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;80&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: auto 0 20px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: stretch; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: flex-start&quot;&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: auto; flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: auto; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: flex-start; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;align-self: flex-end; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;align-self: center; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;50&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;30&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: 30px 0 auto;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;80&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: auto 0 20px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: stretch; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: flex-end&quot;&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: flex-start; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-align-self: flex-end; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-align-self: center; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: stretch; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: flex-end&quot;&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: auto; flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;align-self: auto; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: flex-start; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;align-self: flex-end; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;align-self: center; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: stretch; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: center&quot;&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: flex-start; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-align-self: flex-end; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-align-self: center; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: stretch; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: center&quot;&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: auto; flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;align-self: auto; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: flex-start; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;align-self: flex-end; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;align-self: center; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: stretch; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: baseline&quot;&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: flex-start; -webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: flex-start; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-align-self: flex-end; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-align-self: center; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: stretch; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: baseline&quot;&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: flex-start; flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: auto; flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: flex-start; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;align-self: flex-end; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;align-self: center; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: stretch; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: stretch&quot;&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: auto; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: flex-start; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-align-self: flex-end; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-align-self: center; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;20&quot; style=&quot;-webkit-align-self: baseline; -webkit-flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-align-self: stretch; -webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: stretch&quot;&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: auto; flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: auto; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: flex-start; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;align-self: flex-end; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;align-self: center; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;20&quot; style=&quot;align-self: baseline; flex: 1 0 0; margin: 20px;&quot;&gt;&lt;div style=&quot;display:inline-block;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;align-self: stretch; flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 100px;&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;50&quot;  data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100%;&quot;&gt;

</del><ins>+  &lt;div data-expected-height=&quot;50&quot;  data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100%;&quot;&gt;

</ins><span class="cx">     &lt;div data-expected-height=&quot;100&quot; style=&quot;height: 100%; background-color:black&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 100px;&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;50&quot;  data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;50&quot;  data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;70&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 70px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px; margin: auto 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;70&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 70px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;70&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 70px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;70&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 70px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; height: 50px; margin: auto 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;70&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 70px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;70&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 70px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: auto 0 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: 25px 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;20&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: flex-start;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px; margin: auto 0 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px; margin: 25px 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;20&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: auto 0 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: 25px 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;40&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 0 0; align-self: flex-end;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px; margin: auto 0 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px; margin: 25px 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;40&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: auto 0 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: 25px 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;30&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;0&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: center;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px; margin: auto 0 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px; margin: 0 0 auto&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px; margin: 25px 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;30&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px; margin: 20px 0 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px; -webkit-writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px; -webkit-writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px; -webkit-writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px; -webkit-writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px; -webkit-writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px; writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px; writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px; writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 50px; writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; height: 50px; margin: auto 0; writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px; writing-mode: vertical-rl;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-start; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: flex-start; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: center; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; height: 50px; margin: auto 0&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;20&quot; data-offset-y=&quot;20&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline; height: 20px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;30&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline; height: 10px; margin: 30px 0 10px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;30&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline; height: 10px; margin: 20px 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;20&quot; data-offset-y=&quot;20&quot; style=&quot;flex: 1 0 0; align-self: baseline; height: 20px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;30&quot; style=&quot;flex: 1 0 0; align-self: baseline; height: 10px; margin: 30px 0 10px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;30&quot; style=&quot;flex: 1 0 0; align-self: baseline; height: 10px; margin: 20px 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;max-height: 20px&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;40&quot; data-offset-y=&quot;-10&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center; height: 40px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;40&quot; data-offset-y=&quot;-20&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: flex-end; height: 40px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;40&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 40px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;20&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;40&quot; data-offset-y=&quot;-10&quot; style=&quot;flex: 1 0 0; align-self: center; height: 40px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;40&quot; data-offset-y=&quot;-20&quot; style=&quot;flex: 1 0 0; align-self: flex-end; height: 40px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;40&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 40px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;20&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div id=&quot;baseline1&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline;&quot;&gt;ahem&lt;/div&gt;

-  &lt;div id=&quot;baseline2&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: center;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

-  &lt;div id=&quot;baseline3&quot; data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div id=&quot;baseline1&quot; style=&quot;flex: 1 0 0; align-self: baseline;&quot;&gt;ahem&lt;/div&gt;

+  &lt;div id=&quot;baseline2&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: baseline;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 0 0; align-self: center;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

+  &lt;div id=&quot;baseline3&quot; data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0; align-self: baseline;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div id=&quot;baseline4&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline;&quot;&gt;ahem&lt;/div&gt;

-  &lt;div id=&quot;baseline5&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline;&quot;&gt;&lt;br&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-align-self: baseline;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div id=&quot;baseline4&quot; style=&quot;flex: 1 0 0; align-self: baseline;&quot;&gt;ahem&lt;/div&gt;

+  &lt;div id=&quot;baseline5&quot; style=&quot;flex: 1 0 0; align-self: baseline;&quot;&gt;&lt;br&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; align-self: baseline;&quot;&gt;&lt;img src=&quot;../../fast/replaced/resources/1x1-blue.png&quot; style=&quot;height: 50px; vertical-align: middle&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div id=&quot;results&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexcolumnrelayoutassertexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+

+PASS .flexbox 1 

+You should see a green rectangle, 20px high.

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexcolumnrelayoutasserthtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-column-relayout-assert.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,23 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox {

+    background-color: green;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;p&gt;You should see a green rectangle, 20px high.&lt;/p&gt;

+

+&lt;div class=&quot;flexbox column&quot; data-expected-height=&quot;40&quot;&gt;

+  &lt;div id=&quot;child&quot; data-expected-height=&quot;40&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+document.getElementById('child').offsetHeight;

+document.getElementById('child').style.padding = &quot;20px&quot;;

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexfactorlessthanoneexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,24 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexfactorlessthanonehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-factor-less-than-one.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,177 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+

+html, body {

+  margin: 0;

+  padding: 0;

+}

+

+.container {

+  height: 100px;

+  width: 100px;

+  border: 1px solid black;

+}

+

+.child-flex-grow-0-75 {

+  background-color: lime;

+  flex-grow: 0.75;

+}

+

+.child-flex-grow-0-5 {

+  background-color: green;

+  flex-grow: 0.5;

+}

+

+.child-flex-grow-0-25 {

+  background-color: red;

+  flex-grow: 0.25;

+}

+

+.child-flex-shrink-0-5 {

+  background-color: green;

+  flex-shrink: 0.5;

+  width: 200px;

+  height: 200px;

+}

+

+.child-flex-shrink-0-25 {

+  background-color: red;

+  flex-shrink: 0.25;

+  width: 200px;

+  height: 200px;

+}

+

+.basis-0 {

+  flex-basis: 0;

+}

+

+.basis {

+  flex-basis: 30px;

+}

+

+.basis-big {

+  flex-basis: 100px;

+}

+

+.vertical {

+  writing-mode: vertical-rl;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox');&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25&quot; data-expected-width=&quot;25&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container column&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25&quot; data-expected-height=&quot;25&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container column vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5 &quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25 &quot; data-expected-width=&quot;25&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5 &quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25 &quot; data-expected-height=&quot;25&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5 basis&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25 basis&quot; data-expected-width=&quot;40&quot;&gt;&lt;/div&gt;

+ &lt;/div&gt;

+ 

+&lt;div class=&quot;flexbox container column&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5 basis&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25 basis&quot; data-expected-height=&quot;40&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5 basis&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25 basis&quot; data-expected-height=&quot;40&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container column vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5 basis&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-25 basis&quot; data-expected-width=&quot;40&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;!-- And now, the shrink cases --&gt;

+&lt;div class=&quot;flexbox container&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5&quot; data-expected-width=&quot;150&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25&quot; data-expected-width=&quot;125&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container column&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25&quot; data-expected-height=&quot;125&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container column vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5 &quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25 &quot; data-expected-width=&quot;125&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5 &quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25 &quot; data-expected-height=&quot;125&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5 basis-big&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25 basis-big&quot; data-expected-width=&quot;75&quot;&gt;&lt;/div&gt;

+ &lt;/div&gt;

+ 

+&lt;div class=&quot;flexbox container column&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5 basis-big&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25 basis-big&quot; data-expected-height=&quot;75&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5 basis-big&quot; data-expected-height=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25 basis-big&quot; data-expected-height=&quot;75&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container column vertical&quot;&gt;

+  &lt;div class=&quot;child-flex-shrink-0-5 basis-big&quot; data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-shrink-0-25 basis-big&quot; data-expected-width=&quot;75&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;!-- Interaction of min-width: auto with fractional flex basis --&gt;

+&lt;div class=&quot;flexbox container&quot; style=&quot;background-color: red;&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-25 basis-0&quot; style=&quot;background-color: green;&quot; data-expected-width=&quot;10&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;child-flex-grow-0-75 basis-0&quot; data-expected-width=&quot;90&quot;&gt;

+    &lt;div style=&quot;width: 90px;&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;!-- centering should still center; same for other justify-content values --&gt;

+&lt;div class=&quot;flexbox container justify-content-center&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5&quot; data-expected-width=&quot;50&quot; data-offset-x=&quot;26&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container justify-content-space-around&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5&quot; data-expected-width=&quot;50&quot; data-offset-x=&quot;26&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox container justify-content-flex-end&quot;&gt;

+  &lt;div class=&quot;child-flex-grow-0-5&quot; data-expected-width=&quot;50&quot; data-offset-x=&quot;51&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;/body&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflow2expectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-2-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-2-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-2-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,12 +1,14 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflow2html"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-2.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-2.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-2.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,7 +6,7 @@

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 600px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="lines">@@ -19,32 +19,28 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-.bt {

-    -webkit-writing-mode: horizontal-bt;

-}

-

</del><span class="cx"> .vertical-rl, .vertical-lr, .column, .column-reverse {

</span><span class="cx">     height: 600px;

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox &gt; .first {

</span><span class="lines">@@ -62,90 +58,93 @@

</span><span class="cx">     height: 10px;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;275&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;425&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;275&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;425&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox rtl&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;175&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;175&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;100&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox row-reverse&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;375&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;375&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox rtl row-reverse&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;75&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;75&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column-reverse&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column rtl&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;480&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;480&quot; style=&quot;flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column-reverse rtl&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;480&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;480&quot; style=&quot;flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot; data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-lr column&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-lr column-reverse&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-rl column&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-rl column-reverse&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot; data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot; data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowautomarginsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,128 +1,98 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

</ins><span class="cx"> horizontal-tb ltr row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse physical

</span><del>-PASS

-horizontal-tb ltr row-reverse physical

-PASS

-horizontal-tb rtl row-reverse physical

-PASS

-horizontal-bt ltr row physical

-PASS

-horizontal-bt rtl row physical

-PASS

-horizontal-bt ltr column physical

-PASS

-horizontal-bt rtl column physical

-PASS

-horizontal-bt ltr row-reverse physical

-PASS

-horizontal-bt rtl row-reverse physical

-PASS

-horizontal-bt ltr row-reverse physical

-PASS

-horizontal-bt rtl row-reverse physical

-PASS

</del><ins>+horizontal-tb ltr column-reverse physical

+horizontal-tb rtl column-reverse physical

</ins><span class="cx"> vertical-lr ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse physical

</span><del>-PASS

-vertical-lr ltr row-reverse physical

-PASS

-vertical-lr rtl row-reverse physical

-PASS

</del><ins>+vertical-lr ltr column-reverse physical

+vertical-lr rtl column-reverse physical

</ins><span class="cx"> vertical-rl ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse physical

</span><del>-PASS

-vertical-rl ltr row-reverse physical

-PASS

-vertical-rl rtl row-reverse physical

-PASS

</del><ins>+vertical-rl ltr column-reverse physical

+vertical-rl rtl column-reverse physical

</ins><span class="cx"> horizontal-tb ltr row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse logical

</span><del>-PASS

-horizontal-tb ltr row-reverse logical

-PASS

-horizontal-tb rtl row-reverse logical

-PASS

-horizontal-bt ltr row logical

-PASS

-horizontal-bt rtl row logical

-PASS

-horizontal-bt ltr column logical

-PASS

-horizontal-bt rtl column logical

-PASS

-horizontal-bt ltr row-reverse logical

-PASS

-horizontal-bt rtl row-reverse logical

-PASS

-horizontal-bt ltr row-reverse logical

-PASS

-horizontal-bt rtl row-reverse logical

-PASS

</del><ins>+horizontal-tb ltr column-reverse logical

+horizontal-tb rtl column-reverse logical

</ins><span class="cx"> vertical-lr ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse logical

</span><del>-PASS

-vertical-lr ltr row-reverse logical

-PASS

-vertical-lr rtl row-reverse logical

-PASS

</del><ins>+vertical-lr ltr column-reverse logical

+vertical-lr rtl column-reverse logical

</ins><span class="cx"> vertical-rl ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse logical

</span><del>-PASS

-vertical-rl ltr row-reverse logical

-PASS

-vertical-rl rtl row-reverse logical

-PASS

</del><ins>+vertical-rl ltr column-reverse logical

+vertical-rl rtl column-reverse logical

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespaceassertexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,6 @@

</span><ins>+* { display: flex; padding-bottom: 20pt; min-height: 0.7%; margin-top: 6000%; flex-shrink: 0; flex-basis: 7000%; }

+

+PASS

+crbug.com/380201: Don't shrink below border/padding when stretching children within a flexbox with no available space.

+

+window.checkLayout('abbr');

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespaceasserthtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-assert.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,19 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+* {

+    display: flex;

+    padding-bottom: 20pt;

+    min-height: 0.7%;

+    margin-top: 6000%;

+    flex-shrink: 0;

+    flex-basis: 7000%;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

+&lt;abbr data-expected-height=30210268&gt;

+    &lt;input&gt;&lt;/input&gt;

+&lt;/abbr&gt;

+&lt;p&gt; crbug.com/380201: Don't shrink below border/padding when stretching children within a flexbox with no available space.&lt;/p&gt;

+&lt;script&gt;

+    window.checkLayout('abbr');

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespaceexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,4 +1,9 @@

</span><del>-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+ 

+ 

+ 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowautomarginsnoavailablespacehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins-no-available-space.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -15,8 +15,7 @@

</span><span class="cx">     margin: 20px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

-    -moz-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: blue;

</span><span class="lines">@@ -23,8 +22,11 @@

</span><span class="cx">     margin: auto;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container&quot;&gt;

</span><span class="cx">   &lt;div class=&quot;flexbox row&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowautomarginshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,13 +8,13 @@

</span><span class="cx">     display: inline-block;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .title {

</span><span class="cx">     margin-top: 1em;

</span><span class="lines">@@ -26,28 +26,25 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .physical {

</span><span class="cx">     margin: 10px 20px 30px 40px;

</span><span class="lines">@@ -77,8 +74,11 @@

</span><span class="cx">     background-color: red;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function positionAsString(position)

</span><span class="lines">@@ -101,7 +101,7 @@

</span><span class="cx">             flexbox: physicalFlexBoxPosition,

</span><span class="cx">             column: [20, 20, 80, 23],

</span><span class="cx">             row: [20, 20, 80, 23],

</span><del>-            'column-reverse': [20, 20, 80, 23],

</del><ins>+            'column-reverse': [20, 20, 80, 73],

</ins><span class="cx">             'row-reverse': [20, 20, 80, 23],

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -109,11 +109,11 @@

</span><span class="cx">             flexbox: physicalFlexBoxPosition,

</span><span class="cx">             column: [20, 20, 80, 23],

</span><span class="cx">             row: [20, 20, 80, 23],

</span><del>-            'column-reverse': [20, 20, 80, 23],

</del><ins>+            'column-reverse': [20, 20, 80, 73],

</ins><span class="cx">             'row-reverse': [20, 20, 80, 23],

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

</del><ins>+    'vertical-lr': {

</ins><span class="cx">         rtl: {

</span><span class="cx">             container: physicalContainerSize,

</span><span class="cx">             flexbox: physicalFlexBoxPosition,

</span><span class="lines">@@ -120,24 +120,6 @@

</span><span class="cx">             column: [20, 20, 80, 73],

</span><span class="cx">             row: [20, 20, 80, 73],

</span><span class="cx">             'column-reverse': [20, 20, 80, 73],

</span><del>-            'row-reverse': [20, 20, 80, 73],

-        },

-        ltr : {

-            container: physicalContainerSize,

-            flexbox: physicalFlexBoxPosition,

-            column: [20, 20, 80, 73],

-            row: [20, 20, 80, 73],

-            'column-reverse': [20, 20, 80, 73],

-            'row-reverse': [20, 20, 80, 73],

-        }

-    },

-    'vertical-lr': {

-        rtl: {

-            container: physicalContainerSize,

-            flexbox: physicalFlexBoxPosition,

-            column: [20, 20, 80, 73],

-            row: [20, 20, 80, 73],

-            'column-reverse': [20, 20, 40, 73],

</del><span class="cx">             'row-reverse': [20, 20, 80, 23],

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -145,7 +127,7 @@

</span><span class="cx">             flexbox: physicalFlexBoxPosition,

</span><span class="cx">             column: [20, 20, 80, 23],

</span><span class="cx">             row: [20, 20, 80, 23],

</span><del>-            'column-reverse': [20, 20, 40, 23],

</del><ins>+            'column-reverse': [20, 20, 80, 23],

</ins><span class="cx">             'row-reverse': [20, 20, 80, 73],

</span><span class="cx">         }

</span><span class="cx">     },

</span><span class="lines">@@ -155,7 +137,7 @@

</span><span class="cx">             flexbox: physicalFlexBoxPosition,

</span><span class="cx">             column: [20, 20, 80, 73],

</span><span class="cx">             row: [20, 20, 80, 73],

</span><del>-            'column-reverse': [20, 20, 48, 73],

</del><ins>+            'column-reverse': [20, 20, 80, 73],

</ins><span class="cx">             'row-reverse': [20, 20, 80, 23],

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -163,7 +145,7 @@

</span><span class="cx">             flexbox: physicalFlexBoxPosition,

</span><span class="cx">             column: [20, 20, 80, 23],

</span><span class="cx">             row: [20, 20, 80, 23],

</span><del>-            'column-reverse': [20, 20, 48, 23],

</del><ins>+            'column-reverse': [20, 20, 80, 23],

</ins><span class="cx">             'row-reverse': [20, 20, 80, 73],

</span><span class="cx">         }

</span><span class="cx">     }

</span><span class="lines">@@ -176,7 +158,7 @@

</span><span class="cx">             flexbox: [20, 10],

</span><span class="cx">             column: [20, 20, 22, 73],

</span><span class="cx">             row: [20, 20, 22, 73],

</span><del>-            'column-reverse': [20, 20, 92, 10],

</del><ins>+            'column-reverse': [20, 20, 22, 73],

</ins><span class="cx">             'row-reverse': [20, 20, 22, 73],

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -184,28 +166,10 @@

</span><span class="cx">             flexbox: [40, 10],

</span><span class="cx">             column: [20, 20, 118, 73],

</span><span class="cx">             row: [20, 20, 118, 73],

</span><del>-            'column-reverse': [20, 20, 48, 10],

</del><ins>+            'column-reverse': [20, 20, 118, 73],

</ins><span class="cx">             'row-reverse': [20, 20, 118, 73],

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: {

-            container: [160, 140],

-            flexbox: [20, 30],

-            column: [20, 20, 22, 47],

-            row: [20, 20, 22, 110],

-            'column-reverse': [20, 20, 92, 47],

-            'row-reverse': [20, 20, 22, 110],

-        },

-        ltr : {

-            container: [160, 140],

-            flexbox: [40, 30],

-            column: [20, 20, 118, 47],

-            row: [20, 20, 118, 110],

-            'column-reverse': [20, 20, 48, 47],

-            'row-reverse': [20, 20, 118, 110],

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: {

</span><span class="cx">             container: [140, 160],

</span><span class="lines">@@ -212,7 +176,7 @@

</span><span class="cx">             flexbox: [10, 20],

</span><span class="cx">             column: [20, 20, 73, 22],

</span><span class="cx">             row: [20, 20, 73, 22],

</span><del>-            'column-reverse': [20, 20, 23, 92],

</del><ins>+            'column-reverse': [20, 20, 73, 22],

</ins><span class="cx">             'row-reverse': [20, 20, 73, 22],

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -220,7 +184,7 @@

</span><span class="cx">             flexbox: [10, 40],

</span><span class="cx">             column: [20, 20, 73, 118],

</span><span class="cx">             row: [20, 20, 73, 118],

</span><del>-            'column-reverse': [20, 20, 23, 48],

</del><ins>+            'column-reverse': [20, 20, 73, 118],

</ins><span class="cx">             'row-reverse': [20, 20, 73, 118],

</span><span class="cx">         }

</span><span class="cx">     },

</span><span class="lines">@@ -229,23 +193,23 @@

</span><span class="cx">             container: [140, 160],

</span><span class="cx">             flexbox: [30, 20],

</span><span class="cx">             column: [20, 20, 47, 22],

</span><del>-            row: [20, 20, 110, 22],

-            'column-reverse': [20, 20, 47, 92],

-            'row-reverse': [20, 20, 110, 22],

</del><ins>+            row: [20, 20, 47, 22],

+            'column-reverse': [20, 20, 47, 22],

+            'row-reverse': [20, 20, 47, 22],

</ins><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="cx">             container: [140, 160],

</span><span class="cx">             flexbox: [30, 40],

</span><span class="cx">             column: [20, 20, 47, 118],

</span><del>-            row: [20, 20, 110, 118],

-            'column-reverse': [20, 20, 47, 48],

-            'row-reverse': [20, 20, 110, 118],

</del><ins>+            row: [20, 20, 47, 118],

+            'column-reverse': [20, 20, 47, 118],

+            'row-reverse': [20, 20, 47, 118],

</ins><span class="cx">         }

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

-var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

+var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</ins><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> var marginTypes = ['physical', 'logical'];

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowborderexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,128 +1,98 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

</ins><span class="cx"> horizontal-tb rtl row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse logical

</span><del>-PASS

-horizontal-bt rtl row physical

-PASS

-horizontal-bt rtl row logical

-PASS

-horizontal-bt ltr row physical

-PASS

-horizontal-bt ltr row logical

-PASS

-horizontal-bt rtl column physical

-PASS

-horizontal-bt rtl column logical

-PASS

-horizontal-bt ltr column physical

-PASS

-horizontal-bt ltr column logical

-PASS

-horizontal-bt rtl row-reverse physical

-PASS

-horizontal-bt rtl row-reverse logical

-PASS

-horizontal-bt ltr row-reverse physical

-PASS

-horizontal-bt ltr row-reverse logical

-PASS

-horizontal-bt rtl column-reverse physical

-PASS

-horizontal-bt rtl column-reverse logical

-PASS

-horizontal-bt ltr column-reverse physical

-PASS

-horizontal-bt ltr column-reverse logical

-PASS

</del><span class="cx"> vertical-lr rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse logical

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowborderhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-border.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-border.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-border.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,7 +8,7 @@

</span><span class="cx">     display: inline-block;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><span class="lines">@@ -28,28 +28,25 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;    

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .physical {

</span><span class="cx">     border-width: 10px 20px 30px 40px;

</span><span class="lines">@@ -79,8 +76,11 @@

</span><span class="cx">     background-color: red;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function positionAsString(position)

</span><span class="lines">@@ -116,20 +116,6 @@

</span><span class="cx">             row: [90, 20, 48, 23]

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: {

-            size: physicalFlexBoxOffsetSize,

-            position: physicalFlexBoxClientPosition,

-            column: [20, 70, 118, 23],

-            row: [90, 20, 48, 73]

-        },

-        ltr : {

-            size: physicalFlexBoxOffsetSize,

-            position: physicalFlexBoxClientPosition,

-            column: [20, 70, 48, 23],

-            row: [90, 20, 48, 73]

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: {

</span><span class="cx">             size: physicalFlexBoxOffsetSize,

</span><span class="lines">@@ -175,20 +161,6 @@

</span><span class="cx">             row: [90, 20, 48, 23]

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: {

-            size: [160, 140],

-            position: [20, 30],

-            column: [20, 70, 92, 47],

-            row: [90, 20, 22, 97]

-        },

-        ltr : {

-            size: [160, 140],

-            position: [40, 30],

-            column: [20, 70, 48, 47],

-            row: [90, 20, 48, 97]

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: {

</span><span class="cx">             size: [140, 160],

</span><span class="lines">@@ -219,7 +191,7 @@

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['rtl', 'ltr'];

</span><span class="cx"> var marginTypes = ['physical', 'logical'];

</span><span class="lines">@@ -243,7 +215,7 @@

</span><span class="cx">                 container.setAttribute('data-expected-height', expectations.size[1]);

</span><span class="cx"> 

</span><span class="cx">                 container.innerHTML = '\n&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; ' + positionAsString(expectations.position) + ' ' + offsetSizeAsString(expectations.size) + '&gt;\n' +

</span><del>-                    '&lt;div style=&quot;-webkit-flex: 1 auto; height: 20px; width: 20px;&quot; ' + asString(expectations[flexFlow.replace(&quot;-reverse&quot;, &quot;&quot;)]) + '&gt;&lt;/div&gt;\n' +

</del><ins>+                    '&lt;div style=&quot;flex: 1 auto; height: 20px; width: 20px;&quot; ' + asString(expectations[flexFlow.replace(&quot;-reverse&quot;, &quot;&quot;)]) + '&gt;&lt;/div&gt;\n' +

</ins><span class="cx">                 '&lt;/div&gt;\n';

</span><span class="cx"> 

</span><span class="cx">                 document.body.appendChild(container);   

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,12 +1,14 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowinitialexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-initial-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-initial-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-initial-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,11 +1,5 @@

<del>-Tests that 'initial' is handled correctly for the -webkit-flex-flow shorthand.

</del><ins>+Tests that 'initial' is handled correctly for the flex-flow shorthand.

</ins><span class="cx"> 

<del>-On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.

</del><span class="cx"> 

</span><ins>+PASS initial value is correct 

</ins><span class="cx"> 

</span><del>-PASS window.getComputedStyle(test1).webkitFlexDirection is &quot;row&quot;

-PASS window.getComputedStyle(test2).webkitFlexDirection is &quot;row&quot;

-PASS successfullyParsed is true

-

-TEST COMPLETE

-

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowinitialhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-initial.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-initial.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-initial.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,28 +1,31 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> #test1 {

</span><del>-  -webkit-flex-flow: column;

</del><ins>+  flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> #test1 {

</span><del>-  -webkit-flex-flow: initial;

</del><ins>+  flex-flow: initial;

</ins><span class="cx"> }

</span><span class="cx"> #test2 {

</span><del>-  -webkit-flex-direction: column;

</del><ins>+  flex-direction: column;

</ins><span class="cx"> }

</span><span class="cx"> #test2 {

</span><del>-  -webkit-flex-direction: initial;

</del><ins>+  flex-direction: initial;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><ins>+&lt;p&gt;Tests that 'initial' is handled correctly for the flex-flow shorthand.&lt;/p&gt;

+&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;span id=&quot;test1&quot;&gt;&lt;/span&gt;

</span><span class="cx"> &lt;span id=&quot;test2&quot;&gt;&lt;/span&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;script&gt;

</span><del>-description(&quot;Tests that 'initial' is handled correctly for the -webkit-flex-flow shorthand.&quot;);

-value1 = window.getComputedStyle(test1).webkitFlexDirection;

-value2 = window.getComputedStyle(test2).webkitFlexDirection;

-shouldBeEqualToString('window.getComputedStyle(test1).webkitFlexDirection', 'row');

-shouldBeEqualToString('window.getComputedStyle(test2).webkitFlexDirection', 'row');

</del><ins>+value1 = window.getComputedStyle(test1).flexDirection;

+value2 = window.getComputedStyle(test2).flexDirection;

+test(function() {

+assert_equals(window.getComputedStyle(test1).flexDirection, &quot;row&quot;);

+assert_equals(window.getComputedStyle(test2).flexDirection, &quot;row&quot;);

+}, &quot;initial value is correct&quot;);

</ins><span class="cx"> if (window.testRunner)

</span><span class="cx">    testRunner.dumpAsText();

</span><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowmarginsautosizeexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,144 +1,114 @@

</span><ins>+

+FAIL .flexbox 1 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 2 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 3 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 4 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 5 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 6 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 7 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 8 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 9 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 10 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 11 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 12 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 13 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 14 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 15 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+FAIL .flexbox 16 assert_equals: 

+&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

+&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;&lt;/div&gt;

+width expected 90 but got 60

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

</ins><span class="cx"> horizontal-tb rtl row

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse

</span><del>-PASS

-horizontal-bt rtl row

-PASS

-horizontal-bt ltr row

-PASS

-horizontal-bt rtl column

-PASS

-horizontal-bt ltr column

-PASS

-horizontal-bt rtl row-reverse

-PASS

-horizontal-bt ltr row-reverse

-PASS

-horizontal-bt rtl column-reverse

-PASS

-horizontal-bt ltr column-reverse

-PASS

</del><span class="cx"> vertical-lr rtl row

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-lr ltr row

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-lr rtl column

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-lr ltr column

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-lr rtl row-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-lr ltr row-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-lr rtl column-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr rtl column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-lr ltr column-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-lr ltr column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl rtl row

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl ltr row

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr row&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl rtl column

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl ltr column

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr column&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl rtl row-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl ltr row-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr row-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl rtl column-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

-

-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl rtl column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del><span class="cx"> vertical-rl ltr column-reverse

</span><del>-FAIL:

-Expected 90 for width, but got 60. 

</del><span class="cx"> 

</span><del>-&lt;div class=&quot;container&quot; data-expected-width=&quot;90&quot; data-expected-height=&quot;90&quot;&gt;&lt;div class=&quot;flexbox vertical-rl ltr column-reverse&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot;&gt;

-&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; data-expected-width=&quot;20&quot; data-expected-height=&quot;20&quot; data-offset-x=&quot;48&quot; data-offset-y=&quot;23&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;&lt;/div&gt;

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowmarginsautosizehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,7 +8,7 @@

</span><span class="cx">     display: inline-block;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     margin: 10px 20px 30px 40px;

</span><span class="cx"> }

</span><span class="lines">@@ -22,28 +22,25 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="cx">     margin: 13px 2px 17px 8px;

</span><span class="lines">@@ -50,14 +47,15 @@

</span><span class="cx">     background-color: blue;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> 

<del>-// The vertical test cases are failing because of the orthogonal writing modes.

-// https://bugs.webkit.org/show_bug.cgi?id=70769

-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['rtl', 'ltr'];

</span><span class="cx"> 

</span><span class="lines">@@ -79,7 +77,7 @@

</span><span class="cx">             container.setAttribute('data-expected-height', 90);

</span><span class="cx"> 

</span><span class="cx">             container.innerHTML = '&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; ' + flexboxExpectations + '&gt;\n' +

</span><del>-                '&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; ' + flexItemExpectations + '&gt;&lt;/div&gt;\n' +

</del><ins>+                '&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; ' + flexItemExpectations + '&gt;&lt;/div&gt;\n' +

</ins><span class="cx">             '&lt;/div&gt;';

</span><span class="cx"> 

</span><span class="cx">             document.body.appendChild(container);

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowmarginsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,128 +1,98 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

</ins><span class="cx"> horizontal-tb rtl row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse logical

</span><del>-PASS

-horizontal-bt rtl row physical

-PASS

-horizontal-bt rtl row logical

-PASS

-horizontal-bt ltr row physical

-PASS

-horizontal-bt ltr row logical

-PASS

-horizontal-bt rtl column physical

-PASS

-horizontal-bt rtl column logical

-PASS

-horizontal-bt ltr column physical

-PASS

-horizontal-bt ltr column logical

-PASS

-horizontal-bt rtl row-reverse physical

-PASS

-horizontal-bt rtl row-reverse logical

-PASS

-horizontal-bt ltr row-reverse physical

-PASS

-horizontal-bt ltr row-reverse logical

-PASS

-horizontal-bt rtl row-reverse physical

-PASS

-horizontal-bt rtl row-reverse logical

-PASS

-horizontal-bt ltr row-reverse physical

-PASS

-horizontal-bt ltr row-reverse logical

-PASS

</del><span class="cx"> vertical-lr rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse logical

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowmarginshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-margins.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-margins.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-margins.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,7 +8,7 @@

</span><span class="cx">     display: inline-block;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><span class="lines">@@ -23,28 +23,25 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;    

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .physical {

</span><span class="cx">     margin: 10px 20px 30px 40px;

</span><span class="lines">@@ -74,8 +71,11 @@

</span><span class="cx">     background-color: red;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function positionAsString(position)

</span><span class="lines">@@ -106,20 +106,6 @@

</span><span class="cx">             row: [90, 20, 48, 23]

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: {

-            container: physicalContainerSize,

-            flexbox: physicalFlexBoxPosition,

-            column: [20, 70, 118, 23],

-            row: [90, 20, 48, 73]

-        },

-        ltr : {

-            container: physicalContainerSize,

-            flexbox: physicalFlexBoxPosition,

-            column: [20, 70, 48, 23],

-            row: [90, 20, 48, 73]

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: {

</span><span class="cx">             container: physicalContainerSize,

</span><span class="lines">@@ -165,20 +151,6 @@

</span><span class="cx">             row: [90, 20, 48, 23]

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: {

-            container: [160, 140],

-            flexbox: [20, 30],

-            column: [20, 70, 92, 47],

-            row: [90, 20, 22, 97]

-        },

-        ltr : {

-            container: [160, 140],

-            flexbox: [40, 30],

-            column: [20, 70, 48, 47],

-            row: [90, 20, 48, 97]

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: {

</span><span class="cx">             container: [140, 160],

</span><span class="lines">@@ -209,7 +181,7 @@

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];

</span><span class="cx"> var directions = ['rtl', 'ltr'];

</span><span class="cx"> var marginTypes = ['physical', 'logical'];

</span><span class="lines">@@ -236,7 +208,7 @@

</span><span class="cx">                 container.setAttribute('data-expected-height', expectations.container[1]);

</span><span class="cx"> 

</span><span class="cx">                 container.innerHTML = '&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; ' + flexboxExpectations + '&gt;\n' +

</span><del>-                    '&lt;div style=&quot;-webkit-flex: 1 auto; height: 20px; width: 20px;&quot; ' + flexItemExpectations + '&gt;&lt;/div&gt;\n' +

</del><ins>+                    '&lt;div style=&quot;flex: 1 auto; height: 20px; width: 20px;&quot; ' + flexItemExpectations + '&gt;&lt;/div&gt;\n' +

</ins><span class="cx">                 '&lt;/div&gt;';

</span><span class="cx"> 

</span><span class="cx">                 document.body.appendChild(container);   

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexfloworientationsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,64 +1,50 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

</ins><span class="cx"> horizontal-tb rtl row

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse

</span><del>-PASS

-horizontal-bt rtl row

-PASS

-horizontal-bt ltr row

-PASS

-horizontal-bt rtl column

-PASS

-horizontal-bt ltr column

-PASS

-horizontal-bt rtl row-reverse

-PASS

-horizontal-bt ltr row-reverse

-PASS

-horizontal-bt rtl column-reverse

-PASS

-horizontal-bt ltr column-reverse

-PASS

</del><span class="cx"> vertical-lr rtl row

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexfloworientationshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,13 +8,13 @@

</span><span class="cx">     display: inline-block;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .title {

</span><span class="cx">     margin-top: 1em;

</span><span class="lines">@@ -26,28 +26,25 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;    

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: blue;

</span><span class="lines">@@ -59,8 +56,11 @@

</span><span class="cx">     background-color: red;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function asString(position)

</span><span class="lines">@@ -87,24 +87,6 @@

</span><span class="cx">             ltr: [[80, 0], [60, 0]]

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        column: {

-            rtl: [[80, 80], [80, 60]],

-            ltr: [[0, 80], [0, 60]]

-        },

-        'column-reverse': {

-            rtl: [[80, 0], [80, 20]],

-            ltr: [[0, 0], [0, 20]]

-        },

-        row: {

-            rtl: [[80, 80], [60, 80]],

-            ltr: [[0, 80], [20, 80]]

-        },

-        'row-reverse': {

-            rtl: [[0, 80], [20, 80]],

-            ltr: [[80, 80], [60, 80]]

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         column: {

</span><span class="cx">             rtl: [[0, 80], [20, 80]],

</span><span class="lines">@@ -143,26 +125,10 @@

</span><span class="cx">     }

</span><span class="cx"> };

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['rtl', 'ltr'];

</span><span class="cx"> 

</span><del>-function physicalWritingMode(writingMode, flexFlow, direction)

-{

-    if (flexFlow.indexOf('column') == -1)

-        return writingMode;

-

-    var isReverse = flexFlow.indexOf('reverse') != -1;

-    switch (writingMode) {

-    case 'horizontal-tb':

-    case 'horizontal-bt':

-        return isReverse ? 'vertical-rl' : 'vertical-lr';

-    case 'vertical-lr':

-    case 'vertical-rl':

-        return isReverse ? 'horizontal-bt' : 'horizontal-tb';

-    }

-}

-

</del><span class="cx"> writingModes.forEach(function(writingMode) {

</span><span class="cx">     flexFlows.forEach(function(flexFlow) {

</span><span class="cx">         directions.forEach(function(direction) {

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowoverflowexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,64 +1,50 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

</ins><span class="cx"> horizontal-tb rtl row

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse

</span><del>-PASS

-horizontal-bt rtl row

-PASS

-horizontal-bt ltr row

-PASS

-horizontal-bt rtl column

-PASS

-horizontal-bt ltr column

-PASS

-horizontal-bt rtl row-reverse

-PASS

-horizontal-bt ltr row-reverse

-PASS

-horizontal-bt rtl column-reverse

-PASS

-horizontal-bt ltr column-reverse

-PASS

</del><span class="cx"> vertical-lr rtl row

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowoverflowhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,7 +8,7 @@

</span><span class="cx">     display: inline-block;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><span class="lines">@@ -23,35 +23,35 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;    

</del><ins>+    flex-flow: row;    

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: blue;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function positionAsString(position)

</span><span class="lines">@@ -73,12 +73,6 @@

</span><span class="cx">         'rtl-column-reverse': [-5, -5],

</span><span class="cx">         'ltr-column-reverse': [0, -5],

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: [-5, -5],

-        ltr: [0, -5],

-        'rtl-column-reverse': [-5, 0],

-        'ltr-column-reverse': [0, 0],

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: [0, -5],

</span><span class="cx">         ltr: [0, 0],

</span><span class="lines">@@ -93,7 +87,7 @@

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['rtl', 'ltr'];

</span><span class="cx"> 

</span><span class="lines">@@ -119,7 +113,7 @@

</span><span class="cx">                 flowDirection = direction + &quot;-column-reverse&quot;;

</span><span class="cx"> 

</span><span class="cx">             container.innerHTML = '\n&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; ' + sizeAsString(containerSize) + '&gt;\n' +

</span><del>-                '&lt;div style=&quot;-webkit-flex: 1 0 auto; width: 105px; height: 105px;&quot; ' + sizeAsString([105, 105])  + ' ' + positionAsString(expectations[writingMode][flowDirection]) + '&gt;&lt;/div&gt;\n' +

</del><ins>+                '&lt;div style=&quot;flex: 1 0 auto; width: 105px; height: 105px;&quot; ' + sizeAsString([105, 105])  + ' ' + positionAsString(expectations[writingMode][flowDirection]) + '&gt;&lt;/div&gt;\n' +

</ins><span class="cx">             '&lt;/div&gt;\n';

</span><span class="cx"> 

</span><span class="cx">             document.body.appendChild(container);   

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowpaddingexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,128 +1,98 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

</ins><span class="cx"> horizontal-tb rtl row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse logical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse physical

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse logical

</span><del>-PASS

-horizontal-bt rtl row physical

-PASS

-horizontal-bt rtl row logical

-PASS

-horizontal-bt ltr row physical

-PASS

-horizontal-bt ltr row logical

-PASS

-horizontal-bt rtl column physical

-PASS

-horizontal-bt rtl column logical

-PASS

-horizontal-bt ltr column physical

-PASS

-horizontal-bt ltr column logical

-PASS

-horizontal-bt rtl row-reverse physical

-PASS

-horizontal-bt rtl row-reverse logical

-PASS

-horizontal-bt ltr row-reverse physical

-PASS

-horizontal-bt ltr row-reverse logical

-PASS

-horizontal-bt rtl column-reverse physical

-PASS

-horizontal-bt rtl column-reverse logical

-PASS

-horizontal-bt ltr column-reverse physical

-PASS

-horizontal-bt ltr column-reverse logical

-PASS

</del><span class="cx"> vertical-lr rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse logical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse physical

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse logical

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowpaddinghtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow-padding.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow-padding.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow-padding.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,7 +8,7 @@

</span><span class="cx">     display: inline-block;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><span class="lines">@@ -23,28 +23,25 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;    

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .physical {

</span><span class="cx">     padding: 10px 20px 30px 40px;

</span><span class="lines">@@ -71,8 +68,11 @@

</span><span class="cx">     background-color: green;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function positionAsString(position)

</span><span class="lines">@@ -94,7 +94,7 @@

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [30, 100, 110, 10],

</span><span class="cx">             flexitemrow: [100, 50, 40, 10],

</span><del>-            childcolumn: [20, 20, 118, 23],

</del><ins>+            childcolumn: [20, 70, 118, 23],

</ins><span class="cx">             childrow: [90, 20, 48, 23]

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -101,32 +101,16 @@

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [30, 100, 40, 10],

</span><span class="cx">             flexitemrow: [100, 50, 40, 10],

</span><del>-            childcolumn: [20, 20, 48, 23],

</del><ins>+            childcolumn: [20, 70, 48, 23],

</ins><span class="cx">             childrow: [90, 20, 48, 23]

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: {

-            containersize: horizontalContainerSize,

-            flexitemcolumn: [30, 100, 110, 10],

-            flexitemrow: [100, 50, 40, 60],

-            childcolumn: [20, 20, 118, 73],

-            childrow: [90, 20, 48, 73]

-        },

-        ltr : {

-            containersize: horizontalContainerSize,

-            flexitemcolumn: [30, 100, 40, 10],

-            flexitemrow: [100, 50, 40, 60],

-            childcolumn: [20, 20, 48, 73],

-            childrow: [90, 20, 48, 73]

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: {

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 50, 40, 60],

</span><span class="cx">             flexitemrow: [30, 100, 40, 10],

</span><del>-            childcolumn: [20, 20, 48, 73],

</del><ins>+            childcolumn: [90, 20, 48, 73],

</ins><span class="cx">             childrow: [20, 70, 48, 23]

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -133,7 +117,7 @@

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 50, 40, 10],

</span><span class="cx">             flexitemrow: [30, 100, 40, 10],

</span><del>-            childcolumn: [20, 20, 48, 23],

</del><ins>+            childcolumn: [90, 20, 48, 23],

</ins><span class="cx">             childrow: [20, 70, 48, 23]

</span><span class="cx">         }

</span><span class="cx">     },

</span><span class="lines">@@ -142,7 +126,7 @@

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 50, 40, 60],

</span><span class="cx">             flexitemrow: [30, 100, 110, 10],

</span><del>-            childcolumn: [20, 20, 118, 73],

</del><ins>+            childcolumn: [90, 20, 48, 73],

</ins><span class="cx">             childrow: [20, 70, 118, 23]

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -149,7 +133,7 @@

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 50, 40, 10],

</span><span class="cx">             flexitemrow: [30, 100, 110, 10],

</span><del>-            childcolumn: [20, 20, 118, 23],

</del><ins>+            childcolumn: [90, 20, 48, 23],

</ins><span class="cx">             childrow: [20, 70, 118, 23]

</span><span class="cx">         }

</span><span class="cx">     }

</span><span class="lines">@@ -161,7 +145,7 @@

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [30, 100, 90, 10],

</span><span class="cx">             flexitemrow: [100, 50, 20, 10],

</span><del>-            childcolumn: [20, 20, 92, 23],

</del><ins>+            childcolumn: [20, 70, 92, 23],

</ins><span class="cx">             childrow: [90, 20, 22, 23]

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -168,32 +152,16 @@

</span><span class="cx">             containersize: horizontalContainerSize,

</span><span class="cx">             flexitemcolumn: [30, 100, 40, 10],

</span><span class="cx">             flexitemrow: [100, 50, 40, 10],

</span><del>-            childcolumn: [20, 20, 48, 23],

</del><ins>+            childcolumn: [20, 70, 48, 23],

</ins><span class="cx">             childrow: [90, 20, 48, 23]

</span><span class="cx">         }

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        rtl: {

-            containersize: horizontalContainerSize,

-            flexitemcolumn: [30, 100, 90, 30],

-            flexitemrow: [100, 50, 20, 80],

-            childcolumn: [20, 20, 92, 97],

-            childrow: [90, 20, 22, 97]

-        },

-        ltr : {

-            containersize: horizontalContainerSize,

-            flexitemcolumn: [30, 100, 40, 30],

-            flexitemrow: [100, 50, 40, 80],

-            childcolumn: [20, 20, 48, 97],

-            childrow: [90, 20, 48, 97]

-        }

-    },

</del><span class="cx">     'vertical-lr': {

</span><span class="cx">         rtl: {

</span><span class="cx">             containersize: verticalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 30, 10, 90],

</span><span class="cx">             flexitemrow: [50, 100, 10, 20],

</span><del>-            childcolumn: [20, 20, 23, 92],

</del><ins>+            childcolumn: [70, 20, 23, 92],

</ins><span class="cx">             childrow: [20, 90, 23, 22]

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -200,7 +168,7 @@

</span><span class="cx">             containersize: verticalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 30, 10, 40],

</span><span class="cx">             flexitemrow: [50, 100, 10, 40],

</span><del>-            childcolumn: [20, 20, 23, 48],

</del><ins>+            childcolumn: [70, 20, 23, 48],

</ins><span class="cx">             childrow: [20, 90, 23, 48]

</span><span class="cx">         }

</span><span class="cx">     },

</span><span class="lines">@@ -209,7 +177,7 @@

</span><span class="cx">             containersize: verticalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 30, 30, 90],

</span><span class="cx">             flexitemrow: [50, 100, 80, 20],

</span><del>-            childcolumn: [20, 20, 97, 92],

</del><ins>+            childcolumn: [70, 20, 47, 92],

</ins><span class="cx">             childrow: [20, 90, 97, 22]

</span><span class="cx">         },

</span><span class="cx">         ltr : {

</span><span class="lines">@@ -216,13 +184,13 @@

</span><span class="cx">             containersize: verticalContainerSize,

</span><span class="cx">             flexitemcolumn: [100, 30, 30, 40],

</span><span class="cx">             flexitemrow: [50, 100, 80, 40],

</span><del>-            childcolumn: [20, 20, 97, 48],

</del><ins>+            childcolumn: [70, 20, 47, 48],

</ins><span class="cx">             childrow: [20, 90, 97, 48]

</span><span class="cx">         }

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['rtl', 'ltr'];

</span><span class="cx"> var marginTypes = ['physical', 'logical'];

</span><span class="lines">@@ -246,7 +214,7 @@

</span><span class="cx">                 container.setAttribute('data-expected-height', expectations.containersize[1]);

</span><span class="cx"> 

</span><span class="cx">                 container.innerHTML = '\n&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot;&gt;\n' +

</span><del>-                    '&lt;div style=&quot;-webkit-flex: 1 auto; width: 20px; height: 20px;&quot; ' + asString(expectations['flexitem' + flexFlow.replace('-reverse', '')]) + '&gt;\n' +

</del><ins>+                    '&lt;div style=&quot;flex: 1 auto; width: 20px; height: 20px;&quot; ' + asString(expectations['flexitem' + flexFlow.replace('-reverse', '')]) + '&gt;\n' +

</ins><span class="cx">                         '&lt;div style=&quot;width:100%; height:100%&quot; ' + asString(expectations['child' + flexFlow.replace('-reverse', '')]) + '&gt;&lt;/div&gt;' +

</span><span class="cx">                     '&lt;/div&gt;\n' +

</span><span class="cx">                 '&lt;/div&gt;\n';

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexflowhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-flow.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-flow.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-flow.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,7 +6,7 @@

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 600px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="lines">@@ -19,32 +19,28 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-.bt {

-    -webkit-writing-mode: horizontal-bt;

-}

-

</del><span class="cx"> .vertical-rl, .vertical-lr, .column, .column-reverse {

</span><span class="cx">     height: 600px;

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="lines">@@ -62,90 +58,93 @@

</span><span class="cx">     height: 10px;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;275&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;425&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;275&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;425&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox rtl&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;175&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;175&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;100&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox row-reverse&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;375&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;375&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox rtl row-reverse&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;75&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;75&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-x=&quot;75&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column-reverse&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0; margin: auto 200px auto 150px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;200&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column rtl&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;480&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;480&quot; style=&quot;flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column-reverse rtl&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;480&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;480&quot; style=&quot;flex: 1 0 0; margin: auto 100px auto 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0; -webkit-padding-start: 200px&quot;&gt;&lt;div data-offset-y=&quot;150&quot; data-offset-x=&quot;380&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 1 0 0; -webkit-margin-end: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-lr column&quot;&gt;

</span><del>-  &lt;div data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-lr column-reverse&quot;&gt;

</span><del>-  &lt;div data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-rl column&quot;&gt;

</span><del>-  &lt;div data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-offset-x=&quot;100&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><span class="cx"> &lt;div data-expected-height=&quot;600&quot; class=&quot;flexbox vertical-rl column-reverse&quot;&gt;

</span><del>-  &lt;div data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-offset-x=&quot;0&quot; data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; min-width: 300px; margin-bottom: 100px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;500&quot; data-offset-y=&quot;100&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemchildoverflowexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-item-child-overflow-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>-PASS

</del><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemchildoverflowhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -5,9 +5,9 @@

</span><span class="cx">     margin: 0;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     position: relative;

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="cx">     height: 0;

</span><span class="lines">@@ -19,8 +19,11 @@

</span><span class="cx">     background-color: blue;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div data-expected-height=0 data-offset-x=0 data-offset-y=0 class=&quot;flexbox&quot;&gt;

</span><span class="cx">     &lt;div data-expected-height=0 data-offset-x=0 data-offset-y=0&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemcontainsstrictexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-item-contains-strict-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-item-contains-strict-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-item-contains-strict-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,44 @@

</span><ins>+Stretched:

+

+Column

+ 

+Row

+ 

+Column

+ 

+Row

+Flex-start:

+

+Column

+ 

+Row

+ 

+Column

+ 

+Row

+

+PASS .inline-flex 1 

+PASS .inline-flex 2 

+FAIL .inline-flex 3 assert_equals: 

+&lt;div class=&quot;inline-flex&quot; style=&quot;align-items: flex-start;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Row&lt;/div&gt;

+&lt;/div&gt;

+width expected 0 but got 30

+FAIL .inline-flex 4 assert_equals: 

+&lt;div class=&quot;inline-flex&quot; style=&quot;flex-direction: column; align-items: flex-start;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Column&lt;/div&gt;

+&lt;/div&gt;

+width expected 0 but got 52

+PASS .inline-flex 5 

+PASS .inline-flex 6 

+FAIL .inline-flex 7 assert_equals: 

+&lt;div class=&quot;inline-flex&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Row&lt;/div&gt;

+&lt;/div&gt;

+width expected 0 but got 30

+FAIL .inline-flex 8 assert_equals: 

+&lt;div class=&quot;inline-flex&quot; style=&quot;display: inline-flex; flex-direction: column;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Column&lt;/div&gt;

+&lt;/div&gt;

+width expected 0 but got 52

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemcontainsstricthtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-item-contains-strict.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-item-contains-strict.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-item-contains-strict.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,49 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+.inline-flex {

+  display: inline-flex;

+  outline: solid;

+  background: red;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.inline-flex')&quot;&gt;

+&lt;p&gt;Stretched:&lt;/p&gt;

+&lt;div class=&quot;inline-flex&quot; style=&quot;display: inline-flex; flex-direction: column;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Column&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flex&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Row&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flex&quot; style=&quot;display: inline-flex; flex-direction: column;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;

+  &lt;div style=&quot;contain: strict; width: 30px; height: 30px;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;Column&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flex&quot; style=&quot;display: inline-flex;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;

+  &lt;div style=&quot;contain: strict; width: 30px; height: 30px;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;Row&lt;/div&gt;

+&lt;/div&gt;

+

+

+&lt;p&gt;Flex-start:&lt;/p&gt;

+&lt;div class=&quot;inline-flex&quot; style=&quot;flex-direction: column; align-items: flex-start;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Column&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flex&quot; style=&quot;align-items: flex-start;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;

+  &lt;div style=&quot;contain: strict;&quot; data-expected-width=&quot;0&quot; data-expected-height=&quot;0&quot;&gt;Row&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flex&quot; style=&quot;flex-direction: column; align-items: flex-start;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;

+  &lt;div style=&quot;contain: strict; width: 30px; height: 30px;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;Column&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flex&quot; style=&quot;align-items: flex-start;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;

+  &lt;div style=&quot;contain: strict; width: 30px; height: 30px;&quot; data-expected-width=&quot;30&quot; data-expected-height=&quot;30&quot;&gt;Row&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemfirstLinevalidexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,7 @@

</span><ins>+

+PASS .flexbox 1 

</ins><span class="cx"> This test flex item should ignore flex container's firstLine pseudo element, but flex item's firstLine should be valid.

</span><span class="cx"> 

<span class="cx"> The first item.

</span><span class="cx"> 

<span class="cx"> The second item.

</span><del>-

-PASS

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemfirstLinevalidhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-item-firstLine-valid.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,8 +6,11 @@

</span><span class="cx">     p::first-line { line-height: 100px;}

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;This test flex item should ignore flex container's firstLine pseudo element, but flex item's firstLine should be valid.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexjustifycontentexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-justify-content-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-justify-content-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-justify-content-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,15 +1,17 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexjustifycontenthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-justify-content.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-justify-content.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-justify-content.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,7 +6,7 @@

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 600px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="lines">@@ -13,7 +13,7 @@

</span><span class="cx"> .flexbox div {

</span><span class="cx">     height: 20px;

</span><span class="cx">     border: 0;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox :nth-child(1) {

</span><span class="lines">@@ -26,75 +26,78 @@

</span><span class="cx">     background-color: red;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;100&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;200&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: flex-end&quot;&gt;

-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;300&quot; style=&quot;-webkit-flex: 0 0 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: flex-end&quot;&gt;

+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;300&quot; style=&quot;flex: 0 0 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: center&quot;&gt;

-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;150&quot; style=&quot;-webkit-flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: center&quot;&gt;

+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;150&quot; style=&quot;flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;250&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;350&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: center&quot;&gt;

-  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;200&quot; style=&quot;-webkit-flex: 1 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;400&quot; style=&quot;-webkit-flex: 1 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: center&quot;&gt;

+  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;200&quot; style=&quot;flex: 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;400&quot; style=&quot;flex: 1 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- True centering on overflow. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: center&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: center&quot;&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;800&quot; data-offset-x=&quot;-100&quot; style=&quot;width: 800px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: space-between&quot;&gt;

-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: space-between&quot;&gt;

+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;250&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: space-between&quot;&gt;

-  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;200&quot; style=&quot;-webkit-flex: 1 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;400&quot; style=&quot;-webkit-flex: 1 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: space-between&quot;&gt;

+  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;200&quot; style=&quot;flex: 1 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;400&quot; style=&quot;flex: 1 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If there's only one child, we justify-content: flex-start. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: space-between&quot;&gt;

-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: space-between&quot;&gt;

+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: space-around&quot;&gt;

-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: space-around&quot;&gt;

+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;50&quot; style=&quot;flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;250&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;450&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If there's only one child, we justify-content center. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: space-around&quot;&gt;

-  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;250&quot; style=&quot;-webkit-flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: space-around&quot;&gt;

+  &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;250&quot; style=&quot;flex: 1 0 0; max-width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- True centering on overflow. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: space-around&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: space-around&quot;&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;800&quot; data-offset-x=&quot;-100&quot; style=&quot;width: 800px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Make sure we don't crash with no children. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: space-around&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: space-around&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;!-- margin:auto applies before justify-content. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: flex-end&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: flex-end&quot;&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;100&quot; style=&quot;width: 100px; margin-right: auto&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; style=&quot;width: 100px;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -101,15 +104,15 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- The justify-content does nothing here because we are shrinking. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: flex-end&quot;&gt;

-  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 0 1 300px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: flex-end&quot;&gt;

+  &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 0 1 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;200&quot; style=&quot;width: 200px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;400&quot; style=&quot;width: 200px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- We overflow the flexbox (no negative flexing) and align the end. The overflow is to the left. --&gt;

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-justify-content: flex-end&quot;&gt;

-  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;-100&quot; style=&quot;-webkit-flex: 1 0 300px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;justify-content: flex-end&quot;&gt;

+  &lt;div data-expected-width=&quot;300&quot; data-offset-x=&quot;-100&quot; style=&quot;flex: 1 0 300px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;200&quot; style=&quot;width: 200px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-width=&quot;200&quot; data-offset-x=&quot;400&quot; style=&quot;width: 200px;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexlonghandparsingexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,38 +1,38 @@

<del>-Tests the interaction between the -webkit-flex shorthand propery and the -webkit-flex-grow, -webkit-flex-shrink, and -webkit-flex-basis longhand properties.

</del><ins>+Tests the interaction between the flex shorthand propery and the flex-grow, flex-shrink, and flex-basis longhand properties.

</ins><span class="cx"> 

<span class="cx"> On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS flexitem.style.webkitFlex is &quot;&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 auto&quot;

-PASS flexitem.style.webkitFlexGrow is &quot;2&quot;

-PASS getComputedStyle(flexitem).webkitFlexGrow is &quot;2&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 1 auto&quot;

-PASS flexitem.style.webkitFlexShrink is &quot;3&quot;

-PASS getComputedStyle(flexitem).webkitFlexShrink is &quot;3&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 3 auto&quot;

-PASS flexitem.style.webkitFlexBasis is &quot;0px&quot;

-PASS getComputedStyle(flexitem).webkitFlexBasis is &quot;0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 3 0px&quot;

-PASS flexitem.style.webkitFlexShrink is &quot;0&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 0 0px&quot;

-PASS flexitem.style.webkitFlexBasis is &quot;50%&quot;

-PASS getComputedStyle(flexitem).webkitFlexBasis is &quot;50%&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 0 50%&quot;

-PASS flexitem.style.webkitFlexBasis is &quot;auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlexGrow is &quot;0&quot;

-PASS flexitem.style.webkitFlexShrink is &quot;0&quot;

-PASS flexitem.style.webkitFlexBasis is &quot;auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;1.5 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1.5 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;3 1 0px&quot;

-PASS flexitem.style.webkitFlexGrow is &quot;3&quot;

-PASS flexitem.style.webkitFlexShrink is &quot;1&quot;

-PASS flexitem.style.webkitFlexBasis is &quot;0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;3 1 0px&quot;

</del><ins>+PASS flexitem.style.flex is &quot;&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 auto&quot;

+PASS flexitem.style.flexGrow is &quot;2&quot;

+PASS getComputedStyle(flexitem).flexGrow is &quot;2&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 1 auto&quot;

+PASS flexitem.style.flexShrink is &quot;3&quot;

+PASS getComputedStyle(flexitem).flexShrink is &quot;3&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 3 auto&quot;

+PASS flexitem.style.flexBasis is &quot;0px&quot;

+PASS getComputedStyle(flexitem).flexBasis is &quot;0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 3 0px&quot;

+PASS flexitem.style.flexShrink is &quot;0&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 0 0px&quot;

+PASS flexitem.style.flexBasis is &quot;50%&quot;

+PASS getComputedStyle(flexitem).flexBasis is &quot;50%&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 0 50%&quot;

+PASS flexitem.style.flexBasis is &quot;auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flexGrow is &quot;0&quot;

+PASS flexitem.style.flexShrink is &quot;0&quot;

+PASS flexitem.style.flexBasis is &quot;auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;1.5 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1.5 0 auto&quot;

+PASS flexitem.style.flex is &quot;3 1 0px&quot;

+PASS flexitem.style.flexGrow is &quot;3&quot;

+PASS flexitem.style.flexShrink is &quot;1&quot;

+PASS flexitem.style.flexBasis is &quot;0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;3 1 0px&quot;

</ins><span class="cx"> PASS successfullyParsed is true

</span><span class="cx"> 

</span><span class="cx"> TEST COMPLETE

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexlonghandparsinghtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-longhand-parsing.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-longhand-parsing.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-longhand-parsing.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,7 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/js-test.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><span class="cx"> &lt;div id=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -8,61 +8,60 @@

</span><span class="cx">     &lt;div id=&quot;flexitem&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;script&gt;

</span><del>-description('Tests the interaction between the -webkit-flex shorthand propery and the -webkit-flex-grow, -webkit-flex-shrink, and -webkit-flex-basis longhand properties.');

</del><ins>+description('Tests the interaction between the flex shorthand propery and the flex-grow, flex-shrink, and flex-basis longhand properties.');

</ins><span class="cx"> 

</span><span class="cx"> var flexitem = document.getElementById(&quot;flexitem&quot;);

</span><span class="cx"> 

<span class="cx"> // Test default value.

</span><del>-shouldBeEqualToString('flexitem.style.webkitFlex', '');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto');

</del><ins>+shouldBeEqualToString('flexitem.style.flex', '');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlexGrow = 2;

-shouldBeEqualToString('flexitem.style.webkitFlexGrow', '2');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexGrow', '2');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 1 auto');

</del><ins>+flexitem.style.flexGrow = 2;

+shouldBeEqualToString('flexitem.style.flexGrow', '2');

+shouldBeEqualToString('getComputedStyle(flexitem).flexGrow', '2');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlexShrink = 3;

-shouldBeEqualToString('flexitem.style.webkitFlexShrink', '3');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexShrink', '3');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 auto');

</del><ins>+flexitem.style.flexShrink = 3;

+shouldBeEqualToString('flexitem.style.flexShrink', '3');

+shouldBeEqualToString('getComputedStyle(flexitem).flexShrink', '3');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 3 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlexBasis = 0;

-shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 0px');

</del><ins>+flexitem.style.flexBasis = 0;

+shouldBeEqualToString('flexitem.style.flexBasis', '0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flexBasis', '0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 3 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlexShrink = 0;

-shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 0px');

</del><ins>+flexitem.style.flexShrink = 0;

+shouldBeEqualToString('flexitem.style.flexShrink', '0');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlexBasis = '50%';

-shouldBeEqualToString('flexitem.style.webkitFlexBasis', '50%');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '50%');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 50%');

</del><ins>+flexitem.style.flexBasis = '50%';

+shouldBeEqualToString('flexitem.style.flexBasis', '50%');

+shouldBeEqualToString('getComputedStyle(flexitem).flexBasis', '50%');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 50%');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlexBasis = 'auto';

-shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 auto');

</del><ins>+flexitem.style.flexBasis = 'auto';

+shouldBeEqualToString('flexitem.style.flexBasis', 'auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'none';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('flexitem.style.webkitFlexGrow', '0');

-shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0');

-shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'none';

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('flexitem.style.flexGrow', '0');

+shouldBeEqualToString('flexitem.style.flexShrink', '0');

+shouldBeEqualToString('flexitem.style.flexBasis', 'auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlexGrow = 1.5;

-shouldBeEqualToString('flexitem.style.webkitFlex', '1.5 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1.5 0 auto');

</del><ins>+flexitem.style.flexGrow = 1.5;

+shouldBeEqualToString('flexitem.style.flex', '1.5 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.5 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 3;

-shouldBeEqualToString('flexitem.style.webkitFlex', '3 1 0px');

-shouldBeEqualToString('flexitem.style.webkitFlexGrow', '3');

-shouldBeEqualToString('flexitem.style.webkitFlexShrink', '1');

-shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '3 1 0px');

</del><ins>+flexitem.style.flex = 3;

+shouldBeEqualToString('flexitem.style.flex', '3 1 0px');

+shouldBeEqualToString('flexitem.style.flexGrow', '3');

+shouldBeEqualToString('flexitem.style.flexShrink', '1');

+shouldBeEqualToString('flexitem.style.flexBasis', '0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 0px');

</ins><span class="cx"> 

</span><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;

</del><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexnoflexexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-no-flex-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-no-flex-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-no-flex-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,4 @@

</span><del>-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexnoflexhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-no-flex.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-no-flex.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-no-flex.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -5,7 +5,7 @@

</span><span class="cx">     margin: 0;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="lines">@@ -21,24 +21,24 @@

</span><span class="cx">     height: 200px;

</span><span class="cx"> }

</span><span class="cx"> .row div {

</span><del>-    -webkit-flex: 1 auto;

</del><ins>+    flex: 1 auto;

</ins><span class="cx"> }

</span><span class="cx"> .noflex .row :nth-child(1) {

</span><span class="cx">     width: 50px;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-direction: column;

</del><ins>+    flex-direction: column;

</ins><span class="cx">     width: 200px;

</span><span class="cx">     height: 200px;

</span><span class="cx"> }

</span><span class="cx"> .column div {

</span><del>-    -webkit-flex: 1 auto;

</del><ins>+    flex: 1 auto;

</ins><span class="cx"> }

</span><span class="cx"> .noflex .column :nth-child(1) {

</span><span class="cx">     height: 50px;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> &lt;/style&gt;

</span><span class="lines">@@ -49,8 +49,11 @@

</span><span class="cx">     checkLayout('.flexbox');

</span><span class="cx"> }

</span><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;runTest()&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox row&quot;&gt;

</span><span class="cx">     &lt;div data-expected-width=&quot;50&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexonesetsflexbasistozeropxexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,13 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+Flex item with flex: 1

+Flex item with flex: 1 1 0%

+Flex item with flex: 1 1 0px

+Flex item with flex: 1

+Flex item with flex: 1 1 0%

+Flex item with flex: 1 1 0px

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexonesetsflexbasistozeropxhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-one-sets-flex-basis-to-zero-px.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,56 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox &gt; div {

+    font-family: Ahem;

+    font-size: 14px;

+}

+    

+.flex-one-one-zero-percent {

+    flex: 1 1 0%;

+    min-width: 0;

+    min-height: 0;

+}

+

+.flex-one-one-zero-px {

+    flex: 1 1 0px;

+    min-width: 0;

+    min-height: 0;

+}

+

+.vertical {

+    writing-mode: vertical-rl;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/ahem.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox');&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; data-expected-height=&quot;14&quot;&gt;Flex item with flex: 1&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;flex-one-one-zero-percent&quot; data-expected-height=&quot;14&quot;&gt;Flex item with flex: 1 1 0%&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;flex-one-one-zero-px&quot; data-expected-height=&quot;0&quot;&gt;Flex item with flex: 1 1 0px&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column vertical&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; data-expected-width=&quot;14&quot;&gt;Flex item with flex: 1&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column vertical&quot;&gt;

+  &lt;div class=&quot;flex-one-one-zero-percent&quot; data-expected-width=&quot;14&quot;&gt;Flex item with flex: 1 1 0%&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column vertical&quot;&gt;

+  &lt;div class=&quot;flex-one-one-zero-px&quot; data-expected-width=&quot;0&quot;&gt;Flex item with flex: 1 1 0px&lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexorderexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-order-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-order-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-order-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,85 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;style&gt;

+body {

+    margin: 0;

+}

+.horizontal-box {

+    display: flex;

+}

+.horizontal-box div {

+    height: 30px;

+    border: 0;

+    margin-bottom: 10px;

+    flex: 1;

+}

+

+.first {

+    background-color: #0f0;

+}

+.second {

+    background-color: #0d0;

+}

+.third {

+    background-color: #090;

+}

+.fourth {

+    background-color: #060;

+}

+.fifth {

+    background-color: #030;

+}

+&lt;/style&gt;

+&lt;body&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;first&quot;&gt;&lt;/div&gt;&lt;div class=&quot;second&quot;&gt;&lt;/div&gt;&lt;div class=&quot;third&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fourth&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+

+

+&lt;div style=&quot;position:absolute; left: -10000px;&quot;&gt;You should see identical green bars going from light green

+(left) to dark green (right).&lt;/div&gt;

+

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexorderexpectedpng"></a>

<div class="binary"><h4>Deleted: trunk/LayoutTests/css3/flexbox/flex-order-expected.png</h4>

<pre class="diff"><span>

<span class="cx">(Binary files differ)

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexorderexpectedtxt"></a>

<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/flexbox/flex-order-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-order-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-order-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +0,0 @@

<del>-You should see identical green bars going from light green (left) to dark green (right).

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexorderhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-order.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-order.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-order.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -5,13 +5,13 @@

</span><span class="cx">     margin: 0;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-box {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx"> }

</span><span class="cx"> .horizontal-box div {

</span><span class="cx">     height: 30px;

</span><span class="cx">     border: 0;

</span><span class="cx">     margin-bottom: 10px;

</span><del>-    -webkit-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .first {

</span><span class="lines">@@ -30,60 +30,56 @@

</span><span class="cx">     background-color: #030;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script&gt;

-if (window.testRunner)

-    testRunner.dumpAsText(true);

-&lt;/script&gt;

</del><span class="cx"> &lt;body&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;first&quot;  style=&quot;-webkit-order: 0&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot;  style=&quot;order: 0&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;second&quot; style=&quot;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;third&quot;  style=&quot;-webkit-order: 3&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 20&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;third&quot;  style=&quot;order: 3&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;fourth&quot; style=&quot;order: 20&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 4&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot;  style=&quot;-webkit-order: 3&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: 2&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;first&quot;  style=&quot;-webkit-order: 1&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;fourth&quot; style=&quot;order: 4&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot;  style=&quot;order: 3&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; style=&quot;order: 2&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;first&quot;  style=&quot;order: 1&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- The example from the spec. --&gt;

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;third&quot;  style=&quot;-webkit-order: 1&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;third&quot;  style=&quot;order: 1&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;first&quot;  style=&quot;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 1&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: 0&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;fourth&quot; style=&quot;order: 1&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; style=&quot;order: 0&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 2&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;fourth&quot; style=&quot;order: 2&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;second&quot; style=&quot;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div class=&quot;third&quot;  style=&quot;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;first&quot;  style=&quot;-webkit-order: -10&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;first&quot;  style=&quot;order: -10&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 2000000000&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: 1000000000&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot;  style=&quot;-webkit-order: 1000000000&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;first&quot;  style=&quot;-webkit-order: -1000000000&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;fourth&quot; style=&quot;order: 2000000000&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; style=&quot;order: 1000000000&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot;  style=&quot;order: 1000000000&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;first&quot;  style=&quot;order: -1000000000&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Floating numbers are ignored and we use the default of 1 instead. --&gt;

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: 2.5&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 2&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;first&quot;  style=&quot;-webkit-order: -1&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;second&quot; style=&quot;order: 2.5&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;fourth&quot; style=&quot;order: 2&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;first&quot;  style=&quot;order: -1&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;third&quot;  style=&quot;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: 0&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;first&quot;  style=&quot;-webkit-order: -1&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 1&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;second&quot; style=&quot;order: 0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;first&quot;  style=&quot;order: -1&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;fourth&quot; style=&quot;order: 1&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;third&quot;  style=&quot;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -90,26 +86,33 @@

</span><span class="cx"> &lt;!-- Values greater than what can be stored in an int are clamped from

</span><span class="cx">      -2,147,483,646 (int min + 2) to 2,147,483,647. --&gt;

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;third&quot;  style=&quot;-webkit-order: 4000000000&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 3000000000&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;third&quot;  style=&quot;order: 4000000000&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;fourth&quot; style=&quot;order: 3000000000&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;first&quot;  style=&quot;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: 2147483646&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;second&quot; style=&quot;order: 2147483646&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: 4000000000&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;third&quot;  style=&quot;-webkit-order: 3000000000&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;second&quot; style=&quot;order: 4000000000&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;third&quot;  style=&quot;order: 3000000000&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;first&quot;  style=&quot;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div class=&quot;fourth&quot; style=&quot;-webkit-order: 2147483647&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;fourth&quot; style=&quot;order: 2147483647&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;

</span><del>-  &lt;div class=&quot;third&quot;  style=&quot;-webkit-order: -2147483645&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;first&quot;  style=&quot;-webkit-order: -2147483646&quot;&gt;&lt;/div&gt;

-  &lt;div class=&quot;second&quot; style=&quot;-webkit-order: -2147483647&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div class=&quot;third&quot;  style=&quot;order: -2147483647&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;first&quot;  style=&quot;order: -2147483648&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; style=&quot;order: -2147483649&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div class=&quot;fourth&quot; style=&quot;&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><ins>+&lt;div class=&quot;horizontal-box&quot;&gt;

+  &lt;div class=&quot;third&quot;  style=&quot;order: calc(-2147483640 - 7)&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;first&quot;  style=&quot;order: calc(-2147483640 - 8)&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;second&quot; style=&quot;order: calc(-2147483640 - 9)&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;fourth&quot; style=&quot;&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

</ins><span class="cx"> &lt;!-- This should not crash. --&gt;

</span><span class="cx"> &lt;div class=&quot;horizontal-box&quot;&gt;&lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexpropertyparsingexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,110 +1,120 @@

<del>-Tests setting the -webkit-flex propery.

</del><ins>+Tests setting the flex propery.

</ins><span class="cx"> 

<span class="cx"> On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-PASS flexitem.style.webkitFlex is &quot;&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;2 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;1.5 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1.5 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;1 1 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;1 1 1px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 1 1px&quot;

-PASS flexitem.style.webkitFlex is &quot;1 1 2em&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 1 32px&quot;

-PASS flexitem.style.webkitFlex is &quot;1 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;1 0 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 0 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;2 1 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;2 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;3 1 4px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;3 1 4px&quot;

-PASS flexitem.style.webkitFlex is &quot;5.25 1 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;5.25 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;4 1 6em&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;4 1 96px&quot;

-PASS flexitem.style.webkitFlex is &quot;4 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;4 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;1 2 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 2 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;1 2 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 2 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;1.75 2 3px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1.75 2 3px&quot;

-PASS flexitem.style.webkitFlex is &quot;1 2 3px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;1 2 3px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 1 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;3 1 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;3 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 1 0px&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 0px&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;initial&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 1 auto&quot;

-PASS flexitem.style.webkitFlex is &quot;0 0 auto&quot;

-PASS getComputedStyle(flexitem).webkitFlex is &quot;0 0 auto&quot;

</del><ins>+PASS flexitem.style.flex is &quot;&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 auto&quot;

+PASS flexitem.style.flex is &quot;&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 auto&quot;

+PASS flexitem.style.flex is &quot;&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 auto&quot;

+PASS flexitem.style.flex is &quot;2 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 1 0px&quot;

+PASS flexitem.style.flex is &quot;0 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 0px&quot;

+PASS flexitem.style.flex is &quot;1.5 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1.5 1 0px&quot;

+PASS flexitem.style.flex is &quot;1 1 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 1 auto&quot;

+PASS flexitem.style.flex is &quot;1 1 1px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 1 1px&quot;

+PASS flexitem.style.flex is &quot;1 1 2em&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 1 32px&quot;

+PASS flexitem.style.flex is &quot;1 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 1 0px&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 0px&quot;

+PASS flexitem.style.flex is &quot;0 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 0px&quot;

+PASS flexitem.style.flex is &quot;1 0 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 0 0px&quot;

+PASS flexitem.style.flex is &quot;2 1 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;2 1 auto&quot;

+PASS flexitem.style.flex is &quot;3 1 4px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;3 1 4px&quot;

+PASS flexitem.style.flex is &quot;5.25 1 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;5.25 1 auto&quot;

+PASS flexitem.style.flex is &quot;4 1 6em&quot;

+PASS getComputedStyle(flexitem).flex is &quot;4 1 96px&quot;

+PASS flexitem.style.flex is &quot;4 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;4 1 0px&quot;

+PASS flexitem.style.flex is &quot;0 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 0px&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;1 2 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 2 0px&quot;

+PASS flexitem.style.flex is &quot;0 0 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 0px&quot;

+PASS flexitem.style.flex is &quot;1 2 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 2 auto&quot;

+PASS flexitem.style.flex is &quot;1.75 2 3px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1.75 2 3px&quot;

+PASS flexitem.style.flex is &quot;1.75 2 3px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1.75 2 3px&quot;

+PASS flexitem.style.flex is &quot;1.75 2 3px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1.75 2 3px&quot;

+PASS flexitem.style.flex is &quot;1 2 3px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 2 3px&quot;

+PASS flexitem.style.flex is &quot;4 3 calc(20px + 40%)&quot;

+PASS getComputedStyle(flexitem).flex is &quot;4 3 calc(20px + 40%)&quot;

+PASS flexitem.style.flex is &quot;1 2 calc(10px + 50%)&quot;

+PASS getComputedStyle(flexitem).flex is &quot;1 2 calc(10px + 50%)&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 1 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 auto&quot;

+PASS flexitem.style.flex is &quot;3 1 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;3 1 auto&quot;

+PASS flexitem.style.flex is &quot;0 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 0px&quot;

+PASS flexitem.style.flex is &quot;0 1 0px&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 0px&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

+PASS flexitem.style.flex is &quot;initial&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 1 auto&quot;

+PASS flexitem.style.flex is &quot;0 0 auto&quot;

+PASS getComputedStyle(flexitem).flex is &quot;0 0 auto&quot;

</ins><span class="cx"> PASS successfullyParsed is true

</span><span class="cx"> 

</span><span class="cx"> TEST COMPLETE

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexpropertyparsinghtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flex-property-parsing.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-property-parsing.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flex-property-parsing.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,7 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/js-test.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><span class="cx"> &lt;div id=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -8,221 +8,240 @@

</span><span class="cx">     &lt;div id=&quot;flexitem&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;script&gt;

</span><del>-description('Tests setting the -webkit-flex propery.');

</del><ins>+description('Tests setting the flex propery.');

</ins><span class="cx"> 

</span><span class="cx"> var flexbox = document.getElementById(&quot;flexbox&quot;);

</span><span class="cx"> var flexitem = document.getElementById(&quot;flexitem&quot;);

</span><span class="cx"> 

<span class="cx"> // Test default value.

</span><del>-shouldBeEqualToString('flexitem.style.webkitFlex', '');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto');

</del><ins>+shouldBeEqualToString('flexitem.style.flex', '');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');

</ins><span class="cx"> 

<span class="cx"> // Should not inherit.

</span><del>-flexbox.style.webkitFlex = '1 2 3px';

-shouldBeEqualToString('flexitem.style.webkitFlex', '');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto');

</del><ins>+flexbox.style.flex = '1 2 3px';

+shouldBeEqualToString('flexitem.style.flex', '');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');

</ins><span class="cx"> 

<span class="cx"> // Invalid value.

</span><del>-flexitem.style.webkitFlex = 'junk';

-shouldBeEqualToString('flexitem.style.webkitFlex', '');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto');

</del><ins>+flexitem.style.flex = 'junk';

+shouldBeEqualToString('flexitem.style.flex', '');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '2';

-shouldBeEqualToString('flexitem.style.webkitFlex', '2 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 1 0px');

</del><ins>+flexitem.style.flex = '2';

+shouldBeEqualToString('flexitem.style.flex', '2 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 0px');

</del><ins>+flexitem.style.flex = '0';

+shouldBeEqualToString('flexitem.style.flex', '0 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1.5';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1.5 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1.5 1 0px');

</del><ins>+flexitem.style.flex = '1.5';

+shouldBeEqualToString('flexitem.style.flex', '1.5 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.5 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'auto';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 1 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 1 auto');

</del><ins>+flexitem.style.flex = 'auto';

+shouldBeEqualToString('flexitem.style.flex', '1 1 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1px';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 1 1px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 1 1px');

</del><ins>+flexitem.style.flex = '1px';

+shouldBeEqualToString('flexitem.style.flex', '1 1 1px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 1px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '2em';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 1 2em');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 1 32px');

</del><ins>+flexitem.style.flex = '2em';

+shouldBeEqualToString('flexitem.style.flex', '1 1 2em');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 32px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0px';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 1 0px');

</del><ins>+flexitem.style.flex = '0px';

+shouldBeEqualToString('flexitem.style.flex', '1 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'none';

-flexitem.style.webkitFlex = '-2'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'none';

+flexitem.style.flex = '-2'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 0px');

</del><ins>+flexitem.style.flex = '0 0';

+shouldBeEqualToString('flexitem.style.flex', '0 0 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 1';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 0px');

</del><ins>+flexitem.style.flex = '0 1';

+shouldBeEqualToString('flexitem.style.flex', '0 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1 0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 0 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 0 0px');

</del><ins>+flexitem.style.flex = '1 0';

+shouldBeEqualToString('flexitem.style.flex', '1 0 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 0 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '2 auto';

-shouldBeEqualToString('flexitem.style.webkitFlex', '2 1 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 1 auto');

</del><ins>+flexitem.style.flex = '2 auto';

+shouldBeEqualToString('flexitem.style.flex', '2 1 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '3 4px';

-shouldBeEqualToString('flexitem.style.webkitFlex', '3 1 4px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '3 1 4px');

</del><ins>+flexitem.style.flex = '3 4px';

+shouldBeEqualToString('flexitem.style.flex', '3 1 4px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 4px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'auto 5.25';

-shouldBeEqualToString('flexitem.style.webkitFlex', '5.25 1 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '5.25 1 auto');

</del><ins>+flexitem.style.flex = 'auto 5.25';

+shouldBeEqualToString('flexitem.style.flex', '5.25 1 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '5.25 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '6em 4';

-shouldBeEqualToString('flexitem.style.webkitFlex', '4 1 6em');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '4 1 96px');

</del><ins>+flexitem.style.flex = '6em 4';

+shouldBeEqualToString('flexitem.style.flex', '4 1 6em');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 1 96px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '4 0px';

-shouldBeEqualToString('flexitem.style.webkitFlex', '4 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '4 1 0px');

</del><ins>+flexitem.style.flex = '4 0px';

+shouldBeEqualToString('flexitem.style.flex', '4 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0px';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 0px');

</del><ins>+flexitem.style.flex = '0 0px';

+shouldBeEqualToString('flexitem.style.flex', '0 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'none';

-flexitem.style.webkitFlex = '-1 5'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'none';

+flexitem.style.flex = '-1 5'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1 -1'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '1 -1'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '-1 -1'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '-1 -1'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'auto 2em'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'auto 2em'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '2px 4px'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '2px 4px'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0px 0px'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '0px 0px'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1 2 0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 2 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 2 0px');

</del><ins>+flexitem.style.flex = '1 2 0';

+shouldBeEqualToString('flexitem.style.flex', '1 2 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0 0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 0px');

</del><ins>+flexitem.style.flex = '0 0 0';

+shouldBeEqualToString('flexitem.style.flex', '0 0 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1 2 auto';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 2 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 2 auto');

</del><ins>+flexitem.style.flex = '1 2 auto';

+shouldBeEqualToString('flexitem.style.flex', '1 2 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1.75 2 3px';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1.75 2 3px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1.75 2 3px');

</del><ins>+flexitem.style.flex = '1.75 2 3px';

+shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '3px 1 2';

-shouldBeEqualToString('flexitem.style.webkitFlex', '1 2 3px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1 2 3px');

</del><ins>+flexitem.style.flex = '1 3px 2'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'auto 0 0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '1 auto 1'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'auto 0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 1 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto');

</del><ins>+flexitem.style.flex = '3px 1 2';

+shouldBeEqualToString('flexitem.style.flex', '1 2 3px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 3px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'auto 3';

-shouldBeEqualToString('flexitem.style.webkitFlex', '3 1 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '3 1 auto');

</del><ins>+flexitem.style.flex = 'calc(20px + 40%) 4 3';

+shouldBeEqualToString('flexitem.style.flex', '4 3 calc(20px + 40%)');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 3 calc(20px + 40%)');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0px 0';

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 1 0px');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 0px');

</del><ins>+flexitem.style.flex = '1 2 calc(10px + 50%)';

+shouldBeEqualToString('flexitem.style.flex', '1 2 calc(10px + 50%)');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 calc(10px + 50%)');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'none';

-flexitem.style.webkitFlex = '1 2 3'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'auto 0 0';

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 2 3'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'auto 0';

+shouldBeEqualToString('flexitem.style.flex', '0 1 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1 0 3'; // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'auto 3';

+shouldBeEqualToString('flexitem.style.flex', '3 1 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0 1';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '0px 0';

+shouldBeEqualToString('flexitem.style.flex', '0 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1 -2 3px';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '0 0px 0'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 1 0px');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1 2px 3px';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = 'none';

+flexitem.style.flex = '1 2 3'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

<del>-flexitem.style.webkitFlex = '1 2px auto';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '0 2 3'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0px 0px 0';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '1 0 3'; // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0 0 0';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '0 0 1';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0 0px 0';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '1 -2 3px';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0 0px 0px';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '1 2px 3px';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '0 0 0px 0';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '1 2px auto';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1, 2, 3px';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '0px 0px 0';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = '1,';  // Invalid, return previous value.

-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+flexitem.style.flex = '0 0 0 0';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'initial';

-shouldBeEqualToString('flexitem.style.webkitFlex', 'initial');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto');

</del><ins>+flexitem.style.flex = '0 0 0px 0';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> 

</span><del>-flexitem.style.webkitFlex = 'none';

</del><ins>+flexitem.style.flex = '0 0 0px 0px';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

+

+flexitem.style.flex = '0 0 0px 0';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

+

+flexitem.style.flex = '1, 2, 3px';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

+

+flexitem.style.flex = '1,';  // Invalid, return previous value.

+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

+

+flexitem.style.flex = 'initial';

+shouldBeEqualToString('flexitem.style.flex', 'initial');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');

+

+flexitem.style.flex = 'none';

</ins><span class="cx"> // FIXME: This test case is failing. https://bugs.webkit.org/show_bug.cgi?id=90020

</span><del>-shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto');

-shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto');

</del><ins>+shouldBeEqualToString('flexitem.style.flex', '0 0 auto');

+shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');

</ins><span class="cx"> &lt;/script&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;

</del><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexshorthandflexbasismiddleexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,4 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexshorthandflexbasismiddlehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flex-shorthand-flex-basis-middle.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,33 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox {

+    width: 500px;

+    height:100px;

+    background: green;

+}

+

+.flexbox &gt; div {

+    width: 50px;

+    background: yellow;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;div class=&quot;flexbox&quot;&gt;

+    &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0% 1&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0% 1&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0% 1&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot;&gt;

+    &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 auto 1&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 auto 1&quot;&gt;&lt;/div&gt;

+    &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 auto 1&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins><span class="cx">\ No newline at end of file

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxbaselinehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-baseline.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-baseline.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-baseline.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -5,20 +5,20 @@

</span><span class="cx">     margin: 0;

</span><span class="cx"> }

</span><span class="cx"> .inline-flexbox {

</span><del>-    display: -webkit-inline-flex;

</del><ins>+    display: inline-flex;

</ins><span class="cx">     background-color: lightgrey;

</span><span class="cx">     margin-top: 5px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     margin-top: 10px;

</span><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -30,9 +30,9 @@

</span><span class="cx"> &lt;div&gt;

</span><span class="cx"> before text

</span><span class="cx"> &lt;div class=&quot;inline-flexbox&quot; style=&quot;height: 50px;&quot;&gt;

</span><del>-    &lt;div style=&quot;-webkit-align-self: flex-end&quot;&gt;below&lt;/div&gt;

-    &lt;div style=&quot;-webkit-align-self: baseline; margin-top: 15px&quot;&gt;baseline&lt;/div&gt;

-    &lt;div style=&quot;-webkit-align-self: flex-start&quot;&gt;above&lt;/div&gt;

</del><ins>+    &lt;div style=&quot;align-self: flex-end&quot;&gt;below&lt;/div&gt;

+    &lt;div style=&quot;align-self: baseline; margin-top: 15px&quot;&gt;baseline&lt;/div&gt;

+    &lt;div style=&quot;align-self: flex-start&quot;&gt;above&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> after text

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -43,9 +43,9 @@

</span><span class="cx"> &lt;div&gt;

</span><span class="cx"> before text

</span><span class="cx"> &lt;div class=&quot;inline-flexbox&quot; style=&quot;height: 40px&quot;&gt;

</span><del>-    &lt;div style=&quot;-webkit-align-self: flex-end&quot;&gt;baseline&lt;/div&gt;

-    &lt;div style=&quot;-webkit-align-self: baseline; -webkit-writing-mode: vertical-rl&quot;&gt;&lt;/div&gt;

-    &lt;div style=&quot;-webkit-align-self: flex-start&quot;&gt;above&lt;/div&gt;

</del><ins>+    &lt;div style=&quot;align-self: flex-end&quot;&gt;baseline&lt;/div&gt;

+    &lt;div style=&quot;align-self: baseline; writing-mode: vertical-rl&quot;&gt;&lt;/div&gt;

+    &lt;div style=&quot;align-self: flex-start&quot;&gt;above&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> after text

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -73,7 +73,7 @@

</span><span class="cx"> &lt;div&gt;

</span><span class="cx"> should align with the middle

</span><span class="cx"> &lt;div class=&quot;inline-flexbox&quot; style=&quot;width: 40px; height: 40px&quot;&gt;

</span><del>-    &lt;div style=&quot;-webkit-writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black; min-height: 0px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div style=&quot;writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> of the grey flexbox

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -111,8 +111,8 @@

</span><span class="cx"> &lt;div&gt;

</span><span class="cx"> should align with the middle

</span><span class="cx"> &lt;div class=&quot;inline-flexbox column&quot; style=&quot;width: 40px; height: 40px;&quot;&gt;

</span><del>-    &lt;div style=&quot;-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black; min-height: 0px;&quot;&gt;&lt;/div&gt;

-    &lt;div style=&quot;-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; min-height: 0px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div style=&quot;writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black&quot;&gt;&lt;/div&gt;

+    &lt;div style=&quot;writing-mode: vertical-rl; width: 40px; height: 20px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> of the grey flexbox

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -143,7 +143,7 @@

</span><span class="cx"> before text

</span><span class="cx"> &lt;div class=&quot;inline-flexbox&quot; style=&quot;height: 40px;&quot;&gt;

</span><span class="cx">     &lt;div&gt;baseline&lt;/div&gt;

</span><del>-    &lt;div style=&quot;-webkit-align-self: baseline; margin-top: auto&quot;&gt;below&lt;/div&gt;

</del><ins>+    &lt;div style=&quot;align-self: baseline; margin-top: auto&quot;&gt;below&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> after text

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -153,7 +153,7 @@

</span><span class="cx"> &lt;div style=&quot;display: inline-block&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;inline-flexbox&quot; style=&quot;height: 40px;&quot;&gt;

</span><span class="cx">     &lt;div&gt;above&lt;/div&gt;

</span><del>-    &lt;div style=&quot;-webkit-align-self: baseline; margin-top: 10px&quot;&gt;baseline&lt;/div&gt;

</del><ins>+    &lt;div style=&quot;align-self: baseline; margin-top: 10px&quot;&gt;baseline&lt;/div&gt;

</ins><span class="cx">     &lt;div&gt;above&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> after

</span><span class="lines">@@ -205,7 +205,7 @@

</span><span class="cx"> &lt;div&gt;

</span><span class="cx"> before text

</span><span class="cx"> &lt;div id=&quot;flexbox-with-scrollbar&quot; class=&quot;inline-flexbox&quot; style=&quot;height: 65px; width: 150px&quot;&gt;

</span><del>-    &lt;div id=&quot;flexitem-with-scrollbar&quot; style=&quot;-webkit-align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;&quot;&gt;

</del><ins>+    &lt;div id=&quot;flexitem-with-scrollbar&quot; style=&quot;align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;&quot;&gt;

</ins><span class="cx">         The baseline is based on&lt;br&gt;

</span><span class="cx">         the non-scrolled position;&lt;br&gt;

<span class="cx">         this won't line up.

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxheightwithoverflowautoexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,49 @@

</span><ins>+

+PASS .flexbox, .inline-flexbox 1 

+PASS .flexbox, .inline-flexbox 2 

+FAIL .flexbox, .inline-flexbox 3 assert_equals: 

+&lt;div class=&quot;inline-flexbox column-reverse&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+width expected 47 but got 32

+FAIL .flexbox, .inline-flexbox 4 assert_equals: 

+&lt;div class=&quot;inline-flexbox column&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+width expected 47 but got 32

+PASS .flexbox, .inline-flexbox 5 

+PASS .flexbox, .inline-flexbox 6 

+FAIL .flexbox, .inline-flexbox 7 assert_equals: 

+&lt;div class=&quot;inline-flexbox column-reverse&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+width expected 47 but got 32

+FAIL .flexbox, .inline-flexbox 8 assert_equals: 

+&lt;div class=&quot;inline-flexbox column&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+width expected 47 but got 32

+PASS .flexbox, .inline-flexbox 9 

+PASS .flexbox, .inline-flexbox 10 

+PASS .flexbox, .inline-flexbox 11 

+PASS .flexbox, .inline-flexbox 12 

+FAIL .flexbox, .inline-flexbox 13 assert_equals: 

+&lt;div class=&quot;flexbox row-reverse vertical&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+height expected 47 but got 32

+FAIL .flexbox, .inline-flexbox 14 assert_equals: 

+&lt;div class=&quot;flexbox vertical&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+height expected 47 but got 32

+PASS .flexbox, .inline-flexbox 15 

+PASS .flexbox, .inline-flexbox 16 

+ 

+ 

+ 

+ 

+ 

+ 

+ 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxheightwithoverflowautohtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flexbox-height-with-overflow-auto.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,97 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox {

+    border: 5px solid green;

+    position: relative;

+    width: 50px;

+}

+

+.inline-flexbox {

+    border: 5px solid green;

+    position: relative;

+    height: 50px;

+}

+

+.overflow {

+    border: 1px solid red;

+    overflow: auto;

+    min-width: 0;

+    min-height: 0;

+}

+

+.vertical {

+    writing-mode: vertical-rl;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox, .inline-flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;div class=&quot;flexbox&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox row-reverse&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox vertical&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox row-reverse vertical&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox row-reverse&quot; data-expected-height=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox vertical&quot; data-expected-height=&quot;32&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox row-reverse vertical&quot; data-expected-height=&quot;32&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column vertical&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse vertical&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse&quot; data-expected-width=&quot;47&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column vertical&quot; data-expected-width=&quot;32&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse vertical&quot; data-expected-width=&quot;32&quot;&gt;

+  &lt;div class=&quot;overflow align-self-baseline&quot;&gt;&lt;div style=&quot;width: 20px; height: 100px&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxignorecontainerfirstLetterexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,80 +1,16 @@

</span><ins>+

+PASS .container 1 

+PASS .container 2 

</ins><span class="cx"> This test flex item should ignore container's firstLetter pseudo element.

</span><span class="cx"> 

<span class="cx"> The first item.

</span><ins>+

</ins><span class="cx"> The second item.

</span><del>-PASS

</del><ins>+

+Out of flex.

+

</ins><span class="cx"> The first item.

</span><ins>+

</ins><span class="cx"> The second item.

</span><del>- PASS

-Anonymous item.

-PASS

-Anonymous item.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-Anonymous item.

-Out of flexbox.

-PASS

-Anonymous item.

-Out of flexbox.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-The first item.

-The second item.

-Out of flexbox.

-PASS

-Anonymous item.

-Out of flexbox.

-PASS

-Anonymous item.

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

-Out of flexbox.

-PASS

</del><ins>+

+Out of flex.

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxignorecontainerfirstLetterhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-container-firstLetter.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,223 +2,32 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

</span><span class="cx"> &lt;style&gt;

</span><del>-    body {

-        line-height: 20px;

-    }

-

-    .flexbox-first-letter::first-letter {

-        line-height: 100px;

-        color: red;

-    }

-

-    .container-first-letter::first-letter {

-        line-height: 200px;

-        color: green;

-    }

-

-    .float {

-        float: left;

-    }

-

-    .flexbox-before::before {

-        content: &quot;Anonymous item.&quot;;

-        display: -webkit-flex;

-        display: flex;

-    }

-

-    .flexbox-after::before {

-        content: &quot;Anonymous item.&quot;;

-        display: -webkit-flex;

-        display: flex;

-    }

-

-    .inline-flexbox-before::before {

-        content: &quot;Anonymous item.&quot;;

-        display: -webkit-inline-flex;

-        display: inline-flex;

-    }

-

-    .inline-flexbox-after::before {

-        content: &quot;Anonymous item.&quot;;

-        display: -webkit-inline-flex;

-        display: inline-flex;

-    }

-

-    .before-after-first-letter::first-letter {

-        line-height: 50px;

-        color: blue;

-    }

</del><ins>+    .container::first-letter { line-height: 100px; }

+    .flexboxFirstLetter::first-letter { line-height: 200px; }

+    p { line-height: 20px; }

</ins><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.container')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;This test flex item should ignore container's firstLetter pseudo element.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container&quot;&gt;

</span><del>-    &lt;div class=&quot;flexbox flexbox-first-letter&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;flexbox flexboxFirstLetter&quot;&gt;

+        &lt;p data-expected-height=20&gt;The first item.&lt;/p&gt;

+        &lt;p data-expected-height=20&gt;The second item.&lt;/p&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><ins>+    &lt;p data-expected-height=100&gt;Out of flex.&lt;/p&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container&quot;&gt;

</span><del>-    &lt;div class=&quot;inline-flexbox flexbox-first-letter&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container&quot;&gt;

-    &lt;div class=&quot;flexbox flexbox-first-letter&quot; data-expected-height=20&gt;

-        Anonymous item.

-    &lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container&quot;&gt;

-    &lt;div class=&quot;inline-flexbox flexbox-first-letter&quot; data-expected-height=20&gt;

-        Anonymous item.

-    &lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox flexbox-first-letter&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox flexbox-first-letter&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-    &lt;div data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox flexbox-first-letter float&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox flexbox-first-letter float&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox flexbox-first-letter&quot; data-expected-height=20&gt;

-        Anonymous item.

-    &lt;/div&gt;

-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox flexbox-first-letter&quot; data-expected-height=20&gt;

-        Anonymous item.

-    &lt;/div&gt;

-    &lt;div data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

</del><span class="cx">     &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

</del><ins>+        &lt;p data-expected-height=20&gt;The first item.&lt;/p&gt;

+        &lt;p data-expected-height=20&gt;The second item.&lt;/p&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

</del><ins>+    &lt;p data-expected-height=100&gt;Out of flex.&lt;/p&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-    &lt;div data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox float&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox float&quot;&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The first item.&lt;/div&gt;

-        &lt;div class=&quot;item&quot; data-expected-height=20&gt;The second item.&lt;/div&gt;

-    &lt;/div&gt;

-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox&quot; data-expected-height=20&gt;

-        Anonymous item.

-    &lt;/div&gt;

-    &lt;div data-expected-height=200&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox&quot; data-expected-height=20&gt;

-        Anonymous item.

-    &lt;/div&gt;

-    &lt;div data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox-before&quot; data-expected-height=220&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container&quot;&gt;

-    &lt;div class=&quot;flexbox-before before-after-first-letter&quot; data-expected-height=70&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox-before before-after-first-letter&quot; data-expected-height=70&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox-after&quot; data-expected-height=220&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;flexbox-after before-after-first-letter&quot; data-expected-height=70&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container&quot;&gt;

-    &lt;div class=&quot;flexbox-after before-after-first-letter&quot; data-expected-height=70&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox-before&quot; data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container&quot;&gt;

-    &lt;div class=&quot;inline-flexbox-before before-after-first-letter&quot; data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox-before before-after-first-letter&quot; data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox-after&quot; data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container container-first-letter&quot;&gt;

-    &lt;div class=&quot;inline-flexbox-after before-after-first-letter&quot; data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div class=&quot;container&quot;&gt;

-    &lt;div class=&quot;inline-flexbox-after before-after-first-letter&quot; data-expected-height=20&gt;Out of flexbox.&lt;/div&gt;

-&lt;/div&gt;

-

</del><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxignorefirstLetterexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,3 +1,6 @@

</span><ins>+

+PASS .flexbox, .inline-flexbox 1 

+PASS .flexbox, .inline-flexbox 2 

</ins><span class="cx"> This test flex item should ignore flex container's firstLetter pseudo element.

</span><span class="cx"> 

<span class="cx"> The first item.

</span><span class="lines">@@ -4,9 +7,8 @@

</span><span class="cx"> 

<span class="cx"> The second item.

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> The first item.

</span><span class="cx"> 

<span class="cx"> The second item.

</span><span class="cx"> 

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxignorefirstLetterhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLetter.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,8 +6,11 @@

</span><span class="cx">     p { line-height: 20px; }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

-&lt;body onload=&quot;checkLayout('.flexbox'); checkLayout('.inline-flexbox')&quot;&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox, .inline-flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;This test flex item should ignore flex container's firstLetter pseudo element.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxignorefirstLineexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,7 @@

</span><ins>+

+PASS .flexbox 1 

</ins><span class="cx"> This test flex item should ignore flex container's firstLine pseudo element.

</span><span class="cx"> 

<span class="cx"> The first item.

</span><span class="cx"> 

<span class="cx"> The second item.

</span><del>-

-PASS

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxignorefirstLinehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-ignore-firstLine.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,8 +6,11 @@

</span><span class="cx">     p { line-height: 20px; }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;This test flex item should ignore flex container's firstLine pseudo element.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaultexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,8 @@

</span><ins>+

+

</ins><span class="cx"> 'Test for BUG=647694 - align-content &quot;stretch&quot; is not applied by default when grid is disabled.'

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span><del>-PASS

</del><ins>+PASS .gridDisabled 1 

+PASS .gridEnabled 1 

</ins><span class="cx"> 

</span><del>-

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaulthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,4 +1,4 @@

</span><del>-&lt;!DOCTYPE html&gt;

</del><ins>+&lt;!doctype html&gt;

</ins><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flex-container {

</span><span class="cx">     display: flex;

</span><span class="lines">@@ -18,14 +18,15 @@

</span><span class="cx">     background-color:blue;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body&gt;

</span><del>-&lt;p&gt;'Test for BUG=647694 - align-content &quot;stretch&quot; is not applied by default when grid is disabled.'&lt;/p&gt;

</del><span class="cx"> &lt;script&gt;

</span><span class="cx"> function runTest(gridEnabled)

</span><span class="cx"> {

</span><span class="cx">     if (window.internals)

</span><del>-        window.internals.settings.setCSSGridLayoutEnabled(gridEnabled);

</del><ins>+        internals.settings.setCSSGridLayoutEnabled(gridEnabled);

</ins><span class="cx"> 

</span><span class="cx">     var flexContainer = document.createElement(&quot;div&quot;);

</span><span class="cx">     if (gridEnabled)

</span><span class="lines">@@ -60,4 +61,6 @@

</span><span class="cx"> runTest(false);

</span><span class="cx"> runTest(true);

</span><span class="cx"> &lt;/script&gt;

</span><ins>+&lt;p&gt;'Test for BUG=647694 - align-content &quot;stretch&quot; is not applied by default when grid is disabled.'&lt;/p&gt;

+&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxoverflowautoexpectedhtml"></a>

<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto-expected.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto-expected.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,81 +0,0 @@

</span><del>-&lt;!DOCTYPE html&gt;

-&lt;html&gt;

-&lt;head&gt;

-&lt;style&gt;

-.test-row {

-    display: -webkit-flex;

-    margin-bottom: 5px;

-}

-.test-row &gt; div {

-    -webkit-flex: none;

-}

-

-.container {

-    margin-right: 5px;

-    border: 5px solid lightgreen;

-    width: 100px;

-}

-

-.flexbox {

-    display: block;

-    height: 100px;

-    width: 100px;

-    overflow: auto;

-}

-

-.flexbox &gt; div {

-    width: 200px;

-    height: 200px;

-    background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);

-}

-&lt;/style&gt;

-&lt;/head&gt;

-&lt;body&gt;

-    &lt;p&gt;Scrollbars should work in all the flexboxes.&lt;/p&gt;

-&lt;/body&gt;

-&lt;script&gt;

-// The -almost values are cases where we don't scroll all the way because of

-// https://bugs.webkit.org/show_bug.cgi?id=76129 .

-var results = [

-    'left top', 'left top', 'right top', 'left bottom',

-    'left bottom-almost', 'left bottom-almost', 'right bottom-almost', 'left top',

-    'right-almost top', 'right-almost top', 'right-almost bottom', 'left top',

-    'left top', 'left top', 'left bottom', 'right top'];

-

-var testContents = '';

-for (var i = 0; i &lt; results.length; ++i) {

-    if (!(i % 4))

-        testContents += &quot;&lt;div class='test-row'&gt;&quot;;

-

-    var containerClass = 'container ' + results[i];

-    testContents +=

-        &quot;&lt;div class='&quot; + containerClass + &quot;'&gt;&quot; +

-        &quot;&lt;div class='flexbox'&gt;&quot; +

-        &quot;&lt;div&gt;&lt;/div&gt;&quot; +

-        &quot;&lt;/div&gt;&quot; +

-        &quot;&lt;/div&gt;&quot;;

-    if (i % 4 == 3)

-        testContents += &quot;&lt;/div&gt;&quot;;

-}

-

-document.body.innerHTML += testContents;

-

-Array.prototype.forEach.call(document.querySelectorAll(&quot;.right&quot;), function(element) {

-    element.firstChild.scrollLeft = 1000;

-});

-

-Array.prototype.forEach.call(document.querySelectorAll(&quot;.bottom&quot;), function(element) {

-    element.firstChild.scrollTop = 1000;

-});

-

-Array.prototype.forEach.call(document.querySelectorAll(&quot;.right-almost&quot;), function(element) {

-    element.firstChild.scrollLeft = element.firstChild.scrollWidth - element.firstChild.offsetWidth;

-});

-

-Array.prototype.forEach.call(document.querySelectorAll(&quot;.bottom-almost&quot;), function(element) {

-    element.firstChild.scrollTop = element.firstChild.scrollHeight - element.firstChild.offsetHeight;

-});

-

-&lt;/script&gt;

-&lt;/body&gt;

-&lt;/html&gt;

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxoverflowautohtml"></a>

<div class="delfile"><h4>Deleted: trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,94 +0,0 @@

</span><del>-&lt;!DOCTYPE html&gt;

-&lt;html&gt;

-&lt;head&gt;

-&lt;style&gt;

-.test-row {

-    display: -webkit-flex;

-    margin-bottom: 5px;

-}

-.test-row &gt; div {

-    -webkit-flex: none;

-}

-

-.container {

-    margin-right: 5px;

-    border: 5px solid lightgreen;

-    width: 100px;

-}

-

-.horizontal-tb {

-    -webkit-writing-mode: horizontal-tb;

-}

-

-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

-

-.vertical-rl {

-    -webkit-writing-mode: vertical-rl;

-}

-

-.vertical-lr {

-    -webkit-writing-mode: vertical-lr;

-}

-

-.row {

-    -webkit-flex-direction: row;

-}

-

-.row-reverse {

-    -webkit-flex-direction: row-reverse;

-}

-

-.column {

-    -webkit-flex-direction: column;

-}

-

-.column-reverse {

-    -webkit-flex-direction: column-reverse;

-}

-

-.flexbox {

-    border: 0 solid pink;

-    display: -webkit-flex;

-    height: 100px;

-    width: 100px;

-    overflow: auto;

-}

-

-.flexbox &gt; div {

-    width: 200px;

-    height: 200px;

-    background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);

-    -webkit-flex: none;

-}

-

-&lt;/style&gt;

-&lt;/head&gt;

-&lt;body&gt;

-    &lt;p&gt;Scrollbars should work in all the flexboxes.&lt;/p&gt;

-&lt;/body&gt;

-&lt;script&gt;

-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];

-var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];

-var testContents = '';

-writingModes.forEach(function(writingMode) {

-    testContents += &quot;&lt;div class='test-row'&gt;&quot;;

-    flexDirections.forEach(function(flexDirection) {

-        var containerClass = 'container ' + writingMode;

-        var flexboxClass = 'flexbox ' + flexDirection;

-        testContents +=

-            &quot;&lt;div class='&quot; + containerClass + &quot;'&gt;&quot; +

-            &quot;&lt;div class='&quot; + flexboxClass + &quot;'&gt;&quot; +

-            &quot;&lt;div&gt;&lt;/div&gt;&quot; +

-            &quot;&lt;/div&gt;&quot; +

-            &quot;&lt;/div&gt;&quot;;

-    });

-    testContents += &quot;&lt;/div&gt;&quot;;

-});

-

-document.body.innerHTML += testContents;

-

-&lt;/script&gt;

-&lt;/body&gt;

-&lt;/html&gt;

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxwithmulticolumnpropertyexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,14 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox, .inline-flexbox {

+    width: 20em;

+}

+&lt;/style&gt;

+&lt;div class=&quot;flexbox&quot;&gt;

+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox&quot;&gt;

+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxwithmulticolumnpropertyhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flexbox-with-multi-column-property.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,16 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox, .inline-flexbox {

+    -webkit-column-count: 2;

+    -webkit-column-gap: 100px;

+    width: 20em;

+}

+&lt;/style&gt;

+&lt;div class=&quot;flexbox&quot;&gt;

+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox&quot;&gt;

+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxwordwrapexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-wordwrap-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-wordwrap-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flexbox-wordwrap-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,10 @@

</span><ins>+

+PASS .flex-horizontal, .flex-vertical 1 

+PASS .flex-horizontal, .flex-vertical 2 

+PASS .flex-horizontal, .flex-vertical 3 

+PASS .flex-horizontal, .flex-vertical 4 

+PASS .flex-horizontal, .flex-vertical 5 

+PASS .flex-horizontal, .flex-vertical 6 

+Test for crbug.com/362848: Flex box word-wrap is not adhering to spec

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexboxwordwraphtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-wordwrap.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-wordwrap.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/flexbox-wordwrap.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,111 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+.flex-horizontal {

+    width:600px;

+    display:flex;

+    height:100px;

+    background:gray;

+    margin-bottom:100px;

+}

+.flex-vertical {

+    width:100px;

+    display:flex;

+    flex-direction: column;

+    height:600px;

+    background:gray;

+    margin-top:200px;

+    margin-bottom:100px;

+}

+.item-horizontal {

+    width:150px;

+    background:yellow;

+    margin:10px;

+    flex:none;

+}

+.item-vertical {

+    height:150px;

+    background:yellow;

+    margin:10px;

+    flex:none;

+}

+.content1-horizontal {

+    width:100px;

+    height:150px;

+    background:red;

+}

+.content2-horizontal {

+    width:100px;

+    height:100px;

+    background:red;

+}

+.content3-horizontal {

+    width:100px;

+    height:50px;

+    background:red;

+}

+.content1-vertical {

+    width:150px;

+    height:100px;

+    background:red;

+}

+.content2-vertical {

+    width:100px;

+    height:100px;

+    background:red;

+}

+.content3-vertical {

+    width:50px;

+    height:100px;

+    background:red;

+}

+&lt;/style&gt;

+&lt;/head&gt;

+&lt;body onload=&quot;checkLayout('.flex-horizontal, .flex-vertical');&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;p&gt;Test for crbug.com/362848: Flex box word-wrap is not adhering to spec&lt;/p&gt;

+&lt;div class=&quot;flex-horizontal&quot;&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;80&quot;&gt;&lt;div class=&quot;content1-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;80&quot;&gt;&lt;div class=&quot;content2-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;80&quot;&gt;&lt;div class=&quot;content3-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flex-horizontal&quot; style=&quot;flex-wrap:wrap;&quot;&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;80&quot;&gt;&lt;div class=&quot;content1-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;80&quot;&gt;&lt;div class=&quot;content2-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;80&quot;&gt;&lt;div class=&quot;content3-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flex-horizontal&quot; style=&quot;flex-wrap:wrap;&quot;&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;150&quot;&gt;&lt;div class=&quot;content1-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;150&quot;&gt;&lt;div class=&quot;content2-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;150&quot;&gt;&lt;div class=&quot;content3-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;150&quot;&gt;&lt;div class=&quot;content1-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-horizontal&quot; data-expected-height=&quot;150&quot;&gt;&lt;div class=&quot;content2-horizontal&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flex-vertical&quot;&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;80&quot;&gt;&lt;div class=&quot;content1-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;80&quot;&gt;&lt;div class=&quot;content2-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;80&quot;&gt;&lt;div class=&quot;content3-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flex-vertical&quot; style=&quot;flex-wrap:wrap;&quot;&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;80&quot;&gt;&lt;div class=&quot;content1-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;80&quot;&gt;&lt;div class=&quot;content2-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;80&quot;&gt;&lt;div class=&quot;content3-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flex-vertical&quot; style=&quot;flex-wrap:wrap;&quot;&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;150&quot;&gt;&lt;div class=&quot;content1-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;150&quot;&gt;&lt;div class=&quot;content2-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;150&quot;&gt;&lt;div class=&quot;content3-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;150&quot;&gt;&lt;div class=&quot;content1-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+    &lt;div class=&quot;item-vertical&quot; data-expected-width=&quot;150&quot;&gt;&lt;div class=&quot;content2-vertical&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,39 +1,46 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+FAIL .flexbox 12 assert_equals: 

+&lt;div class=&quot;flexbox&quot;&gt;

+  &lt;!-- FIXME: This table should flex. --&gt;

+  &lt;div data-expected-display=&quot;table&quot; data-expected-width=&quot;600&quot; style=&quot;display: inline-table&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+width expected 600 but got 0

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

</ins><span class="cx"> button

</span><span class="cx"> 

</span><span class="cx"> object

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span><del>-PASS

-PASS

</del><span class="cx"> button

</span><del>-PASS

-PASS

-FAIL:

-Expected 600 for width, but got 0. 

</del><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot;&gt;

-  &lt;!-- FIXME: This table should flex. --&gt;

-  &lt;div data-expected-display=&quot;table&quot; data-expected-width=&quot;600&quot; style=&quot;display: inline-table&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;

</del><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span><del>-PASS

-

-PASS

</del><span class="cx"> button

</span><span class="cx"> 

</span><span class="cx"> object

</span><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span><del>-PASS

</del><span class="cx"> 

</span><del>-PASS

</del><ins>+Some text

+Some more text

</ins><span class="cx"> 

</span><del>-PASS

</del><ins>+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemnomargincollapsingexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>-PASS

</del><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemnomargincollapsinghtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-no-margin-collapsing.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -13,10 +13,12 @@

</span><span class="cx">     background-color: blue;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;position: relative&quot;&gt;

</span><span class="cx"> &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;120&quot; data-expected-height=&quot;120&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitempercentheightchangeexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>-PASS

</del><ins>+

+PASS #outer 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitempercentheightchangehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-percent-height-change.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,9 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><span class="cx"> &lt;link rel=&quot;stylesheet&quot; href=&quot;resources/flexbox.css&quot;&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;script&gt;

</span><span class="cx"> window.onload = function()

</span><span class="cx"> {

</span><span class="lines">@@ -15,6 +17,7 @@

</span><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div id=&quot;outer&quot; data-expected-height=&quot;100&quot;&gt;

</span><span class="cx">   &lt;div class=&quot;flexbox&quot; data-expected-height=&quot;100&quot; style=&quot;height: 100%&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flex-one&quot; data-expected-height=&quot;100&quot; style=&quot;overflow-y: auto; height: 100%&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemstretchimageexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-stretch-image-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-stretch-image-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-stretch-image-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,3 @@

</span><span class="cx"> 

</span><del>-PASS

</del><ins>+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemstretchimagehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-stretch-image.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-stretch-image.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-stretch-image.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,7 +3,7 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 600px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx">     min-height: 10px;

</span><span class="lines">@@ -15,12 +15,15 @@

</span><span class="cx">     min-width: 0;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;345&quot; style=&quot;-webkit-flex: 1 0 auto;&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

-  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;255&quot; data-expected-height=&quot;100&quot; style=&quot;-webkit-flex: 1 0 auto;&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</del><ins>+  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;345&quot; style=&quot;flex: 1 0 auto;&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

+  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;255&quot; data-expected-height=&quot;100&quot; style=&quot;flex: 1 0 auto;&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemstretchrangehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem-stretch-range.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem-stretch-range.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem-stretch-range.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -4,7 +4,7 @@

</span><span class="cx"> &lt;body&gt;

</span><span class="cx"> &lt;p&gt;When stretching a range input, the thumb should be centered vertically.&lt;/p&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 200px;&quot;&gt;

</span><del>-    &lt;input type=&quot;range&quot; style=&quot;-webkit-flex: 1; margin: 0;&quot;&gt;

</del><ins>+    &lt;input type=&quot;range&quot; style=&quot;flex: 1; margin: 0;&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxflexitemhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/flexitem.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/flexitem.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/flexitem.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,15 +1,15 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;html&gt;

</span><ins>+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

</ins><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 600px;

</span><del>-    display: -webkit-flex;

</del><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx">     min-height: 10px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: 1 0 0;

</del><ins>+    flex: 1 0 0;

</ins><span class="cx">     margin: 0;

</span><span class="cx">     border: 0;

</span><span class="cx">     padding: 0;

</span><span class="lines">@@ -16,12 +16,12 @@

</span><span class="cx">     font-size: 12px;

</span><span class="cx">     min-width: 0;

</span><span class="cx"> }

</span><del>-.column {

-    -webkit-flex-direction: column;

-}

</del><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height:200px&quot;&gt;

</span><span class="cx">   &lt;button data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;200&quot;&gt;button&lt;/button&gt;

</span><span class="cx">   &lt;canvas data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; data-expected-height=&quot;200&quot;&gt;canvas&lt;/canvas&gt;

</span><span class="lines">@@ -46,17 +46,17 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: 1 0 auto;&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

-  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;100&quot; style=&quot;-webkit-flex: 2 0 0;&quot; src=&quot;doesnotexist.png&quot;&gt;

-  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;100&quot; style=&quot;-webkit-flex: 2 0 0;&quot; src=&quot;doesnotexist.png&quot; alt=&quot;placeholder text&quot;&gt;

</del><ins>+  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; style=&quot;flex: 1 0 auto;&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

+  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;100&quot; style=&quot;flex: 2 0 0;&quot; src=&quot;doesnotexist.png&quot;&gt;

+  &lt;img data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;100&quot; style=&quot;flex: 2 0 0;&quot; src=&quot;doesnotexist.png&quot; alt=&quot;placeholder text&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;svg data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 auto; width: 100px; height: 100px;&quot;&gt;

</del><ins>+  &lt;svg data-expected-display=&quot;block&quot; data-expected-bounding-client-rect-width=&quot;100&quot; style=&quot;flex: 1 0 auto; width: 100px; height: 100px&quot;&gt;

</ins><span class="cx">     &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;blue&quot;&gt;

</span><span class="cx">     &lt;/circle&gt;

</span><span class="cx">   &lt;/svg&gt;

</span><del>-  &lt;svg data-expected-display=&quot;block&quot; data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 1 auto; height: 100px; width: 100%&quot;&gt;

</del><ins>+  &lt;svg data-expected-display=&quot;block&quot; data-expected-bounding-client-rect-width=&quot;500&quot; style=&quot;flex: 1 1 auto; height: 100px; width: 100%&quot;&gt;

</ins><span class="cx">     &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;green&quot;&gt;

</span><span class="cx">     &lt;/circle&gt;

</span><span class="cx">   &lt;/svg&gt;

</span><span class="lines">@@ -63,15 +63,15 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;span data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; style=&quot;-webkit-flex: 2 0 0&quot;&gt;&lt;/span&gt;

-  &lt;button data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0&quot;&gt;button&lt;/button&gt;

-  &lt;span data-expected-display=&quot;block&quot; data-expected-width=&quot;300&quot; style=&quot;-webkit-flex: 2 2 100px&quot;&gt;&lt;/span&gt;

</del><ins>+  &lt;span data-expected-display=&quot;block&quot; data-expected-width=&quot;200&quot; style=&quot;flex: 2 0 0&quot;&gt;&lt;/span&gt;

+  &lt;button data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; style=&quot;flex: 1 0 0&quot;&gt;button&lt;/button&gt;

+  &lt;span data-expected-display=&quot;block&quot; data-expected-width=&quot;300&quot; style=&quot;flex: 2 2 100px&quot;&gt;&lt;/span&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;width: 700px&quot;&gt;

</span><span class="cx">   &lt;div data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; style=&quot;display: inline-block;&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-display=&quot;-webkit-box&quot; data-expected-width=&quot;100&quot; style=&quot;display: -webkit-inline-box;&quot;&gt;&lt;/div&gt;

</span><del>-  &lt;div data-expected-display=&quot;flex&quot; data-expected-width=&quot;100&quot; style=&quot;display: -webkit-inline-flex;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-display=&quot;flex&quot; data-expected-width=&quot;100&quot; style=&quot;display: inline-flex;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;div data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; style=&quot;display: table-cell&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; style=&quot;display: compact&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; style=&quot;display: run-in&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -94,8 +94,8 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; style=&quot;width:100px&quot;&gt;

</span><del>-  &lt;iframe data-expected-display=&quot;block&quot; data-expected-width=&quot;100px&quot; src=&quot;data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;&quot;&gt;&lt;/iframe&gt;

-  &lt;iframe seamless data-expected-display=&quot;block&quot; data-expected-width=&quot;100px&quot; src=&quot;data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;&quot;&gt;&lt;/iframe&gt;

</del><ins>+  &lt;iframe data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; src=&quot;data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;&quot;&gt;&lt;/iframe&gt;

+  &lt;iframe seamless data-expected-display=&quot;block&quot; data-expected-width=&quot;100&quot; src=&quot;data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;&quot;&gt;&lt;/iframe&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; style=&quot;height:210px&quot;&gt;

</span><span class="lines">@@ -116,7 +116,10 @@

</span><span class="cx">     &lt;img data-expected-height=&quot;60&quot; style=&quot;min-height:60px&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</span><span class="cx">     &lt;img data-expected-height=&quot;75&quot; style=&quot;min-height:150%&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

</span><span class="cx">     &lt;img data-expected-height=&quot;75&quot; style=&quot;min-height:150%&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</span><del>-    &lt;!-- TODO: test min-content, max-content, fill-available, fit-content when these are implemented for height --&gt;

</del><ins>+    &lt;img data-expected-height=&quot;10&quot; style=&quot;min-height:-webkit-min-content;height:1px&quot; src=&quot;../images/resources/blue-10.png&quot;&gt;

+    &lt;img data-expected-height=&quot;100&quot; style=&quot;min-height:-webkit-max-content;height:1px&quot; src=&quot;../images/resources/green-100.png&quot;&gt;

+    &lt;img data-expected-height=&quot;50&quot; style=&quot;min-height:-webkit-fill-available&quot; src=&quot;../images/resources/blue-10.png&quot;&gt;

+    &lt;img data-expected-height=&quot;10&quot; style=&quot;min-height:-webkit-fit-content;height:1px&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- tests that max-height shrinks the height of flex items less than the height of the flexbox --&gt;

</span><span class="lines">@@ -125,9 +128,30 @@

</span><span class="cx">     &lt;img data-expected-height=&quot;40&quot; style=&quot;max-height:40px&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</span><span class="cx">     &lt;img data-expected-height=&quot;25&quot; style=&quot;max-height:50%&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

</span><span class="cx">     &lt;img data-expected-height=&quot;25&quot; style=&quot;max-height:50%&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</span><del>-    &lt;!-- TODO: test min-content, max-content, fill-available, fit-content when these are implemented for height --&gt;

</del><ins>+    &lt;img data-expected-height=&quot;10&quot; style=&quot;max-height:-webkit-min-content;height:1000px;&quot; src=&quot;../images/resources/blue-10.png&quot;&gt;

+    &lt;img data-expected-height=&quot;100&quot; style=&quot;max-height:-webkit-max-content;height:1000px;&quot; src=&quot;../images/resources/green-100.png&quot;&gt;

+    &lt;img data-expected-height=&quot;50&quot; style=&quot;max-height:-webkit-fill-available&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

+    &lt;img data-expected-height=&quot;10&quot; style=&quot;max-height:-webkit-fit-content;height:1000px&quot; src=&quot;../images/resources/green-10.png&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><ins>+&lt;!-- tests that images can shrink below their CSS height with min-height: min-content --&gt;

+&lt;div class=&quot;flexbox column&quot; style=&quot;height:50px&quot;&gt;

+    &lt;img data-expected-height=&quot;50&quot; style=&quot;flex-shrink:1;height:1000px;min-height:-webkit-min-content;&quot; src=&quot;../images/resources/blue-10.png&quot;&gt;

+&lt;/div&gt;

+

+&lt;!-- tests that text can shrink below its CSS height with min-height: min-content --&gt;

+&lt;div class=&quot;flexbox column&quot; style=&quot;height:50px&quot;&gt;

+    &lt;div data-expected-height=&quot;50&quot; style=&quot;flex-shrink:1;height:1000px;min-height:-webkit-min-content;&quot; src=&quot;../images/resources/blue-10.png&quot;&gt;

+      Some text&lt;br&gt;

+      Some more text

+    &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;!-- tests that images can shrink below their CSS width with min-width: min-content --&gt;

+&lt;div class=&quot;flexbox&quot; style=&quot;width:50px&quot;&gt;

+    &lt;img data-expected-width=&quot;50&quot; style=&quot;flex-shrink:1;width:1000px;min-width:-webkit-min-content;&quot; src=&quot;../images/resources/blue-10.png&quot;&gt;

+&lt;/div&gt;

+

</ins><span class="cx"> &lt;!-- tests that min-width expands the width of flex items beyond the width of the flexbox --&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; style=&quot;width:50px&quot;&gt;

</span><span class="cx">     &lt;img data-expected-width=&quot;60&quot; style=&quot;min-width:60px&quot; src=&quot;../images/resources/blue-100.png&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxfloatedflexboxexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/floated-flexbox-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/floated-flexbox-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/floated-flexbox-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,4 @@

</span><del>-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxfloatedflexboxhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/floated-flexbox.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/floated-flexbox.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/floated-flexbox.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,7 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     border: 5px solid blue;

</span><span class="cx">     float:left;

</span><span class="lines">@@ -14,8 +14,11 @@

</span><span class="cx">     background-color: lime;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div data-expected-width=130 data-expected-height=30 class=flexbox&gt;

</span><span class="cx">     &lt;div style=&quot;background-color:pink; width: 20px; height: 20px;&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -25,8 +28,8 @@

</span><span class="cx"> &lt;div style=&quot;clear: left; position: relative&quot;&gt;

</span><span class="cx">     &lt;div style=&quot;width: 100px; height: 100px; background-color: green; float: left&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-height=30 data-offset-x=100 data-offset-y=0 class=&quot;flexbox&quot; style=&quot;float: none&quot;&gt;

</span><del>-        &lt;div data-expected-height=20 data style=&quot;height: 20px; -webkit-flex: 1&quot;&gt;&lt;/div&gt;

-        &lt;div data-expected-height=20 style=&quot;height: 20px; -webkit-flex: 1&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div data-expected-height=20 data style=&quot;height: 20px; flex: 1&quot;&gt;&lt;/div&gt;

+        &lt;div data-expected-height=20 style=&quot;height: 20px; flex: 1&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxfloatedflexitemhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/floated-flexitem.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/floated-flexitem.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/floated-flexitem.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,7 +3,7 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> #flexbox {

</span><span class="cx">   background-color: lightgrey;

</span><del>-  -webkit-align-items: flex-start;

</del><ins>+  align-items: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> #flexbox &gt; * {

</span><span class="cx">   border: 1px solid green;

</span><span class="lines">@@ -14,7 +14,7 @@

</span><span class="cx"> This example is from the spec. There should be four flex items. Anonymous item 3 shouldn't have

<span class="cx"> a green border because the anonymous block is the flex item.

</span><span class="cx"> &lt;/p&gt;

</span><del>-&lt;div id=&quot;flexbox&quot; style=&quot;display: -webkit-flex&quot;&gt;

</del><ins>+&lt;div id=&quot;flexbox&quot; style=&quot;display: flex&quot;&gt;

</ins><span class="cx"> 

</span><span class="cx">     &lt;!-- flex item: block child --&gt;

</span><span class="cx">     &lt;div id=&quot;item1&quot;&gt;block&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexcrashhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/inline-flex-crash.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flex-crash.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/inline-flex-crash.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,7 @@

</span><span class="cx"> &lt;style&gt;#el0::first-letter, #el0:first-child { height: 10px; }&lt;/style&gt;

<span class="cx"> This test passes if it doesn't crash.

</span><span class="cx"> 

</span><del>-&lt;div id='container' contentEditable&gt;&lt;a&gt;&lt;img&gt;&lt;div id=&quot;el0&quot; style=&quot;display: -webkit-inline-flex&quot;&gt;&lt;pre&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;

</del><ins>+&lt;div id='container' contentEditable&gt;&lt;a&gt;&lt;img&gt;&lt;div id=&quot;el0&quot; style=&quot;display: inline-flex&quot;&gt;&lt;pre&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;script&gt;

</span><span class="cx"> if (window.testRunner)

</span><span class="cx">     testRunner.dumpAsText();

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexcrash2html"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/inline-flex-crash2.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flex-crash2.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/inline-flex-crash2.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,7 @@

</span><span class="cx"> &lt;style&gt;#el0::first-letter, #el0:first-child { height: 100px;}&lt;/style&gt;

<span class="cx"> This test passes if it doesn't crash.

</span><span class="cx"> 

</span><del>-&lt;div id='container' contentEditable&gt;&lt;a&gt;&lt;img&gt;&lt;div id=&quot;el0&quot; style=&quot;display: -webkit-inline-flex&quot;&gt;&lt;pre&gt;AAAAA&lt;/pre&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;

</del><ins>+&lt;div id='container' contentEditable&gt;&lt;a&gt;&lt;img&gt;&lt;div id=&quot;el0&quot; style=&quot;display: inline-flex&quot;&gt;&lt;pre&gt;AAAAA&lt;/pre&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;script&gt;

</span><span class="cx"> if (window.testRunner)

</span><span class="cx">     testRunner.dumpAsText();

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/inline-flex-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flex-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/inline-flex-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,3 +1,5 @@

</span><ins>+

+PASS #testcase 1 

</ins><span class="cx"> This test passes if the three green boxes are on the same horizontal line.

</span><span class="cx"> 

</span><del>- PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/inline-flex.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flex.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/inline-flex.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,16 +8,19 @@

</span><span class="cx">     outline: 2px solid darkgreen;

</span><span class="cx"> }

</span><span class="cx"> #testcase &gt; div &gt; div {

</span><del>-    -webkit-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('#testcase')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;This test passes if the three green boxes are on the same horizontal line.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div id=&quot;testcase&quot; style=&quot;position: relative&quot;&gt;

</span><span class="cx"> &lt;div data-offset-y=&quot;0&quot; data-offset-x=&quot;0&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot; style=&quot;display: inline-block&quot;&gt;

</span><del>-&lt;/div&gt;&lt;div data-offset-y=&quot;0&quot; data-offset-x=&quot;50&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot; style=&quot;display: -webkit-inline-flex;&quot;&gt;

</del><ins>+&lt;/div&gt;&lt;div data-offset-y=&quot;0&quot; data-offset-x=&quot;50&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot; style=&quot;display: inline-flex;&quot;&gt;

</ins><span class="cx">     &lt;div data-expected-width=&quot;25&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-width=&quot;25&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;&lt;div data-offset-y=&quot;0&quot; data-offset-x=&quot;100&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;50&quot; style=&quot;display: inline-block&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexboxignorefirstLineexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,3 +1,5 @@

</span><ins>+

+PASS .inline-flexbox 1 

</ins><span class="cx"> This test inline-flexbox item should ignore flex container's firstLine pseudo element.

</span><span class="cx"> 

<span class="cx"> The first item.

</span><span class="lines">@@ -4,4 +6,4 @@

</span><span class="cx"> 

<span class="cx"> The second item.

</span><span class="cx"> 

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexboxignorefirstLinehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/inline-flexbox-ignore-firstLine.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,8 +6,11 @@

</span><span class="cx">     p { line-height: 20px; }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.inline-flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;This test inline-flexbox item should ignore flex container's firstLine pseudo element.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;inline-flexbox&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexboxwrapverticallywidthcalculationexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,30 @@

</span><ins>+

+PASS .inline-flexbox 1 

+PASS .inline-flexbox 2 

+PASS .inline-flexbox 3 

+PASS .inline-flexbox 4 

+PASS .inline-flexbox 5 

+PASS .inline-flexbox 6 

+PASS .inline-flexbox 7 

+PASS .inline-flexbox 8 

+PASS .inline-flexbox 9 

+PASS .inline-flexbox 10 

+PASS .inline-flexbox 11 

+PASS .inline-flexbox 12 

+PASS .inline-flexbox 13 

+PASS .inline-flexbox 14 

+PASS .inline-flexbox 15 

+PASS .inline-flexbox 16 

+ 

+ 

+ 

+ 

+ 

+ 

+ 

+ 

+ 

+ 

+ 

+ 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinlineflexboxwrapverticallywidthcalculationhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,146 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.inline-flexbox {

+    background-color: #aaa;

+    position: relative;

+}

+

+.writing-mode-vertical {

+  writing-mode: vertical-rl;

+}

+.inline-flexbox &gt; * {

+    flex: none;

+}

+.inline-flexbox :nth-child(1) {

+    background-color: lightblue;

+}

+.inline-flexbox :nth-child(2) {

+    background-color: lightgreen;

+}

+.inline-flexbox :nth-child(3) {

+    background-color: pink;

+}

+.inline-flexbox :nth-child(4) {

+    background-color: yellow;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.inline-flexbox');&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap&quot; data-expected-width=&quot;110&quot; data-expected-height=&quot;60&quot;&gt;

+  &lt;div style=&quot;width: 100px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 70px; height: 10px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;30&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 110px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap&quot; style=&quot;height: 35px&quot; data-expected-width=&quot;80&quot; data-expected-height=&quot;35&quot;&gt;

+  &lt;div style=&quot;width: 10px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 80px; height: 10px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 40px; height: 20px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap writing-mode-vertical&quot; data-expected-width=&quot;280&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 20px&quot; data-offset-x=&quot;230&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 70px&quot; data-offset-x=&quot;130&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 50px&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 30px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap writing-mode-vertical&quot; style=&quot;width: 200px&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 20px&quot; data-offset-x=&quot;150&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 70px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 50px&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 30px&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;70&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap-reverse&quot; data-expected-width=&quot;110&quot; data-expected-height=&quot;60&quot;&gt;

+  &lt;div style=&quot;width: 100px; height: 20px&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 70px; height: 10px&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;30&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 110px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap-reverse&quot; style=&quot;height: 35px&quot; data-expected-width=&quot;80&quot; data-expected-height=&quot;35&quot;&gt;

+  &lt;div style=&quot;width: 10px; height: 20px&quot; data-offset-x=&quot;70&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 80px; height: 10px&quot; data-offset-x=&quot;-50&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 40px; height: 20px&quot; data-offset-x=&quot;-10&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical&quot; data-expected-width=&quot;280&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 20px&quot; data-offset-x=&quot;230&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 50px&quot; data-offset-x=&quot;130&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 30px&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 70px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical&quot; style=&quot;width: 200px&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 20px&quot; data-offset-x=&quot;150&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 50px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 70px&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 30px&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;-30&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap&quot; data-expected-width=&quot;110&quot; data-expected-height=&quot;60&quot;&gt;

+  &lt;div style=&quot;width: 100px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;30&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 70px; height: 10px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 110px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap&quot; style=&quot;height: 35px&quot; data-expected-width=&quot;80&quot; data-expected-height=&quot;35&quot;&gt;

+  &lt;div style=&quot;width: 10px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;15&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;5&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 80px; height: 10px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;25&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 40px; height: 20px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;5&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical&quot; data-expected-width=&quot;280&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 50px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 70px&quot; data-offset-x=&quot;150&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 30px&quot; data-offset-x=&quot;180&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical&quot; style=&quot;width: 200px&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 70px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 50px&quot; data-offset-x=&quot;150&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 30px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;70&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap-reverse&quot; data-expected-width=&quot;110&quot; data-expected-height=&quot;60&quot;&gt;

+  &lt;div style=&quot;width: 100px; height: 20px&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;30&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 70px; height: 10px&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 110px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap-reverse&quot; style=&quot;height: 35px&quot; data-expected-width=&quot;80&quot; data-expected-height=&quot;35&quot;&gt;

+  &lt;div style=&quot;width: 10px; height: 20px&quot; data-offset-x=&quot;70&quot; data-offset-y=&quot;15&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 50px; height: 10px&quot; data-offset-x=&quot;30&quot; data-offset-y=&quot;5&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 80px; height: 10px&quot; data-offset-x=&quot;-50&quot; data-offset-y=&quot;25&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 40px; height: 20px&quot; data-offset-x=&quot;-10&quot; data-offset-y=&quot;5&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical&quot; data-expected-width=&quot;280&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 70px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 20px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 50px&quot; data-offset-x=&quot;150&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 30px&quot; data-offset-x=&quot;180&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical&quot; style=&quot;width: 200px&quot; data-expected-width=&quot;200&quot; data-expected-height=&quot;70&quot;&gt;

+  &lt;div style=&quot;width: 50px; height: 20px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 50px&quot; data-offset-x=&quot;50&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 30px; height: 30px&quot; data-offset-x=&quot;150&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;width: 100px; height: 70px&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;-50&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxinserttextcrashhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/insert-text-crash.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/insert-text-crash.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/insert-text-crash.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,6 +1,6 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> #el2 {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     border: 1px solid red;

</span><span class="cx"> }

</span><span class="cx"> #el3 {

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxintrinsicminwidthapplieswithfixedwidthexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,11 @@

</span><ins>+

+PASS body &gt; div 1 

+PASS body &gt; div 2 

+PASS body &gt; div 3 

+PASS body &gt; div 4 

+PASS body &gt; div 5 

+PASS body &gt; div 6 

</ins><span class="cx"> Check that min-width intrinsic size still applies if a fixed width is set.

</span><span class="cx"> 

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+ 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxintrinsicminwidthapplieswithfixedwidthhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/intrinsic-min-width-applies-with-fixed-width.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,8 +8,8 @@

</span><span class="cx">     min-width: -o-min-content;

</span><span class="cx">     min-width: min-content;

</span><span class="cx">     outline: 2px solid;

</span><del>-    display: -webkit-flex;

-    -webkit-flex-wrap: wrap;

</del><ins>+    display: flex;

+    flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> .max-content {

</span><span class="cx">     width: 10px;

</span><span class="lines">@@ -19,8 +19,8 @@

</span><span class="cx">     min-width: -o-max-content;

</span><span class="cx">     min-width: max-content;

</span><span class="cx">     outline: 2px solid;

</span><del>-    display: -webkit-flex;

-    -webkit-flex-wrap: wrap;

</del><ins>+    display: flex;

+    flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> .fit-content {

</span><span class="cx">     width: 10px;

</span><span class="lines">@@ -30,8 +30,8 @@

</span><span class="cx">     min-width: -o-fit-content;

</span><span class="cx">     min-width: fit-content;

</span><span class="cx">     outline: 2px solid;

</span><del>-    display: -webkit-flex;

-    -webkit-flex-wrap: wrap;

</del><ins>+    display: flex;

+    flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> .child {

</span><span class="cx">     width: 20px;

</span><span class="lines">@@ -43,9 +43,12 @@

</span><span class="cx">     line-height: 0;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;body onload=&quot;checkLayout('body &gt; div')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;Check that min-width intrinsic size still applies if a fixed width is set.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;min-content&quot; data-expected-width=20&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxintrinsicwidthorthogonalwritingmodeexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,12 @@

<ins>+Tests that we calculate correct intrinsic widths when orthogonal flows are involved.

+

+PASS

+Some text

+PASS

+Some text

+FAIL:

+Expected 20 for width, but got 0. 

+

+&lt;div class=&quot;inline-flexbox&quot; data-expected-width=&quot;20&quot;&gt;

+    &lt;span class=&quot;vertical&quot; data-expected-width=&quot;20&quot; style=&quot;line-height: 20px;&quot;&gt;Some text&lt;/span&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxintrinsicwidthorthogonalwritingmodehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,25 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.vertical {

+    writing-mode: vertical-lr;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.inline-flexbox')&quot;&gt;

+

+&lt;p&gt;Tests that we calculate correct intrinsic widths when orthogonal flows are involved.&lt;/p&gt;

+

+&lt;div class=&quot;inline-flexbox&quot; data-expected-width=&quot;20&quot;&gt;

+    &lt;div class=&quot;vertical&quot; style=&quot;width: 20px; height: 50px;&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox&quot; data-expected-width=&quot;20&quot;&gt;

+    &lt;div class=&quot;vertical&quot; style=&quot;line-height: 20px;&quot;&gt;Some text&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;inline-flexbox&quot; data-expected-width=&quot;20&quot;&gt;

+    &lt;span class=&quot;vertical&quot; data-expected-width=&quot;20&quot; style=&quot;line-height: 20px;&quot;&gt;Some text&lt;/span&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxlargeflexshrinkassertexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

<ins>+Passes if it does not assert. The high flex shrink factor can lead to loss of precision as we calculate the sum of scaled flex shrink factors as required by the spec, and as we later subtract the scaled flex factors for frozen violations, we can get to a negative value due to that lost precision.

+

+PASS

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxlargeflexshrinkasserthtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/large-flex-shrink-assert.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,38 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script&gt;

+if (window.testRunner)

+    testRunner.dumpAsText();

+&lt;/script&gt;

+&lt;style&gt;

+.flex {

+    display: inline-flex;

+    width: 40px;

+    height: 40px;

+}

+

+.fractional {

+    height: 50px;

+    width: 50.5px;

+    min-width: 50.5px;

+}

+

+.high-shrink {

+    flex-shrink: 130000000000000;

+    height: 40px;

+    width: 40px;

+    min-width: 40px;

+}

+&lt;/style&gt;

+

+&lt;div class=&quot;flex&quot;&gt;

+    &lt;div class=&quot;fractional&quot;&gt;&lt;/div&gt;

+    &lt;div class=&quot;high-shrink&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;Passes if it does not assert. The high flex shrink factor can lead to loss

+of precision as we calculate the &lt;a

+href=&quot;https://drafts.csswg.org/css-flexbox/#scaled-flex-shrink-factor&quot;&gt;sum of

+scaled flex shrink factors&lt;/a&gt; as required by the spec, and as we later subtract

+the scaled flex factors for frozen violations, we can get to a negative value

+due to that lost precision.&lt;/p&gt;

+&lt;p&gt;PASS&lt;/p&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxlinewrappinghtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/line-wrapping.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/line-wrapping.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/line-wrapping.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -8,10 +8,10 @@

</span><span class="cx">     border: 1px solid;

</span><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: gray;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="lines">@@ -23,13 +23,15 @@

</span><span class="cx">     line-height: 0px;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

+    -webkit-text-orientation: sideways-right;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

+    -webkit-text-orientation: sideways-right;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal-tb.row, .horizontal-tb.fixed.column {

</span><span class="lines">@@ -40,17 +42,17 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal-tb.row &gt; div {

</span><del>-    -webkit-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr.row &gt; div, .vertical-rl.row &gt; div {

</span><del>-    -webkit-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal-tb.column &gt; div {

</span><del>-    -webkit-flex: 1 auto;

</del><ins>+    flex: 1 auto;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr.column &gt; div, .vertical-rl.column &gt; div {

</span><del>-    -webkit-flex: 1 auto;

</del><ins>+    flex: 1 auto;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal-tb.fixed {

</span><span class="lines">@@ -113,7 +115,7 @@

</span><span class="cx">     &lt;div data-expected-width=100 data-expected-height=100&gt;

</span><span class="cx">         &lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=20 data-offset-x=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=100 data-expected-height=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-width=100 data-expected-height=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=20 data-offset-x=100&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -122,7 +124,7 @@

</span><span class="cx">     &lt;div data-expected-width=200 data-expected-height=50&gt;

</span><span class="cx">         &lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=20 data-offset-x=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=200 data-expected-height=50 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-width=200 data-expected-height=50 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-y=50&gt;&lt;/div&gt;&lt;div data-offset-y=50&gt;&lt;/div&gt;&lt;div data-offset-y=50&gt;&lt;/div&gt;&lt;div data-offset-y=50&gt;&lt;/div&gt;&lt;div data-offset-y=50&gt;&lt;/div&gt;&lt;div data-offset-y=70 data-offset-x=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -131,7 +133,7 @@

</span><span class="cx">     &lt;div data-expected-width=200 data-expected-height=50&gt;

</span><span class="cx">         &lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=80 data-expected-height=50 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-width=80 data-expected-height=50 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-y=50&gt;&lt;/div&gt;&lt;div data-offset-y=50&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -140,7 +142,7 @@

</span><span class="cx">     &lt;div data-expected-width=250 data-expected-height=100&gt;

</span><span class="cx">         &lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=20 data-offset-x=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=250 data-expected-height=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-width=250 data-expected-height=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=20 data-offset-x=250&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -149,7 +151,7 @@

</span><span class="cx">     &lt;div data-expected-width=500 data-expected-height=40&gt;

</span><span class="cx">         &lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=0&gt;&lt;/div&gt;&lt;div data-offset-y=20 data-offset-x=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=500 data-expected-height=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-width=500 data-expected-height=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-y=40&gt;&lt;/div&gt;&lt;div data-offset-y=40&gt;&lt;/div&gt;&lt;div data-offset-y=40&gt;&lt;/div&gt;&lt;div data-offset-y=40&gt;&lt;/div&gt;&lt;div data-offset-y=40&gt;&lt;/div&gt;&lt;div data-offset-y=60 data-offset-x=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -160,7 +162,7 @@

</span><span class="cx">     &lt;div data-expected-height data-expected-width=100&gt;

</span><span class="cx">         &lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=24 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=100 data-expected-width=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=100 data-expected-width=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=24 data-offset-y=100&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -169,7 +171,7 @@

</span><span class="cx">     &lt;div data-expected-height=200 data-expected-width=50&gt;

</span><span class="cx">         &lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=24 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=200 data-expected-width=50 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=200 data-expected-width=50 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=54&gt;&lt;/div&gt;&lt;div data-offset-x=54&gt;&lt;/div&gt;&lt;div data-offset-x=54&gt;&lt;/div&gt;&lt;div data-offset-x=54&gt;&lt;/div&gt;&lt;div data-offset-x=54&gt;&lt;/div&gt;&lt;div data-offset-x=74 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -178,7 +180,7 @@

</span><span class="cx">     &lt;div data-expected-height=200 data-expected-width=50&gt;

</span><span class="cx">         &lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=80 data-expected-width=50 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=80 data-expected-width=50 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=54&gt;&lt;/div&gt;&lt;div data-offset-x=54&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -187,7 +189,7 @@

</span><span class="cx">     &lt;div data-expected-height=250 data-expected-width=100&gt;

</span><span class="cx">         &lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=24 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=250 data-expected-width=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=250 data-expected-width=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=24 data-offset-y=250&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -196,7 +198,7 @@

</span><span class="cx">     &lt;div data-expected-height=500 data-expected-width=40&gt;

</span><span class="cx">         &lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=4&gt;&lt;/div&gt;&lt;div data-offset-x=24 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=500 data-expected-width=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=500 data-expected-width=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=44&gt;&lt;/div&gt;&lt;div data-offset-x=44&gt;&lt;/div&gt;&lt;div data-offset-x=44&gt;&lt;/div&gt;&lt;div data-offset-x=44&gt;&lt;/div&gt;&lt;div data-offset-x=44&gt;&lt;/div&gt;&lt;div data-offset-x=64 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -206,7 +208,7 @@

</span><span class="cx">     &lt;div data-expected-height=100 data-expected-width=100&gt;

</span><span class="cx">         &lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=60 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=100 data-expected-width=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=100 data-expected-width=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=60 data-offset-y=100&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -215,7 +217,7 @@

</span><span class="cx">     &lt;div data-expected-height=200 data-expected-width=50&gt;

</span><span class="cx">         &lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=60 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=200 data-expected-width=50 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=200 data-expected-width=50 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=30&gt;&lt;/div&gt;&lt;div data-offset-x=30&gt;&lt;/div&gt;&lt;div data-offset-x=30&gt;&lt;/div&gt;&lt;div data-offset-x=30&gt;&lt;/div&gt;&lt;div data-offset-x=30&gt;&lt;/div&gt;&lt;div data-offset-x=10 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -224,7 +226,7 @@

</span><span class="cx">     &lt;div data-expected-height=200 data-expected-width=50&gt;

</span><span class="cx">         &lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=80 data-expected-width=50 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=80 data-expected-width=50 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=30&gt;&lt;/div&gt;&lt;div data-offset-x=30&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -233,7 +235,7 @@

</span><span class="cx">     &lt;div data-expected-height=250 data-expected-width=100&gt;

</span><span class="cx">         &lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=60 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=250 data-expected-width=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=250 data-expected-width=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=80&gt;&lt;/div&gt;&lt;div data-offset-x=60 data-offset-y=250&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="lines">@@ -242,7 +244,7 @@

</span><span class="cx">     &lt;div data-expected-height=500 data-expected-width=40&gt;

</span><span class="cx">         &lt;div data-offset-x=60&gt;&lt;/div&gt;&lt;div data-offset-x=60&gt;&lt;/div&gt;&lt;div data-offset-x=60&gt;&lt;/div&gt;&lt;div data-offset-x=60&gt;&lt;/div&gt;&lt;div data-offset-x=60&gt;&lt;/div&gt;&lt;div data-offset-x=40 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=500 data-expected-width=40 style=&quot;-webkit-align-self: flex-start;&quot;&gt;

</del><ins>+    &lt;div data-expected-height=500 data-expected-width=40 style=&quot;align-self: flex-start;&quot;&gt;

</ins><span class="cx">         &lt;div data-offset-x=20&gt;&lt;/div&gt;&lt;div data-offset-x=20&gt;&lt;/div&gt;&lt;div data-offset-x=20&gt;&lt;/div&gt;&lt;div data-offset-x=20&gt;&lt;/div&gt;&lt;div data-offset-x=20&gt;&lt;/div&gt;&lt;div data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmainAxisExtentcrashexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1 @@

</span><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmainAxisExtentcrashhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/mainAxisExtent-crash.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,9 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html style=&quot;display: inline-flex;&quot;&gt;

+&lt;script&gt;

+if (window.testRunner)

+    testRunner.dumpAsText();

+&lt;/script&gt;

+&lt;title&gt;This test passes if it does not crash.&lt;/title&gt;

+&lt;frameset&gt;&lt;/frameset&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmaxwidthviolationexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/max-width-violation-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/max-width-violation-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/max-width-violation-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,11 @@

</span><ins>+

+PASS .columns 1 

+PASS .columns 2 

+You should see no red

+

+Column 1

+Column 2

+This second part is just to ensure we don't assert

+

+Column 1

+Column 2

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmaxwidthviolationhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/max-width-violation.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/max-width-violation.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/max-width-violation.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,66 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+.columns {

+  display: flex;

+  width: 800px;

+}

+

+.columns &gt; div {

+  background: #aaa;

+}

+

+.column1 {

+  width: 800px;

+  overflow: auto;

+  max-width: 150px;

+}

+

+.column2 {

+  flex: 0.8 0 0;

+}

+

+.red {

+  position: absolute;

+  width: 510px;

+  background: red !important;

+  height: 10px;

+  z-index: -1;

+}

+

+.abspos {

+  position: absolute;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.columns')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+

+&lt;p&gt;You should see no red&lt;/p&gt;

+

+&lt;div class=&quot;columns&quot;&gt;

+  &lt;div class=&quot;red&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;column1&quot; data-expected-width=&quot;150&quot;&gt;

+    Column 1

+  &lt;/div&gt;

+  &lt;div class=&quot;column2&quot; data-expected-width=&quot;520&quot;&gt;

+    Column 2

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;p&gt;This second part is just to ensure we don't assert&lt;/p&gt;

+

+&lt;div class=&quot;columns&quot;&gt;

+  &lt;div class=&quot;column1 abspos&quot; data-expected-width=&quot;150&quot;&gt;

+    Column 1

+  &lt;/div&gt;

+  &lt;div class=&quot;column2&quot; data-expected-width=&quot;640&quot;&gt;

+    Column 2

+  &lt;/div&gt;

+&lt;/div&gt;

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxminsizeautoexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/min-size-auto-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/min-size-auto-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/min-size-auto-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,8 @@

</span><del>-PASS successfullyParsed is true

</del><span class="cx"> 

</span><del>-TEST COMPLETE

-PASS

-PASS

-PASS

-PASS

</del><ins>+PASS .flexbox, .inline-flexbox 1 

+PASS .flexbox, .inline-flexbox 2 

+PASS .flexbox, .inline-flexbox 3 

+PASS .flexbox, .inline-flexbox 4 

+PASS .flexbox, .inline-flexbox 5 

+PASS .flexbox, .inline-flexbox 6 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxminsizeautohtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/min-size-auto.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/min-size-auto.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/min-size-auto.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,8 +1,9 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/js-test.js&quot;&gt;&lt;/script&gt;

-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="lines">@@ -32,7 +33,8 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</del><ins>+&lt;body onload=&quot;checkLayout('.flexbox, .inline-flexbox');&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; data-expected-width=&quot;10&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;item&quot; data-expected-width=&quot;100&quot;&gt;

</span><span class="lines">@@ -46,6 +48,12 @@

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><ins>+&lt;div class=&quot;inline-flexbox column&quot; data-expected-height=&quot;110&quot;&gt;

+    &lt;div class=&quot;item flex-basis-20&quot; data-expected-height=&quot;100&quot;&gt;

+        &lt;div class=&quot;child&quot; data-expected-height=&quot;100&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

+

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot; data-expected-width=&quot;10&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;item width-20&quot; data-expected-width=&quot;20&quot;&gt;

</span><span class="cx">         &lt;div class=&quot;child&quot; data-expected-width=&quot;100&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -58,4 +66,8 @@

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;/body&gt;

</del><ins>+&lt;div class=&quot;inline-flexbox&quot; data-expected-width=&quot;110&quot;&gt;

+    &lt;div class=&quot;item flex-basis-20&quot; data-expected-width=&quot;100&quot;&gt;

+        &lt;div class=&quot;child&quot; data-expected-width=&quot;100&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxminimumsizeimageexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/minimum-size-image-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/minimum-size-image-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/minimum-size-image-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,45 @@

</span><ins>+

+FAIL .flexbox 1 assert_equals: 

+&lt;div class=&quot;flexbox column&quot; style=&quot;height: 10px;&quot; data-expected-height=&quot;10&quot;&gt;

+    &lt;!-- should use min(transferred, content height) = 10px as minimum height,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;width: 100px;&quot; data-expected-height=&quot;10&quot;&gt;

+&lt;/div&gt;

+height expected 10 but got 20

+PASS .flexbox 2 

+PASS .flexbox 3 

+FAIL .flexbox 4 assert_equals: 

+&lt;div class=&quot;flexbox column&quot; style=&quot;height: 10px;&quot; data-expected-height=&quot;10&quot;&gt;

+    &lt;!-- should use min(specified, content height) = 10px as minimum height,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;height: 100px;&quot; data-expected-height=&quot;10&quot;&gt;

+&lt;/div&gt;

+height expected 10 but got 20

+PASS .flexbox 5 

+FAIL .flexbox 6 assert_equals: 

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 10px;&quot; data-expected-width=&quot;10&quot;&gt;

+    &lt;!-- should use min(transferred, content width) = 10px as minimum width,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;height: 100px;&quot; data-expected-width=&quot;10&quot;&gt;

+&lt;/div&gt;

+width expected 10 but got 20

+PASS .flexbox 7 

+PASS .flexbox 8 

+FAIL .flexbox 9 assert_equals: 

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 10px;&quot; data-expected-width=&quot;10&quot;&gt;

+    &lt;!-- should use min(specified, content width) = 10px as minimum width,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;width: 100px;&quot; data-expected-width=&quot;10&quot;&gt;

+&lt;/div&gt;

+width expected 10 but got 20

+PASS .flexbox 10 

+

+

+

+

+

+

+

+

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxminimumsizeimagehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/minimum-size-image.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/minimum-size-image.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/minimum-size-image.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,70 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 10px;&quot; data-expected-width=&quot;10&quot;&gt;

+    &lt;!-- should use content width, clamped by converted max-height, as minimum width. --&gt;

+    &lt;img src=&quot;../../images/resources/green-100.png&quot; style=&quot;max-height: 5px;&quot;

+         data-expected-width=&quot;5&quot; data-expected-height=&quot;5&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 10px;&quot; data-expected-width=&quot;10&quot;&gt;

+    &lt;!-- should use min(specified, content width) = 10px as minimum width,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;width: 100px;&quot; data-expected-width=&quot;10&quot;&gt;

+&lt;/div&gt;

+

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 10px;&quot; data-expected-width=&quot;10&quot;&gt;

+    &lt;!-- should use content width, clamped by converted min-height, as minimum width. --&gt;

+    &lt;img src=&quot;../../images/resources/green-100.png&quot; style=&quot;max-height: 5px;&quot;

+         data-expected-width=&quot;5&quot; data-expected-height=&quot;5&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 10px;&quot; data-expected-width=&quot;10&quot;&gt;

+    &lt;!-- should use content width, clamped by converted min-height, as minimum width. --&gt;

+    &lt;img src=&quot;../../images/resources/green-100.png&quot; style=&quot;max-height: 5px; min-height: 10px;&quot;

+         data-expected-width=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 10px;&quot; data-expected-width=&quot;10&quot;&gt;

+    &lt;!-- should use min(transferred, content width) = 10px as minimum width,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;height: 100px;&quot; data-expected-width=&quot;10&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;height: 10px;&quot; data-expected-height=&quot;10&quot;&gt;

+    &lt;!-- should use content height, clamped by converted max-width, as minimum height. --&gt;

+    &lt;img src=&quot;../../images/resources/green-100.png&quot; style=&quot;max-width: 5px;&quot;

+         data-expected-width=&quot;5&quot; data-expected-height=&quot;5&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;height: 10px;&quot; data-expected-height=&quot;10&quot;&gt;

+    &lt;!-- should use min(specified, content height) = 10px as minimum height,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;height: 100px;&quot; data-expected-height=&quot;10&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 10px;&quot; data-expected-height=&quot;10&quot;&gt;

+    &lt;!-- should use content height, clamped by converted min-height, as minimum height. --&gt;

+    &lt;img src=&quot;../../images/resources/green-100.png&quot; style=&quot;max-height: 5px;&quot;

+         data-expected-height=&quot;5&quot; data-expected-height=&quot;5&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;height: 10px;&quot; data-expected-height=&quot;10&quot;&gt;

+    &lt;!-- should use content height, clamped by converted min-width, as minimum height. --&gt;

+    &lt;img src=&quot;../../images/resources/green-100.png&quot; style=&quot;max-width: 5px; min-width: 10px;&quot;

+         data-expected-height=&quot;10&quot; data-expected-width=&quot;10&quot;&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;height: 10px;&quot; data-expected-height=&quot;10&quot;&gt;

+    &lt;!-- should use min(transferred, content height) = 10px as minimum height,

+         which the image will shrink to due to default flex-shrink. --&gt;

+    &lt;img src=&quot;../../images/resources/green-10.png&quot; style=&quot;width: 100px;&quot; data-expected-height=&quot;10&quot;&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinealigncontentexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-align-content-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-align-content-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-align-content-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,38 +1,40 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

</ins><span class="cx"> Test to make sure that align-content works properly.

</span><span class="cx"> 

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinealigncontenthorizontalcolumnexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,192 +1,98 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

</ins><span class="cx"> horizontal-tb ltr column wrap align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap align-content-stretch

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse align-content-stretch

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap align-content-stretch

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse align-content-stretch

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap align-content-stretch

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse align-content-stretch

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap align-content-stretch

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse align-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse align-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse align-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse align-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse align-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse align-content-stretch

</span><del>-PASS

-horizontal-bt ltr column wrap align-content-flex-start

-PASS

-horizontal-bt ltr column wrap align-content-flex-end

-PASS

-horizontal-bt ltr column wrap align-content-center

-PASS

-horizontal-bt ltr column wrap align-content-space-between

-PASS

-horizontal-bt ltr column wrap align-content-space-around

-PASS

-horizontal-bt ltr column wrap align-content-stretch

-PASS

-horizontal-bt ltr column wrap-reverse align-content-flex-start

-PASS

-horizontal-bt ltr column wrap-reverse align-content-flex-end

-PASS

-horizontal-bt ltr column wrap-reverse align-content-center

-PASS

-horizontal-bt ltr column wrap-reverse align-content-space-between

-PASS

-horizontal-bt ltr column wrap-reverse align-content-space-around

-PASS

-horizontal-bt ltr column wrap-reverse align-content-stretch

-PASS

-horizontal-bt rtl column wrap align-content-flex-start

-PASS

-horizontal-bt rtl column wrap align-content-flex-end

-PASS

-horizontal-bt rtl column wrap align-content-center

-PASS

-horizontal-bt rtl column wrap align-content-space-between

-PASS

-horizontal-bt rtl column wrap align-content-space-around

-PASS

-horizontal-bt rtl column wrap align-content-stretch

-PASS

-horizontal-bt rtl column wrap-reverse align-content-flex-start

-PASS

-horizontal-bt rtl column wrap-reverse align-content-flex-end

-PASS

-horizontal-bt rtl column wrap-reverse align-content-center

-PASS

-horizontal-bt rtl column wrap-reverse align-content-space-between

-PASS

-horizontal-bt rtl column wrap-reverse align-content-space-around

-PASS

-horizontal-bt rtl column wrap-reverse align-content-stretch

-PASS

-horizontal-bt ltr column-reverse wrap align-content-flex-start

-PASS

-horizontal-bt ltr column-reverse wrap align-content-flex-end

-PASS

-horizontal-bt ltr column-reverse wrap align-content-center

-PASS

-horizontal-bt ltr column-reverse wrap align-content-space-between

-PASS

-horizontal-bt ltr column-reverse wrap align-content-space-around

-PASS

-horizontal-bt ltr column-reverse wrap align-content-stretch

-PASS

-horizontal-bt ltr column-reverse wrap-reverse align-content-flex-start

-PASS

-horizontal-bt ltr column-reverse wrap-reverse align-content-flex-end

-PASS

-horizontal-bt ltr column-reverse wrap-reverse align-content-center

-PASS

-horizontal-bt ltr column-reverse wrap-reverse align-content-space-between

-PASS

-horizontal-bt ltr column-reverse wrap-reverse align-content-space-around

-PASS

-horizontal-bt ltr column-reverse wrap-reverse align-content-stretch

-PASS

-horizontal-bt rtl column-reverse wrap align-content-flex-start

-PASS

-horizontal-bt rtl column-reverse wrap align-content-flex-end

-PASS

-horizontal-bt rtl column-reverse wrap align-content-center

-PASS

-horizontal-bt rtl column-reverse wrap align-content-space-between

-PASS

-horizontal-bt rtl column-reverse wrap align-content-space-around

-PASS

-horizontal-bt rtl column-reverse wrap align-content-stretch

-PASS

-horizontal-bt rtl column-reverse wrap-reverse align-content-flex-start

-PASS

-horizontal-bt rtl column-reverse wrap-reverse align-content-flex-end

-PASS

-horizontal-bt rtl column-reverse wrap-reverse align-content-center

-PASS

-horizontal-bt rtl column-reverse wrap-reverse align-content-space-between

-PASS

-horizontal-bt rtl column-reverse wrap-reverse align-content-space-around

-PASS

-horizontal-bt rtl column-reverse wrap-reverse align-content-stretch

-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinealigncontenthorizontalcolumnhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,7 +3,7 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="cx">     position: relative;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     width: 600px;

</span><span class="cx">     height: 20px;

</span><span class="lines">@@ -18,40 +18,37 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .wrap {

</span><del>-    -webkit-flex-wrap: wrap;

</del><ins>+    flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> .wrap-reverse {

</span><del>-    -webkit-flex-wrap: wrap-reverse;

</del><ins>+    flex-wrap: wrap-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .align-content-flex-start {

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .align-content-flex-end {

</span><del>-    -webkit-align-content: flex-end;

</del><ins>+    align-content: flex-end;

</ins><span class="cx"> }

</span><span class="cx"> .align-content-center {

</span><del>-    -webkit-align-content: center;

</del><ins>+    align-content: center;

</ins><span class="cx"> }

</span><span class="cx"> .align-content-space-between {

</span><del>-    -webkit-align-content: space-between;

</del><ins>+    align-content: space-between;

</ins><span class="cx"> }

</span><span class="cx"> .align-content-space-around {

</span><del>-    -webkit-align-content: space-around;

</del><ins>+    align-content: space-around;

</ins><span class="cx"> }

</span><span class="cx"> .align-content-stretch {

</span><del>-    -webkit-align-content: stretch;

</del><ins>+    align-content: stretch;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: blue;

</span><span class="lines">@@ -60,8 +57,11 @@

</span><span class="cx">     background-color: green;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> var expectations = {

</span><span class="lines">@@ -144,85 +144,6 @@

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        // Same as horizontal-tb.

-        'column': {

-            'ltr': {

-                'wrap': {

-                    'flex-start': [0, 100],

-                    'flex-end': [400, 500],

-                    'center': [200, 300],

-                    'space-between': [0, 500],

-                    'space-around': [100, 400],

-                    'stretch': [0, 300],

-                },

-                'wrap-reverse': {

-                    'flex-start': [500, 400],

-                    'flex-end': [100, 0],

-                    'center': [300, 200],

-                    'space-between': [500, 0],

-                    'space-around': [400, 100],

-                    'stretch': [300, 0],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flex-start': [500, 400],

-                    'flex-end': [100, 0],

-                    'center': [300, 200],

-                    'space-between': [500, 0],

-                    'space-around': [400, 100],

-                    'stretch': [300, 0],

-                },

-                'wrap-reverse': {

-                    'flex-start': [0, 100],

-                    'flex-end': [400, 500],

-                    'center': [200, 300],

-                    'space-between': [0, 500],

-                    'space-around': [100, 400],

-                    'stretch': [0, 300],

-                },

-            },

-        },

-        'column-reverse': {

-            'ltr': {

-                'wrap': {

-                    'flex-start': [0, 100],

-                    'flex-end': [400, 500],

-                    'center': [200, 300],

-                    'space-between': [0, 500],

-                    'space-around': [100, 400],

-                    'stretch': [0, 300],

-                },

-                'wrap-reverse': {

-                    'flex-start': [500, 400],

-                    'flex-end': [100, 0],

-                    'center': [300, 200],

-                    'space-between': [500, 0],

-                    'space-around': [400, 100],

-                    'stretch': [300, 0],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flex-start': [500, 400],

-                    'flex-end': [100, 0],

-                    'center': [300, 200],

-                    'space-between': [500, 0],

-                    'space-around': [400, 100],

-                    'stretch': [300, 0],

-                },

-                'wrap-reverse': {

-                    'flex-start': [0, 100],

-                    'flex-end': [400, 500],

-                    'center': [200, 300],

-                    'space-between': [0, 500],

-                    'space-around': [100, 400],

-                    'stretch': [0, 300],

-                },

-            },

-        },

-    },

</del><span class="cx"> };

</span><span class="cx"> 

</span><span class="cx"> function mainAxisDirection(writingMode, flexDirection)

</span><span class="lines">@@ -236,7 +157,7 @@

</span><span class="cx"> function addChild(flexbox, preferredSize, alignContent, expected_x_offset)

</span><span class="cx"> {

</span><span class="cx">     var child = document.createElement('div');

</span><del>-    child.setAttribute('style', '-webkit-flex: 1 ' + preferredSize + 'px;'

</del><ins>+    child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;'

</ins><span class="cx">         + 'min-width: 100px');

</span><span class="cx"> 

</span><span class="cx">     child.setAttribute(&quot;data-expected-width&quot;, alignContent == &quot;stretch&quot; ? &quot;300&quot; : &quot;100&quot;);

</span><span class="lines">@@ -247,7 +168,7 @@

</span><span class="cx">     flexbox.appendChild(child);

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt'];

</del><ins>+var writingModes = ['horizontal-tb'];

</ins><span class="cx"> var flexDirections = ['column', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> var wraps = ['wrap', 'wrap-reverse'];

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinealigncontenthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-align-content.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-align-content.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-align-content.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,10 +2,10 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><del>-    -webkit-flex-wrap: wrap;

</del><ins>+    flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal {

</span><span class="lines">@@ -30,7 +30,7 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx">     width: 120px;

</span><span class="cx">     height: 20px;

</span><span class="cx"> }

</span><span class="lines">@@ -64,8 +64,11 @@

</span><span class="cx">     background-color: yellow;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;Test to make sure that align-content works properly.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot;&gt;

</span><span class="lines">@@ -75,7 +78,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;80&quot; data-expected-height=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: flex-start&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: flex-start&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -82,7 +85,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;40&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: flex-end&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: flex-end&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;60&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;60&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;80&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -89,7 +92,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: center&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: center&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;30&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;30&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -96,7 +99,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;70&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-between&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-between&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -103,7 +106,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;100&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-around&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-around&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -110,7 +113,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;90&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: stretch&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;120&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: stretch&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;40&quot; data-expected-height=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -118,7 +121,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Negative overflow goes out the top. --&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: flex-end; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: flex-end; height: 30px&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;-30&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;-30&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;-10&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -126,7 +129,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If we overflow, we should true center. --&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: center; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: center; height: 30px&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;-15&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;-15&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;5&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -134,7 +137,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If we overflow, we should be the same as flex-start. --&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-between; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-between; height: 30px&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -142,7 +145,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If we overflow, we should true center. --&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-around; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-around; height: 30px&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;-15&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;-15&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;5&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -150,7 +153,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Stretch should only grow, not shrink. --&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: stretch; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: stretch; height: 30px&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -158,21 +161,21 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- 0 lines should not crash. --&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-between; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-between; height: 30px&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-around; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-around; height: 30px&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: stretch; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: stretch; height: 30px&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- 1 line should not crash. --&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-between; height: 30px&quot;&gt;

-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;10&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-between; height: 30px&quot;&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;30&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: space-around; height: 30px&quot;&gt;

-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot; data-expected-height=&quot;10&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: space-around; height: 30px&quot;&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;30&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;-webkit-align-content: stretch; height: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-height=&quot;30&quot; class=&quot;flexbox horizontal&quot; style=&quot;align-content: stretch; height: 30px&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-height=&quot;30&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -184,7 +187,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: flex-start&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: flex-start&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;80&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -191,7 +194,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;60&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: flex-end&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: flex-end&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;40&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -198,7 +201,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: center&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: center&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;70&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;70&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -205,7 +208,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;30&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-between&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-between&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -212,7 +215,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-around&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-around&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;90&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;90&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;50&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -219,7 +222,7 @@

</span><span class="cx">   &lt;div data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: stretch&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;120&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: stretch&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;80&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;80&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;40&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -227,7 +230,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Negative overflow goes out the right. --&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: flex-end; width: 30px;&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: flex-end; width: 30px;&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;40&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;40&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -235,7 +238,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If we overflow, we should true center. --&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: center; width: 30px;&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: center; width: 30px;&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;5&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -243,7 +246,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If we overflow, we should be the same as flex-start. --&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-between; width: 30px;&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-between; width: 30px;&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;-10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -251,7 +254,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- If we overflow, we should true center. --&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-around; width: 30px;&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-around; width: 30px;&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;5&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -259,7 +262,7 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- Stretch should only grow, not shrink. --&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: stretch; width: 30px;&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: stretch; width: 30px;&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;10&quot; data-offset-y=&quot;10&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div data-offset-x=&quot;-10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -267,21 +270,21 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- 0 lines should not crash. --&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-between; width: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-between; width: 30px&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-around; width: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-around; width: 30px&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: stretch; width: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: stretch; width: 30px&quot;&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;!-- 1 line should not crash. --&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-between; width: 30px&quot;&gt;

-  &lt;div data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-between; width: 30px&quot;&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;30&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: space-around; width: 30px&quot;&gt;

-  &lt;div data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;10&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: space-around; width: 30px&quot;&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;30&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><del>-&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;-webkit-align-content: stretch; width: 30px&quot;&gt;

</del><ins>+&lt;div data-expected-width=&quot;30&quot; class=&quot;flexbox vertical-rl&quot; style=&quot;align-content: stretch; width: 30px&quot;&gt;

</ins><span class="cx">   &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; data-expected-width=&quot;30&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinealignselfexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-align-self-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-align-self-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-align-self-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,128 +1,98 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

</ins><span class="cx"> horizontal-tb ltr row wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse

</span><del>-PASS

-horizontal-bt ltr row wrap

-PASS

-horizontal-bt ltr row wrap-reverse

-PASS

-horizontal-bt rtl row wrap

-PASS

-horizontal-bt rtl row wrap-reverse

-PASS

-horizontal-bt ltr column wrap

-PASS

-horizontal-bt ltr column wrap-reverse

-PASS

-horizontal-bt rtl column wrap

-PASS

-horizontal-bt rtl column wrap-reverse

-PASS

-horizontal-bt ltr row-reverse wrap

-PASS

-horizontal-bt ltr row-reverse wrap-reverse

-PASS

-horizontal-bt rtl row-reverse wrap

-PASS

-horizontal-bt rtl row-reverse wrap-reverse

-PASS

-horizontal-bt ltr column-reverse wrap

-PASS

-horizontal-bt ltr column-reverse wrap-reverse

-PASS

-horizontal-bt rtl column-reverse wrap

-PASS

-horizontal-bt rtl column-reverse wrap-reverse

-PASS

</del><span class="cx"> vertical-rl ltr row wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap-reverse

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinealignselfhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-align-self.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-align-self.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-align-self.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,10 +3,10 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="cx">     position: relative;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     max-width: 600px;

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .title {

</span><span class="cx">     margin-top: 1em;

</span><span class="lines">@@ -18,34 +18,31 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .wrap {

</span><del>-  -webkit-flex-wrap: wrap;

</del><ins>+  flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> .wrap-reverse {

</span><del>-  -webkit-flex-wrap: wrap-reverse;

</del><ins>+  flex-wrap: wrap-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: #0f0;

</span><span class="lines">@@ -91,8 +88,11 @@

</span><span class="cx">     background-color: #003;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> var expectations = {

</span><span class="lines">@@ -394,304 +394,6 @@

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        'row': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 0, 50],

-                    'child2': [10, 10, 10, 40],

-                    'child3': [10, 10, 20, 30],

-                    'child4': [10, 10, 30, 45],

-                    'child5': [10, 10, 40, 45],

-                    'child6': [10, 30, 50, 30],

-                    'child7': [10, 30, 60, 30],

-                    'child8': [10, 10, 0, 20],

-                    'child9': [10, 10, 10, 10],

-                    'child10': [10, 10, 20, 0],

-                    'child11': [10, 10, 30, 15],

-                    'child12': [10, 10, 40, 15],

-                    'child13': [10, 30, 50, 0],

-                    'child14': [10, 30, 60, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 0, 0],

-                    'child2': [10, 10, 10, 10],

-                    'child3': [10, 10, 20, 20],

-                    'child4': [10, 10, 30, 0],

-                    'child5': [10, 10, 40, 0],

-                    'child6': [10, 30, 50, 0],

-                    'child7': [10, 30, 60, 0],

-                    'child8': [10, 10, 0, 30],

-                    'child9': [10, 10, 10, 40],

-                    'child10': [10, 10, 20, 50],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 40, 30],

-                    'child13': [10, 30, 50, 30],

-                    'child14': [10, 30, 60, 30],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 60, 50],

-                    'child2': [10, 10, 50, 40],

-                    'child3': [10, 10, 40, 30],

-                    'child4': [10, 10, 30, 45],

-                    'child5': [10, 10, 20, 45],

-                    'child6': [10, 30, 10, 30],

-                    'child7': [10, 30, 0, 30],

-                    'child8': [10, 10, 60, 20],

-                    'child9': [10, 10, 50, 10],

-                    'child10': [10, 10, 40, 0],

-                    'child11': [10, 10, 30, 15],

-                    'child12': [10, 10, 20, 15],

-                    'child13': [10, 30, 10, 0],

-                    'child14': [10, 30, 0, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 60, 0],

-                    'child2': [10, 10, 50, 10],

-                    'child3': [10, 10, 40, 20],

-                    'child4': [10, 10, 30, 0],

-                    'child5': [10, 10, 20, 0],

-                    'child6': [10, 30, 10, 0],

-                    'child7': [10, 30, 0, 0],

-                    'child8': [10, 10, 60, 30],

-                    'child9': [10, 10, 50, 40],

-                    'child10': [10, 10, 40, 50],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 20, 30],

-                    'child13': [10, 30, 10, 30],

-                    'child14': [10, 30, 0, 30],

-                },

-            },

-        },

-        'column': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 0, 60],

-                    'child2': [10, 10, 10, 50],

-                    'child3': [10, 10, 20, 40],

-                    'child4': [10, 10, 0, 30],

-                    'child5': [10, 10, 5, 20],

-                    'child6': [30, 10, 0, 10],

-                    'child7': [30, 10, 0, 0],

-                    'child8': [10, 10, 30, 60],

-                    'child9': [10, 10, 40, 50],

-                    'child10': [10, 10, 50, 40],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 35, 20],

-                    'child13': [30, 10, 30, 10],

-                    'child14': [30, 10, 30, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 590, 60],

-                    'child2': [10, 10, 580, 50],

-                    'child3': [10, 10, 570, 40],

-                    'child4': [10, 10, 590, 30],

-                    'child5': [10, 10, 590, 20],

-                    'child6': [30, 10, 570, 10],

-                    'child7': [30, 10, 570, 0],

-                    'child8': [10, 10, 560, 60],

-                    'child9': [10, 10, 550, 50],

-                    'child10': [10, 10, 540, 40],

-                    'child11': [10, 10, 560, 30],

-                    'child12': [10, 10, 560, 20],

-                    'child13': [30, 10, 540, 10],

-                    'child14': [30, 10, 540, 0],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 590, 60],

-                    'child2': [10, 10, 580, 50],

-                    'child3': [10, 10, 570, 40],

-                    'child4': [10, 10, 590, 30],

-                    'child5': [10, 10, 585, 20],

-                    'child6': [30, 10, 570, 10],

-                    'child7': [30, 10, 570, 0],

-                    'child8': [10, 10, 560, 60],

-                    'child9': [10, 10, 550, 50],

-                    'child10': [10, 10, 540, 40],

-                    'child11': [10, 10, 560, 30],

-                    'child12': [10, 10, 555, 20],

-                    'child13': [30, 10, 540, 10],

-                    'child14': [30, 10, 540, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 0, 60],

-                    'child2': [10, 10, 10, 50],

-                    'child3': [10, 10, 20, 40],

-                    'child4': [10, 10, 0, 30],

-                    'child5': [10, 10, 0, 20],

-                    'child6': [30, 10, 0, 10],

-                    'child7': [30, 10, 0, 0],

-                    'child8': [10, 10, 30, 60],

-                    'child9': [10, 10, 40, 50],

-                    'child10': [10, 10, 50, 40],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 30, 20],

-                    'child13': [30, 10, 30, 10],

-                    'child14': [30, 10, 30, 0],

-                },

-            },

-        },

-        'row-reverse': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 60, 50],

-                    'child2': [10, 10, 50, 40],

-                    'child3': [10, 10, 40, 30],

-                    'child4': [10, 10, 30, 45],

-                    'child5': [10, 10, 20, 45],

-                    'child6': [10, 30, 10, 30],

-                    'child7': [10, 30, 0, 30],

-                    'child8': [10, 10, 60, 20],

-                    'child9': [10, 10, 50, 10],

-                    'child10': [10, 10, 40, 0],

-                    'child11': [10, 10, 30, 15],

-                    'child12': [10, 10, 20, 15],

-                    'child13': [10, 30, 10, 0],

-                    'child14': [10, 30, 0, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 60, 0],

-                    'child2': [10, 10, 50, 10],

-                    'child3': [10, 10, 40, 20],

-                    'child4': [10, 10, 30, 0],

-                    'child5': [10, 10, 20, 0],

-                    'child6': [10, 30, 10, 0],

-                    'child7': [10, 30, 0, 0],

-                    'child8': [10, 10, 60, 30],

-                    'child9': [10, 10, 50, 40],

-                    'child10': [10, 10, 40, 50],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 20, 30],

-                    'child13': [10, 30, 10, 30],

-                    'child14': [10, 30, 0, 30],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 0, 50],

-                    'child2': [10, 10, 10, 40],

-                    'child3': [10, 10, 20, 30],

-                    'child4': [10, 10, 30, 45],

-                    'child5': [10, 10, 40, 45],

-                    'child6': [10, 30, 50, 30],

-                    'child7': [10, 30, 60, 30],

-                    'child8': [10, 10, 0, 20],

-                    'child9': [10, 10, 10, 10],

-                    'child10': [10, 10, 20, 0],

-                    'child11': [10, 10, 30, 15],

-                    'child12': [10, 10, 40, 15],

-                    'child13': [10, 30, 50, 0],

-                    'child14': [10, 30, 60, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [70, 60],

-                    'child1': [10, 10, 0, 0],

-                    'child2': [10, 10, 10, 10],

-                    'child3': [10, 10, 20, 20],

-                    'child4': [10, 10, 30, 0],

-                    'child5': [10, 10, 40, 0],

-                    'child6': [10, 30, 50, 0],

-                    'child7': [10, 30, 60, 0],

-                    'child8': [10, 10, 0, 30],

-                    'child9': [10, 10, 10, 40],

-                    'child10': [10, 10, 20, 50],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 40, 30],

-                    'child13': [10, 30, 50, 30],

-                    'child14': [10, 30, 60, 30],

-                },

-            },

-        },

-        'column-reverse': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 0, 0],

-                    'child2': [10, 10, 10, 10],

-                    'child3': [10, 10, 20, 20],

-                    'child4': [10, 10, 0, 30],

-                    'child5': [10, 10, 5, 40],

-                    'child6': [30, 10, 0, 50],

-                    'child7': [30, 10, 0, 60],

-                    'child8': [10, 10, 30, 0],

-                    'child9': [10, 10, 40, 10],

-                    'child10': [10, 10, 50, 20],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 35, 40],

-                    'child13': [30, 10, 30, 50],

-                    'child14': [30, 10, 30, 60],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 590, 0],

-                    'child2': [10, 10, 580, 10],

-                    'child3': [10, 10, 570, 20],

-                    'child4': [10, 10, 590, 30],

-                    'child5': [10, 10, 590, 40],

-                    'child6': [30, 10, 570, 50],

-                    'child7': [30, 10, 570, 60],

-                    'child8': [10, 10, 560, 0],

-                    'child9': [10, 10, 550, 10],

-                    'child10': [10, 10, 540, 20],

-                    'child11': [10, 10, 560, 30],

-                    'child12': [10, 10, 560, 40],

-                    'child13': [30, 10, 540, 50],

-                    'child14': [30, 10, 540, 60],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 590, 0],

-                    'child2': [10, 10, 580, 10],

-                    'child3': [10, 10, 570, 20],

-                    'child4': [10, 10, 590, 30],

-                    'child5': [10, 10, 585, 40],

-                    'child6': [30, 10, 570, 50],

-                    'child7': [30, 10, 570, 60],

-                    'child8': [10, 10, 560, 0],

-                    'child9': [10, 10, 550, 10],

-                    'child10': [10, 10, 540, 20],

-                    'child11': [10, 10, 560, 30],

-                    'child12': [10, 10, 555, 40],

-                    'child13': [30, 10, 540, 50],

-                    'child14': [30, 10, 540, 60],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 70],

-                    'child1': [10, 10, 0, 0],

-                    'child2': [10, 10, 10, 10],

-                    'child3': [10, 10, 20, 20],

-                    'child4': [10, 10, 0, 30],

-                    'child5': [10, 10, 0, 40],

-                    'child6': [30, 10, 0, 50],

-                    'child7': [30, 10, 0, 60],

-                    'child8': [10, 10, 30, 0],

-                    'child9': [10, 10, 40, 10],

-                    'child10': [10, 10, 50, 20],

-                    'child11': [10, 10, 30, 30],

-                    'child12': [10, 10, 30, 40],

-                    'child13': [30, 10, 30, 50],

-                    'child14': [30, 10, 30, 60],

-                },

-            },

-        },

-    },

</del><span class="cx">     'vertical-rl': {

</span><span class="cx">         'row': {

</span><span class="cx">             'ltr': {

</span><span class="lines">@@ -770,7 +472,7 @@

</span><span class="cx">         'column': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 60, 0],

</span><span class="cx">                     'child2': [10, 10, 50, 10],

</span><span class="cx">                     'child3': [10, 10, 40, 20],

</span><span class="lines">@@ -787,43 +489,43 @@

</span><span class="cx">                     'child14': [10, 30, 0, 30],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 60, 160],

-                    'child2': [10, 10, 50, 150],

-                    'child3': [10, 10, 40, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 20, 160],

-                    'child6': [10, 30, 10, 140],

-                    'child7': [10, 30, 0, 140],

-                    'child8': [10, 10, 60, 130],

-                    'child9': [10, 10, 50, 120],

-                    'child10': [10, 10, 40, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 20, 130],

-                    'child13': [10, 30, 10, 110],

-                    'child14': [10, 30, 0, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 60, 20],

+                    'child2': [10, 10, 50, 10],

+                    'child3': [10, 10, 40, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 20, 20],

+                    'child6': [10, 30, 10, 0],

+                    'child7': [10, 30, 0, 0],

+                    'child8': [10, 10, 60, -10],

+                    'child9': [10, 10, 50, -20],

+                    'child10': [10, 10, 40, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 20, -10],

+                    'child13': [10, 30, 10, -30],

+                    'child14': [10, 30, 0, -30],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 60, 160],

-                    'child2': [10, 10, 50, 150],

-                    'child3': [10, 10, 40, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 20, 155],

-                    'child6': [10, 30, 10, 140],

-                    'child7': [10, 30, 0, 140],

-                    'child8': [10, 10, 60, 130],

-                    'child9': [10, 10, 50, 120],

-                    'child10': [10, 10, 40, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 20, 125],

-                    'child13': [10, 30, 10, 110],

-                    'child14': [10, 30, 0, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 60, 20],

+                    'child2': [10, 10, 50, 10],

+                    'child3': [10, 10, 40, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 20, 15],

+                    'child6': [10, 30, 10, 0],

+                    'child7': [10, 30, 0, 0],

+                    'child8': [10, 10, 60, -10],

+                    'child9': [10, 10, 50, -20],

+                    'child10': [10, 10, 40, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 20, -15],

+                    'child13': [10, 30, 10, -30],

+                    'child14': [10, 30, 0, -30],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 60, 0],

</span><span class="cx">                     'child2': [10, 10, 50, 10],

</span><span class="cx">                     'child3': [10, 10, 40, 20],

</span><span class="lines">@@ -918,7 +620,7 @@

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 0, 0],

</span><span class="cx">                     'child2': [10, 10, 10, 10],

</span><span class="cx">                     'child3': [10, 10, 20, 20],

</span><span class="lines">@@ -935,43 +637,43 @@

</span><span class="cx">                     'child14': [10, 30, 60, 30],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 0, 160],

-                    'child2': [10, 10, 10, 150],

-                    'child3': [10, 10, 20, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 40, 160],

-                    'child6': [10, 30, 50, 140],

-                    'child7': [10, 30, 60, 140],

-                    'child8': [10, 10, 0, 130],

-                    'child9': [10, 10, 10, 120],

-                    'child10': [10, 10, 20, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 40, 130],

-                    'child13': [10, 30, 50, 110],

-                    'child14': [10, 30, 60, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 0, 20],

+                    'child2': [10, 10, 10, 10],

+                    'child3': [10, 10, 20, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 40, 20],

+                    'child6': [10, 30, 50, 0],

+                    'child7': [10, 30, 60, 0],

+                    'child8': [10, 10, 0, -10],

+                    'child9': [10, 10, 10, -20],

+                    'child10': [10, 10, 20, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 40, -10],

+                    'child13': [10, 30, 50, -30],

+                    'child14': [10, 30, 60, -30],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 0, 160],

-                    'child2': [10, 10, 10, 150],

-                    'child3': [10, 10, 20, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 40, 155],

-                    'child6': [10, 30, 50, 140],

-                    'child7': [10, 30, 60, 140],

-                    'child8': [10, 10, 0, 130],

-                    'child9': [10, 10, 10, 120],

-                    'child10': [10, 10, 20, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 40, 125],

-                    'child13': [10, 30, 50, 110],

-                    'child14': [10, 30, 60, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 0, 20],

+                    'child2': [10, 10, 10, 10],

+                    'child3': [10, 10, 20, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 40, 15],

+                    'child6': [10, 30, 50, 0],

+                    'child7': [10, 30, 60, 0],

+                    'child8': [10, 10, 0, -10],

+                    'child9': [10, 10, 10, -20],

+                    'child10': [10, 10, 20, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 40, -15],

+                    'child13': [10, 30, 50, -30],

+                    'child14': [10, 30, 60, -30],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 0, 0],

</span><span class="cx">                     'child2': [10, 10, 10, 10],

</span><span class="cx">                     'child3': [10, 10, 20, 20],

</span><span class="lines">@@ -1068,7 +770,7 @@

</span><span class="cx">         'column': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 0, 0],

</span><span class="cx">                     'child2': [10, 10, 10, 10],

</span><span class="cx">                     'child3': [10, 10, 20, 20],

</span><span class="lines">@@ -1085,43 +787,43 @@

</span><span class="cx">                     'child14': [10, 30, 60, 30],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 0, 160],

-                    'child2': [10, 10, 10, 150],

-                    'child3': [10, 10, 20, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 40, 160],

-                    'child6': [10, 30, 50, 140],

-                    'child7': [10, 30, 60, 140],

-                    'child8': [10, 10, 0, 130],

-                    'child9': [10, 10, 10, 120],

-                    'child10': [10, 10, 20, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 40, 130],

-                    'child13': [10, 30, 50, 110],

-                    'child14': [10, 30, 60, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 0, 20],

+                    'child2': [10, 10, 10, 10],

+                    'child3': [10, 10, 20, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 40, 20],

+                    'child6': [10, 30, 50, 0],

+                    'child7': [10, 30, 60, 0],

+                    'child8': [10, 10, 0, -10],

+                    'child9': [10, 10, 10, -20],

+                    'child10': [10, 10, 20, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 40, -10],

+                    'child13': [10, 30, 50, -30],

+                    'child14': [10, 30, 60, -30],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 0, 160],

-                    'child2': [10, 10, 10, 150],

-                    'child3': [10, 10, 20, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 40, 155],

-                    'child6': [10, 30, 50, 140],

-                    'child7': [10, 30, 60, 140],

-                    'child8': [10, 10, 0, 130],

-                    'child9': [10, 10, 10, 120],

-                    'child10': [10, 10, 20, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 40, 125],

-                    'child13': [10, 30, 50, 110],

-                    'child14': [10, 30, 60, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 0, 20],

+                    'child2': [10, 10, 10, 10],

+                    'child3': [10, 10, 20, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 40, 15],

+                    'child6': [10, 30, 50, 0],

+                    'child7': [10, 30, 60, 0],

+                    'child8': [10, 10, 0, -10],

+                    'child9': [10, 10, 10, -20],

+                    'child10': [10, 10, 20, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 40, -15],

+                    'child13': [10, 30, 50, -30],

+                    'child14': [10, 30, 60, -30],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 0, 0],

</span><span class="cx">                     'child2': [10, 10, 10, 10],

</span><span class="cx">                     'child3': [10, 10, 20, 20],

</span><span class="lines">@@ -1216,7 +918,7 @@

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 60, 0],

</span><span class="cx">                     'child2': [10, 10, 50, 10],

</span><span class="cx">                     'child3': [10, 10, 40, 20],

</span><span class="lines">@@ -1233,43 +935,43 @@

</span><span class="cx">                     'child14': [10, 30, 0, 30],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 60, 160],

-                    'child2': [10, 10, 50, 150],

-                    'child3': [10, 10, 40, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 20, 160],

-                    'child6': [10, 30, 10, 140],

-                    'child7': [10, 30, 0, 140],

-                    'child8': [10, 10, 60, 130],

-                    'child9': [10, 10, 50, 120],

-                    'child10': [10, 10, 40, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 20, 130],

-                    'child13': [10, 30, 10, 110],

-                    'child14': [10, 30, 0, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 60, 20],

+                    'child2': [10, 10, 50, 10],

+                    'child3': [10, 10, 40, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 20, 20],

+                    'child6': [10, 30, 10, 0],

+                    'child7': [10, 30, 0, 0],

+                    'child8': [10, 10, 60, -10],

+                    'child9': [10, 10, 50, -20],

+                    'child10': [10, 10, 40, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 20, -10],

+                    'child13': [10, 30, 10, -30],

+                    'child14': [10, 30, 0, -30],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [70, 170],

-                    'child1': [10, 10, 60, 160],

-                    'child2': [10, 10, 50, 150],

-                    'child3': [10, 10, 40, 140],

-                    'child4': [10, 10, 30, 160],

-                    'child5': [10, 10, 20, 155],

-                    'child6': [10, 30, 10, 140],

-                    'child7': [10, 30, 0, 140],

-                    'child8': [10, 10, 60, 130],

-                    'child9': [10, 10, 50, 120],

-                    'child10': [10, 10, 40, 110],

-                    'child11': [10, 10, 30, 130],

-                    'child12': [10, 10, 20, 125],

-                    'child13': [10, 30, 10, 110],

-                    'child14': [10, 30, 0, 110],

</del><ins>+                    'flexbox': [70, 30],

+                    'child1': [10, 10, 60, 20],

+                    'child2': [10, 10, 50, 10],

+                    'child3': [10, 10, 40, 0],

+                    'child4': [10, 10, 30, 20],

+                    'child5': [10, 10, 20, 15],

+                    'child6': [10, 30, 10, 0],

+                    'child7': [10, 30, 0, 0],

+                    'child8': [10, 10, 60, -10],

+                    'child9': [10, 10, 50, -20],

+                    'child10': [10, 10, 40, -30],

+                    'child11': [10, 10, 30, -10],

+                    'child12': [10, 10, 20, -15],

+                    'child13': [10, 30, 10, -30],

+                    'child14': [10, 30, 0, -30],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [70, 170],

</del><ins>+                    'flexbox': [70, 30],

</ins><span class="cx">                     'child1': [10, 10, 60, 0],

</span><span class="cx">                     'child2': [10, 10, 50, 10],

</span><span class="cx">                     'child3': [10, 10, 40, 20],

</span><span class="lines">@@ -1301,9 +1003,9 @@

</span><span class="cx"> function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, alignment, expectations)

</span><span class="cx"> {

</span><span class="cx">     var child = document.createElement('div');

</span><del>-    child.setAttribute('style', '-webkit-flex: 1 ' + preferredSize + 'px;'

</del><ins>+    child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;'

</ins><span class="cx">         + crossAxis + ': ' + crossAxisLength + ';'

</span><del>-        + '-webkit-align-self: ' + alignment);

</del><ins>+        + 'align-self: ' + alignment);

</ins><span class="cx"> 

</span><span class="cx">     child.setAttribute(&quot;data-expected-width&quot;, expectations[0]);

</span><span class="cx">     child.setAttribute(&quot;data-expected-height&quot;, expectations[1]);

</span><span class="lines">@@ -1313,7 +1015,7 @@

</span><span class="cx">     flexbox.appendChild(child);

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];

</ins><span class="cx"> var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> var wraps = ['wrap', 'wrap-reverse'];

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinecolumnautoexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-column-auto-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-column-auto-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-column-auto-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,6 +1,8 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

</ins><span class="cx"> Test to make sure that multiline columns break at the right places when auto sized.

</span><span class="cx"> 

</span><del>-PASS

-PASS

-PASS

-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinecolumnautohtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-column-auto.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-column-auto.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-column-auto.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,16 +2,16 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><del>-    -webkit-flex-flow: column wrap;

</del><ins>+    flex-flow: column wrap;

</ins><span class="cx">     margin-top: 20px;

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="cx">     border: 0;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox :nth-child(1) {

</span><span class="lines">@@ -27,8 +27,11 @@

</span><span class="cx">     background-color: yellow;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;Test to make sure that multiline columns break at the right places when auto sized.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div data-expected-width=&quot;200&quot; data-expected-height=&quot;80&quot; class=&quot;flexbox&quot; style=&quot;width: 200px&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinecolumnoverflowexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/multiline-column-overflow-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-column-overflow-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/multiline-column-overflow-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,11 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+.flex {

+  height: 200px;

+  background: blue;

+}

+&lt;/style&gt;

+There should only be a blue box below, and the word &quot;FAIL&quot; should

+not be seen.

+&lt;div class=&quot;flex&quot;&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinecolumnoverflowhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/multiline-column-overflow.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-column-overflow.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/multiline-column-overflow.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,35 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+.flex {

+  display: flex;

+  flex-flow: column wrap;

+  max-height: 200px;

+  background: blue;

+  color: blue;

+}

+

+.item {

+  flex: 0 0 auto;

+  line-height: 20px;

+}

+&lt;/style&gt;

+There should only be a blue box below, and the word &quot;FAIL&quot; should

+not be seen.

+&lt;div class=&quot;flex&quot;&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+  &lt;span class=&quot;item&quot;&gt;FAIL&lt;/span&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilineexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,128 +1,98 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

</ins><span class="cx"> horizontal-tb ltr row wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse

</span><del>-PASS

-horizontal-bt ltr row wrap

-PASS

-horizontal-bt ltr row wrap-reverse

-PASS

-horizontal-bt rtl row wrap

-PASS

-horizontal-bt rtl row wrap-reverse

-PASS

-horizontal-bt ltr column wrap

-PASS

-horizontal-bt ltr column wrap-reverse

-PASS

-horizontal-bt rtl column wrap

-PASS

-horizontal-bt rtl column wrap-reverse

-PASS

-horizontal-bt ltr row-reverse wrap

-PASS

-horizontal-bt ltr row-reverse wrap-reverse

-PASS

-horizontal-bt rtl row-reverse wrap

-PASS

-horizontal-bt rtl row-reverse wrap-reverse

-PASS

-horizontal-bt ltr column-reverse wrap

-PASS

-horizontal-bt ltr column-reverse wrap-reverse

-PASS

-horizontal-bt rtl column-reverse wrap

-PASS

-horizontal-bt rtl column-reverse wrap-reverse

-PASS

</del><span class="cx"> vertical-rl ltr row wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap-reverse

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinejustifycontentexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-justify-content-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-justify-content-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-justify-content-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,640 +1,482 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

+PASS .flexbox 49 

+PASS .flexbox 50 

+PASS .flexbox 51 

+PASS .flexbox 52 

+PASS .flexbox 53 

+PASS .flexbox 54 

+PASS .flexbox 55 

+PASS .flexbox 56 

+PASS .flexbox 57 

+PASS .flexbox 58 

+PASS .flexbox 59 

+PASS .flexbox 60 

+PASS .flexbox 61 

+PASS .flexbox 62 

+PASS .flexbox 63 

+PASS .flexbox 64 

+PASS .flexbox 65 

+PASS .flexbox 66 

+PASS .flexbox 67 

+PASS .flexbox 68 

+PASS .flexbox 69 

+PASS .flexbox 70 

+PASS .flexbox 71 

+PASS .flexbox 72 

+PASS .flexbox 73 

+PASS .flexbox 74 

+PASS .flexbox 75 

+PASS .flexbox 76 

+PASS .flexbox 77 

+PASS .flexbox 78 

+PASS .flexbox 79 

+PASS .flexbox 80 

+PASS .flexbox 81 

+PASS .flexbox 82 

+PASS .flexbox 83 

+PASS .flexbox 84 

+PASS .flexbox 85 

+PASS .flexbox 86 

+PASS .flexbox 87 

+PASS .flexbox 88 

+PASS .flexbox 89 

+PASS .flexbox 90 

+PASS .flexbox 91 

+PASS .flexbox 92 

+PASS .flexbox 93 

+PASS .flexbox 94 

+PASS .flexbox 95 

+PASS .flexbox 96 

+PASS .flexbox 97 

+PASS .flexbox 98 

+PASS .flexbox 99 

+PASS .flexbox 100 

+PASS .flexbox 101 

+PASS .flexbox 102 

+PASS .flexbox 103 

+PASS .flexbox 104 

+PASS .flexbox 105 

+PASS .flexbox 106 

+PASS .flexbox 107 

+PASS .flexbox 108 

+PASS .flexbox 109 

+PASS .flexbox 110 

+PASS .flexbox 111 

+PASS .flexbox 112 

+PASS .flexbox 113 

+PASS .flexbox 114 

+PASS .flexbox 115 

+PASS .flexbox 116 

+PASS .flexbox 117 

+PASS .flexbox 118 

+PASS .flexbox 119 

+PASS .flexbox 120 

+PASS .flexbox 121 

+PASS .flexbox 122 

+PASS .flexbox 123 

+PASS .flexbox 124 

+PASS .flexbox 125 

+PASS .flexbox 126 

+PASS .flexbox 127 

+PASS .flexbox 128 

+PASS .flexbox 129 

+PASS .flexbox 130 

+PASS .flexbox 131 

+PASS .flexbox 132 

+PASS .flexbox 133 

+PASS .flexbox 134 

+PASS .flexbox 135 

+PASS .flexbox 136 

+PASS .flexbox 137 

+PASS .flexbox 138 

+PASS .flexbox 139 

+PASS .flexbox 140 

+PASS .flexbox 141 

+PASS .flexbox 142 

+PASS .flexbox 143 

+PASS .flexbox 144 

+PASS .flexbox 145 

+PASS .flexbox 146 

+PASS .flexbox 147 

+PASS .flexbox 148 

+PASS .flexbox 149 

+PASS .flexbox 150 

+PASS .flexbox 151 

+PASS .flexbox 152 

+PASS .flexbox 153 

+PASS .flexbox 154 

+PASS .flexbox 155 

+PASS .flexbox 156 

+PASS .flexbox 157 

+PASS .flexbox 158 

+PASS .flexbox 159 

+PASS .flexbox 160 

+PASS .flexbox 161 

+PASS .flexbox 162 

+PASS .flexbox 163 

+PASS .flexbox 164 

+PASS .flexbox 165 

+PASS .flexbox 166 

+PASS .flexbox 167 

+PASS .flexbox 168 

+PASS .flexbox 169 

+PASS .flexbox 170 

+PASS .flexbox 171 

+PASS .flexbox 172 

+PASS .flexbox 173 

+PASS .flexbox 174 

+PASS .flexbox 175 

+PASS .flexbox 176 

+PASS .flexbox 177 

+PASS .flexbox 178 

+PASS .flexbox 179 

+PASS .flexbox 180 

+PASS .flexbox 181 

+PASS .flexbox 182 

+PASS .flexbox 183 

+PASS .flexbox 184 

+PASS .flexbox 185 

+PASS .flexbox 186 

+PASS .flexbox 187 

+PASS .flexbox 188 

+PASS .flexbox 189 

+PASS .flexbox 190 

+PASS .flexbox 191 

+PASS .flexbox 192 

+PASS .flexbox 193 

+PASS .flexbox 194 

+PASS .flexbox 195 

+PASS .flexbox 196 

+PASS .flexbox 197 

+PASS .flexbox 198 

+PASS .flexbox 199 

+PASS .flexbox 200 

+PASS .flexbox 201 

+PASS .flexbox 202 

+PASS .flexbox 203 

+PASS .flexbox 204 

+PASS .flexbox 205 

+PASS .flexbox 206 

+PASS .flexbox 207 

+PASS .flexbox 208 

+PASS .flexbox 209 

+PASS .flexbox 210 

+PASS .flexbox 211 

+PASS .flexbox 212 

+PASS .flexbox 213 

+PASS .flexbox 214 

+PASS .flexbox 215 

+PASS .flexbox 216 

+PASS .flexbox 217 

+PASS .flexbox 218 

+PASS .flexbox 219 

+PASS .flexbox 220 

+PASS .flexbox 221 

+PASS .flexbox 222 

+PASS .flexbox 223 

+PASS .flexbox 224 

+PASS .flexbox 225 

+PASS .flexbox 226 

+PASS .flexbox 227 

+PASS .flexbox 228 

+PASS .flexbox 229 

+PASS .flexbox 230 

+PASS .flexbox 231 

+PASS .flexbox 232 

+PASS .flexbox 233 

+PASS .flexbox 234 

+PASS .flexbox 235 

+PASS .flexbox 236 

+PASS .flexbox 237 

+PASS .flexbox 238 

+PASS .flexbox 239 

+PASS .flexbox 240 

</ins><span class="cx"> horizontal-tb ltr row wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

-horizontal-bt ltr row wrap justify-content-flex-start

-PASS

-horizontal-bt ltr row wrap justify-content-flex-end

-PASS

-horizontal-bt ltr row wrap justify-content-center

-PASS

-horizontal-bt ltr row wrap justify-content-space-between

-PASS

-horizontal-bt ltr row wrap justify-content-space-around

-PASS

-horizontal-bt ltr row wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt ltr row wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt ltr row wrap-reverse justify-content-center

-PASS

-horizontal-bt ltr row wrap-reverse justify-content-space-between

-PASS

-horizontal-bt ltr row wrap-reverse justify-content-space-around

-PASS

-horizontal-bt rtl row wrap justify-content-flex-start

-PASS

-horizontal-bt rtl row wrap justify-content-flex-end

-PASS

-horizontal-bt rtl row wrap justify-content-center

-PASS

-horizontal-bt rtl row wrap justify-content-space-between

-PASS

-horizontal-bt rtl row wrap justify-content-space-around

-PASS

-horizontal-bt rtl row wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt rtl row wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt rtl row wrap-reverse justify-content-center

-PASS

-horizontal-bt rtl row wrap-reverse justify-content-space-between

-PASS

-horizontal-bt rtl row wrap-reverse justify-content-space-around

-PASS

-horizontal-bt ltr column wrap justify-content-flex-start

-PASS

-horizontal-bt ltr column wrap justify-content-flex-end

-PASS

-horizontal-bt ltr column wrap justify-content-center

-PASS

-horizontal-bt ltr column wrap justify-content-space-between

-PASS

-horizontal-bt ltr column wrap justify-content-space-around

-PASS

-horizontal-bt ltr column wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt ltr column wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt ltr column wrap-reverse justify-content-center

-PASS

-horizontal-bt ltr column wrap-reverse justify-content-space-between

-PASS

-horizontal-bt ltr column wrap-reverse justify-content-space-around

-PASS

-horizontal-bt rtl column wrap justify-content-flex-start

-PASS

-horizontal-bt rtl column wrap justify-content-flex-end

-PASS

-horizontal-bt rtl column wrap justify-content-center

-PASS

-horizontal-bt rtl column wrap justify-content-space-between

-PASS

-horizontal-bt rtl column wrap justify-content-space-around

-PASS

-horizontal-bt rtl column wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt rtl column wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt rtl column wrap-reverse justify-content-center

-PASS

-horizontal-bt rtl column wrap-reverse justify-content-space-between

-PASS

-horizontal-bt rtl column wrap-reverse justify-content-space-around

-PASS

-horizontal-bt ltr row-reverse wrap justify-content-flex-start

-PASS

-horizontal-bt ltr row-reverse wrap justify-content-flex-end

-PASS

-horizontal-bt ltr row-reverse wrap justify-content-center

-PASS

-horizontal-bt ltr row-reverse wrap justify-content-space-between

-PASS

-horizontal-bt ltr row-reverse wrap justify-content-space-around

-PASS

-horizontal-bt ltr row-reverse wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt ltr row-reverse wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt ltr row-reverse wrap-reverse justify-content-center

-PASS

-horizontal-bt ltr row-reverse wrap-reverse justify-content-space-between

-PASS

-horizontal-bt ltr row-reverse wrap-reverse justify-content-space-around

-PASS

-horizontal-bt rtl row-reverse wrap justify-content-flex-start

-PASS

-horizontal-bt rtl row-reverse wrap justify-content-flex-end

-PASS

-horizontal-bt rtl row-reverse wrap justify-content-center

-PASS

-horizontal-bt rtl row-reverse wrap justify-content-space-between

-PASS

-horizontal-bt rtl row-reverse wrap justify-content-space-around

-PASS

-horizontal-bt rtl row-reverse wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt rtl row-reverse wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt rtl row-reverse wrap-reverse justify-content-center

-PASS

-horizontal-bt rtl row-reverse wrap-reverse justify-content-space-between

-PASS

-horizontal-bt rtl row-reverse wrap-reverse justify-content-space-around

-PASS

-horizontal-bt ltr column-reverse wrap justify-content-flex-start

-PASS

-horizontal-bt ltr column-reverse wrap justify-content-flex-end

-PASS

-horizontal-bt ltr column-reverse wrap justify-content-center

-PASS

-horizontal-bt ltr column-reverse wrap justify-content-space-between

-PASS

-horizontal-bt ltr column-reverse wrap justify-content-space-around

-PASS

-horizontal-bt ltr column-reverse wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt ltr column-reverse wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt ltr column-reverse wrap-reverse justify-content-center

-PASS

-horizontal-bt ltr column-reverse wrap-reverse justify-content-space-between

-PASS

-horizontal-bt ltr column-reverse wrap-reverse justify-content-space-around

-PASS

-horizontal-bt rtl column-reverse wrap justify-content-flex-start

-PASS

-horizontal-bt rtl column-reverse wrap justify-content-flex-end

-PASS

-horizontal-bt rtl column-reverse wrap justify-content-center

-PASS

-horizontal-bt rtl column-reverse wrap justify-content-space-between

-PASS

-horizontal-bt rtl column-reverse wrap justify-content-space-around

-PASS

-horizontal-bt rtl column-reverse wrap-reverse justify-content-flex-start

-PASS

-horizontal-bt rtl column-reverse wrap-reverse justify-content-flex-end

-PASS

-horizontal-bt rtl column-reverse wrap-reverse justify-content-center

-PASS

-horizontal-bt rtl column-reverse wrap-reverse justify-content-space-between

-PASS

-horizontal-bt rtl column-reverse wrap-reverse justify-content-space-around

-PASS

</del><span class="cx"> vertical-rl ltr row wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse wrap-reverse justify-content-space-around

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinejustifycontenthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-justify-content.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-justify-content.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-justify-content.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,13 +3,13 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="cx">     position: relative;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     max-width: 100px;

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .title {

</span><span class="cx">     margin-top: 1em;

</span><span class="lines">@@ -21,49 +21,46 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .wrap {

</span><del>-    -webkit-flex-wrap: wrap;

</del><ins>+    flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> .wrap-reverse {

</span><del>-    -webkit-flex-wrap: wrap-reverse;

</del><ins>+    flex-wrap: wrap-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-flex-start {

</span><del>-    -webkit-justify-content: flex-start;

</del><ins>+    justify-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-flex-end {

</span><del>-    -webkit-justify-content: flex-end;

</del><ins>+    justify-content: flex-end;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-center {

</span><del>-    -webkit-justify-content: center;

</del><ins>+    justify-content: center;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-space-between {

</span><del>-    -webkit-justify-content: space-between;

</del><ins>+    justify-content: space-between;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-space-around {

</span><del>-    -webkit-justify-content: space-around;

</del><ins>+    justify-content: space-around;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: #0f0;

</span><span class="lines">@@ -78,8 +75,11 @@

</span><span class="cx">     background-color: #009;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> var expectations = {

</span><span class="lines">@@ -701,624 +701,6 @@

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        'row': {

-            'ltr': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 10],

-                        'child2': [20, 10, 40, 10],

-                        'child3': [40, 10, 0, 0],

-                        'child4': [20, 10, 40, 0],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 10],

-                        'child2': [20, 10, 60, 10],

-                        'child3': [40, 10, 20, 0],

-                        'child4': [20, 10, 60, 0],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 10, 10],

-                        'child2': [20, 10, 50, 10],

-                        'child3': [40, 10, 10, 0],

-                        'child4': [20, 10, 50, 0],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 10],

-                        'child2': [20, 10, 60, 10],

-                        'child3': [40, 10, 0, 0],

-                        'child4': [20, 10, 60, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 5, 10],

-                        'child2': [20, 10, 55, 10],

-                        'child3': [40, 10, 5, 0],

-                        'child4': [20, 10, 55, 0],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 0],

-                        'child2': [20, 10, 40, 0],

-                        'child3': [40, 10, 0, 10],

-                        'child4': [20, 10, 40, 10],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 0],

-                        'child2': [20, 10, 60, 0],

-                        'child3': [40, 10, 20, 10],

-                        'child4': [20, 10, 60, 10],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 10, 0],

-                        'child2': [20, 10, 50, 0],

-                        'child3': [40, 10, 10, 10],

-                        'child4': [20, 10, 50, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 0],

-                        'child2': [20, 10, 60, 0],

-                        'child3': [40, 10, 0, 10],

-                        'child4': [20, 10, 60, 10],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 5, 0],

-                        'child2': [20, 10, 55, 0],

-                        'child3': [40, 10, 5, 10],

-                        'child4': [20, 10, 55, 10],

-                    },

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 10],

-                        'child2': [20, 10, 20, 10],

-                        'child3': [40, 10, 40, 0],

-                        'child4': [20, 10, 20, 0],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 10],

-                        'child2': [20, 10, 0, 10],

-                        'child3': [40, 10, 20, 0],

-                        'child4': [20, 10, 0, 0],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 30, 10],

-                        'child2': [20, 10, 10, 10],

-                        'child3': [40, 10, 30, 0],

-                        'child4': [20, 10, 10, 0],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 10],

-                        'child2': [20, 10, 0, 10],

-                        'child3': [40, 10, 40, 0],

-                        'child4': [20, 10, 0, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 35, 10],

-                        'child2': [20, 10, 5, 10],

-                        'child3': [40, 10, 35, 0],

-                        'child4': [20, 10, 5, 0],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 0],

-                        'child2': [20, 10, 20, 0],

-                        'child3': [40, 10, 40, 10],

-                        'child4': [20, 10, 20, 10],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 0],

-                        'child2': [20, 10, 0, 0],

-                        'child3': [40, 10, 20, 10],

-                        'child4': [20, 10, 0, 10],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 30, 0],

-                        'child2': [20, 10, 10, 0],

-                        'child3': [40, 10, 30, 10],

-                        'child4': [20, 10, 10, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 0],

-                        'child2': [20, 10, 0, 0],

-                        'child3': [40, 10, 40, 10],

-                        'child4': [20, 10, 0, 10],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 35, 0],

-                        'child2': [20, 10, 5, 0],

-                        'child3': [40, 10, 35, 10],

-                        'child4': [20, 10, 5, 10],

-                    },

-                },

-            },

-        },

-        'column': {

-            'ltr': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 40],

-                        'child2': [10, 20, 0, 20],

-                        'child3': [10, 40, 10, 40],

-                        'child4': [10, 20, 10, 20],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 20],

-                        'child2': [10, 20, 0, 0],

-                        'child3': [10, 40, 10, 20],

-                        'child4': [10, 20, 10, 0],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 30],

-                        'child2': [10, 20, 0, 10],

-                        'child3': [10, 40, 10, 30],

-                        'child4': [10, 20, 10, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 40],

-                        'child2': [10, 20, 0, 0],

-                        'child3': [10, 40, 10, 40],

-                        'child4': [10, 20, 10, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 35],

-                        'child2': [10, 20, 0, 5],

-                        'child3': [10, 40, 10, 35],

-                        'child4': [10, 20, 10, 5],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 40],

-                        'child2': [10, 20, 90, 20],

-                        'child3': [10, 40, 80, 40],

-                        'child4': [10, 20, 80, 20],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 20],

-                        'child2': [10, 20, 90, 0],

-                        'child3': [10, 40, 80, 20],

-                        'child4': [10, 20, 80, 0],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 30],

-                        'child2': [10, 20, 90, 10],

-                        'child3': [10, 40, 80, 30],

-                        'child4': [10, 20, 80, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 40],

-                        'child2': [10, 20, 90, 0],

-                        'child3': [10, 40, 80, 40],

-                        'child4': [10, 20, 80, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 35],

-                        'child2': [10, 20, 90, 5],

-                        'child3': [10, 40, 80, 35],

-                        'child4': [10, 20, 80, 5],

-                    },

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 40],

-                        'child2': [10, 20, 90, 20],

-                        'child3': [10, 40, 80, 40],

-                        'child4': [10, 20, 80, 20],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 20],

-                        'child2': [10, 20, 90, 0],

-                        'child3': [10, 40, 80, 20],

-                        'child4': [10, 20, 80, 0],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 30],

-                        'child2': [10, 20, 90, 10],

-                        'child3': [10, 40, 80, 30],

-                        'child4': [10, 20, 80, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 40],

-                        'child2': [10, 20, 90, 0],

-                        'child3': [10, 40, 80, 40],

-                        'child4': [10, 20, 80, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 35],

-                        'child2': [10, 20, 90, 5],

-                        'child3': [10, 40, 80, 35],

-                        'child4': [10, 20, 80, 5],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 40],

-                        'child2': [10, 20, 0, 20],

-                        'child3': [10, 40, 10, 40],

-                        'child4': [10, 20, 10, 20],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 20],

-                        'child2': [10, 20, 0, 0],

-                        'child3': [10, 40, 10, 20],

-                        'child4': [10, 20, 10, 0],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 30],

-                        'child2': [10, 20, 0, 10],

-                        'child3': [10, 40, 10, 30],

-                        'child4': [10, 20, 10, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 40],

-                        'child2': [10, 20, 0, 0],

-                        'child3': [10, 40, 10, 40],

-                        'child4': [10, 20, 10, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 35],

-                        'child2': [10, 20, 0, 5],

-                        'child3': [10, 40, 10, 35],

-                        'child4': [10, 20, 10, 5],

-                    },

-                },

-            },

-        },

-        'row-reverse': {

-            'ltr': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 10],

-                        'child2': [20, 10, 20, 10],

-                        'child3': [40, 10, 40, 0],

-                        'child4': [20, 10, 20, 0],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 10],

-                        'child2': [20, 10, 0, 10],

-                        'child3': [40, 10, 20, 0],

-                        'child4': [20, 10, 0, 0],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 30, 10],

-                        'child2': [20, 10, 10, 10],

-                        'child3': [40, 10, 30, 0],

-                        'child4': [20, 10, 10, 0],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 10],

-                        'child2': [20, 10, 0, 10],

-                        'child3': [40, 10, 40, 0],

-                        'child4': [20, 10, 0, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 35, 10],

-                        'child2': [20, 10, 5, 10],

-                        'child3': [40, 10, 35, 0],

-                        'child4': [20, 10, 5, 0],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 0],

-                        'child2': [20, 10, 20, 0],

-                        'child3': [40, 10, 40, 10],

-                        'child4': [20, 10, 20, 10],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 0],

-                        'child2': [20, 10, 0, 0],

-                        'child3': [40, 10, 20, 10],

-                        'child4': [20, 10, 0, 10],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 30, 0],

-                        'child2': [20, 10, 10, 0],

-                        'child3': [40, 10, 30, 10],

-                        'child4': [20, 10, 10, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 40, 0],

-                        'child2': [20, 10, 0, 0],

-                        'child3': [40, 10, 40, 10],

-                        'child4': [20, 10, 0, 10],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 35, 0],

-                        'child2': [20, 10, 5, 0],

-                        'child3': [40, 10, 35, 10],

-                        'child4': [20, 10, 5, 10],

-                    },

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 10],

-                        'child2': [20, 10, 40, 10],

-                        'child3': [40, 10, 0, 0],

-                        'child4': [20, 10, 40, 0],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 10],

-                        'child2': [20, 10, 60, 10],

-                        'child3': [40, 10, 20, 0],

-                        'child4': [20, 10, 60, 0],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 10, 10],

-                        'child2': [20, 10, 50, 10],

-                        'child3': [40, 10, 10, 0],

-                        'child4': [20, 10, 50, 0],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 10],

-                        'child2': [20, 10, 60, 10],

-                        'child3': [40, 10, 0, 0],

-                        'child4': [20, 10, 60, 0],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 5, 10],

-                        'child2': [20, 10, 55, 10],

-                        'child3': [40, 10, 5, 0],

-                        'child4': [20, 10, 55, 0],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 0],

-                        'child2': [20, 10, 40, 0],

-                        'child3': [40, 10, 0, 10],

-                        'child4': [20, 10, 40, 10],

-                    },

-                    'flex-end': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 20, 0],

-                        'child2': [20, 10, 60, 0],

-                        'child3': [40, 10, 20, 10],

-                        'child4': [20, 10, 60, 10],

-                    },

-                    'center': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 10, 0],

-                        'child2': [20, 10, 50, 0],

-                        'child3': [40, 10, 10, 10],

-                        'child4': [20, 10, 50, 10],

-                    },

-                    'space-between': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 0, 0],

-                        'child2': [20, 10, 60, 0],

-                        'child3': [40, 10, 0, 10],

-                        'child4': [20, 10, 60, 10],

-                    },

-                    'space-around': {

-                        'flexbox': [80, 20],

-                        'child1': [40, 10, 5, 0],

-                        'child2': [20, 10, 55, 0],

-                        'child3': [40, 10, 5, 10],

-                        'child4': [20, 10, 55, 10],

-                    },

-                },

-            },

-        },

-        'column-reverse': {

-            'ltr': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 0],

-                        'child2': [10, 20, 0, 40],

-                        'child3': [10, 40, 10, 0],

-                        'child4': [10, 20, 10, 40],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 20],

-                        'child2': [10, 20, 0, 60],

-                        'child3': [10, 40, 10, 20],

-                        'child4': [10, 20, 10, 60],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 10],

-                        'child2': [10, 20, 0, 50],

-                        'child3': [10, 40, 10, 10],

-                        'child4': [10, 20, 10, 50],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 0],

-                        'child2': [10, 20, 0, 60],

-                        'child3': [10, 40, 10, 0],

-                        'child4': [10, 20, 10, 60],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 5],

-                        'child2': [10, 20, 0, 55],

-                        'child3': [10, 40, 10, 5],

-                        'child4': [10, 20, 10, 55],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 0],

-                        'child2': [10, 20, 90, 40],

-                        'child3': [10, 40, 80, 0],

-                        'child4': [10, 20, 80, 40],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 20],

-                        'child2': [10, 20, 90, 60],

-                        'child3': [10, 40, 80, 20],

-                        'child4': [10, 20, 80, 60],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 10],

-                        'child2': [10, 20, 90, 50],

-                        'child3': [10, 40, 80, 10],

-                        'child4': [10, 20, 80, 50],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 0],

-                        'child2': [10, 20, 90, 60],

-                        'child3': [10, 40, 80, 0],

-                        'child4': [10, 20, 80, 60],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 5],

-                        'child2': [10, 20, 90, 55],

-                        'child3': [10, 40, 80, 5],

-                        'child4': [10, 20, 80, 55],

-                    },

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 0],

-                        'child2': [10, 20, 90, 40],

-                        'child3': [10, 40, 80, 0],

-                        'child4': [10, 20, 80, 40],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 20],

-                        'child2': [10, 20, 90, 60],

-                        'child3': [10, 40, 80, 20],

-                        'child4': [10, 20, 80, 60],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 10],

-                        'child2': [10, 20, 90, 50],

-                        'child3': [10, 40, 80, 10],

-                        'child4': [10, 20, 80, 50],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 0],

-                        'child2': [10, 20, 90, 60],

-                        'child3': [10, 40, 80, 0],

-                        'child4': [10, 20, 80, 60],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 90, 5],

-                        'child2': [10, 20, 90, 55],

-                        'child3': [10, 40, 80, 5],

-                        'child4': [10, 20, 80, 55],

-                    },

-                },

-                'wrap-reverse': {

-                    'flex-start': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 0],

-                        'child2': [10, 20, 0, 40],

-                        'child3': [10, 40, 10, 0],

-                        'child4': [10, 20, 10, 40],

-                    },

-                    'flex-end': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 20],

-                        'child2': [10, 20, 0, 60],

-                        'child3': [10, 40, 10, 20],

-                        'child4': [10, 20, 10, 60],

-                    },

-                    'center': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 10],

-                        'child2': [10, 20, 0, 50],

-                        'child3': [10, 40, 10, 10],

-                        'child4': [10, 20, 10, 50],

-                    },

-                    'space-between': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 0],

-                        'child2': [10, 20, 0, 60],

-                        'child3': [10, 40, 10, 0],

-                        'child4': [10, 20, 10, 60],

-                    },

-                    'space-around': {

-                        'flexbox': [100, 80],

-                        'child1': [10, 40, 0, 5],

-                        'child2': [10, 20, 0, 55],

-                        'child3': [10, 40, 10, 5],

-                        'child4': [10, 20, 10, 55],

-                    },

-                },

-            },

-        },

-    },

</del><span class="cx">     'vertical-rl': {

</span><span class="cx">         'row': {

</span><span class="cx">             'ltr': {

</span><span class="lines">@@ -1478,7 +860,7 @@

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 20, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -1485,7 +867,7 @@

</span><span class="cx">                         'child4': [20, 10, 20, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -1492,7 +874,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 30, 0],

</span><span class="cx">                         'child2': [20, 10, 10, 0],

</span><span class="cx">                         'child3': [40, 10, 30, 10],

</span><span class="lines">@@ -1499,7 +881,7 @@

</span><span class="cx">                         'child4': [20, 10, 10, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -1506,7 +888,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 35, 0],

</span><span class="cx">                         'child2': [20, 10, 5, 0],

</span><span class="cx">                         'child3': [40, 10, 35, 10],

</span><span class="lines">@@ -1515,39 +897,39 @@

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 20, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 20, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 20, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 20, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 30, 30],

-                        'child2': [20, 10, 10, 30],

-                        'child3': [40, 10, 30, 20],

-                        'child4': [20, 10, 10, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 30, 0],

+                        'child2': [20, 10, 10, 0],

+                        'child3': [40, 10, 30, -10],

+                        'child4': [20, 10, 10, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 35, 30],

-                        'child2': [20, 10, 5, 30],

-                        'child3': [40, 10, 35, 20],

-                        'child4': [20, 10, 5, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 35, 0],

+                        'child2': [20, 10, 5, 0],

+                        'child3': [40, 10, 35, -10],

+                        'child4': [20, 10, 5, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">             },

</span><span class="lines">@@ -1554,44 +936,44 @@

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 20, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 20, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 20, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 20, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 30, 30],

-                        'child2': [20, 10, 10, 30],

-                        'child3': [40, 10, 30, 20],

-                        'child4': [20, 10, 10, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 30, 0],

+                        'child2': [20, 10, 10, 0],

+                        'child3': [40, 10, 30, -10],

+                        'child4': [20, 10, 10, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 35, 30],

-                        'child2': [20, 10, 5, 30],

-                        'child3': [40, 10, 35, 20],

-                        'child4': [20, 10, 5, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 35, 0],

+                        'child2': [20, 10, 5, 0],

+                        'child3': [40, 10, 35, -10],

+                        'child4': [20, 10, 5, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 20, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -1598,7 +980,7 @@

</span><span class="cx">                         'child4': [20, 10, 20, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -1605,7 +987,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 30, 0],

</span><span class="cx">                         'child2': [20, 10, 10, 0],

</span><span class="cx">                         'child3': [40, 10, 30, 10],

</span><span class="lines">@@ -1612,7 +994,7 @@

</span><span class="cx">                         'child4': [20, 10, 10, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -1619,7 +1001,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 35, 0],

</span><span class="cx">                         'child2': [20, 10, 5, 0],

</span><span class="cx">                         'child3': [40, 10, 35, 10],

</span><span class="lines">@@ -1786,7 +1168,7 @@

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 40, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -1793,7 +1175,7 @@

</span><span class="cx">                         'child4': [20, 10, 40, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -1800,7 +1182,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 10, 0],

</span><span class="cx">                         'child2': [20, 10, 50, 0],

</span><span class="cx">                         'child3': [40, 10, 10, 10],

</span><span class="lines">@@ -1807,7 +1189,7 @@

</span><span class="cx">                         'child4': [20, 10, 50, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -1814,7 +1196,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 5, 0],

</span><span class="cx">                         'child2': [20, 10, 55, 0],

</span><span class="cx">                         'child3': [40, 10, 5, 10],

</span><span class="lines">@@ -1823,39 +1205,39 @@

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 40, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 40, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 40, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 40, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 10, 30],

-                        'child2': [20, 10, 50, 30],

-                        'child3': [40, 10, 10, 20],

-                        'child4': [20, 10, 50, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 10, 0],

+                        'child2': [20, 10, 50, 0],

+                        'child3': [40, 10, 10, -10],

+                        'child4': [20, 10, 50, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 5, 30],

-                        'child2': [20, 10, 55, 30],

-                        'child3': [40, 10, 5, 20],

-                        'child4': [20, 10, 55, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 5, 0],

+                        'child2': [20, 10, 55, 0],

+                        'child3': [40, 10, 5, -10],

+                        'child4': [20, 10, 55, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">             },

</span><span class="lines">@@ -1862,44 +1244,44 @@

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 40, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 40, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 40, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 40, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 10, 30],

-                        'child2': [20, 10, 50, 30],

-                        'child3': [40, 10, 10, 20],

-                        'child4': [20, 10, 50, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 10, 0],

+                        'child2': [20, 10, 50, 0],

+                        'child3': [40, 10, 10, -10],

+                        'child4': [20, 10, 50, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 5, 30],

-                        'child2': [20, 10, 55, 30],

-                        'child3': [40, 10, 5, 20],

-                        'child4': [20, 10, 55, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 5, 0],

+                        'child2': [20, 10, 55, 0],

+                        'child3': [40, 10, 5, -10],

+                        'child4': [20, 10, 55, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 40, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -1906,7 +1288,7 @@

</span><span class="cx">                         'child4': [20, 10, 40, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -1913,7 +1295,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 10, 0],

</span><span class="cx">                         'child2': [20, 10, 50, 0],

</span><span class="cx">                         'child3': [40, 10, 10, 10],

</span><span class="lines">@@ -1920,7 +1302,7 @@

</span><span class="cx">                         'child4': [20, 10, 50, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -1927,7 +1309,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 5, 0],

</span><span class="cx">                         'child2': [20, 10, 55, 0],

</span><span class="cx">                         'child3': [40, 10, 5, 10],

</span><span class="lines">@@ -2096,7 +1478,7 @@

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 40, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -2103,7 +1485,7 @@

</span><span class="cx">                         'child4': [20, 10, 40, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -2110,7 +1492,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 10, 0],

</span><span class="cx">                         'child2': [20, 10, 50, 0],

</span><span class="cx">                         'child3': [40, 10, 10, 10],

</span><span class="lines">@@ -2117,7 +1499,7 @@

</span><span class="cx">                         'child4': [20, 10, 50, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -2124,7 +1506,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 5, 0],

</span><span class="cx">                         'child2': [20, 10, 55, 0],

</span><span class="cx">                         'child3': [40, 10, 5, 10],

</span><span class="lines">@@ -2133,39 +1515,39 @@

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 40, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 40, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 40, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 40, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 10, 30],

-                        'child2': [20, 10, 50, 30],

-                        'child3': [40, 10, 10, 20],

-                        'child4': [20, 10, 50, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 10, 0],

+                        'child2': [20, 10, 50, 0],

+                        'child3': [40, 10, 10, -10],

+                        'child4': [20, 10, 50, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 5, 30],

-                        'child2': [20, 10, 55, 30],

-                        'child3': [40, 10, 5, 20],

-                        'child4': [20, 10, 55, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 5, 0],

+                        'child2': [20, 10, 55, 0],

+                        'child3': [40, 10, 5, -10],

+                        'child4': [20, 10, 55, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">             },

</span><span class="lines">@@ -2172,44 +1554,44 @@

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 40, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 40, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 40, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 40, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 10, 30],

-                        'child2': [20, 10, 50, 30],

-                        'child3': [40, 10, 10, 20],

-                        'child4': [20, 10, 50, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 10, 0],

+                        'child2': [20, 10, 50, 0],

+                        'child3': [40, 10, 10, -10],

+                        'child4': [20, 10, 50, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 0, 30],

-                        'child2': [20, 10, 60, 30],

-                        'child3': [40, 10, 0, 20],

-                        'child4': [20, 10, 60, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 0, 0],

+                        'child2': [20, 10, 60, 0],

+                        'child3': [40, 10, 0, -10],

+                        'child4': [20, 10, 60, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 5, 30],

-                        'child2': [20, 10, 55, 30],

-                        'child3': [40, 10, 5, 20],

-                        'child4': [20, 10, 55, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 5, 0],

+                        'child2': [20, 10, 55, 0],

+                        'child3': [40, 10, 5, -10],

+                        'child4': [20, 10, 55, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 40, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -2216,7 +1598,7 @@

</span><span class="cx">                         'child4': [20, 10, 40, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -2223,7 +1605,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 10, 0],

</span><span class="cx">                         'child2': [20, 10, 50, 0],

</span><span class="cx">                         'child3': [40, 10, 10, 10],

</span><span class="lines">@@ -2230,7 +1612,7 @@

</span><span class="cx">                         'child4': [20, 10, 50, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 0, 0],

</span><span class="cx">                         'child2': [20, 10, 60, 0],

</span><span class="cx">                         'child3': [40, 10, 0, 10],

</span><span class="lines">@@ -2237,7 +1619,7 @@

</span><span class="cx">                         'child4': [20, 10, 60, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 5, 0],

</span><span class="cx">                         'child2': [20, 10, 55, 0],

</span><span class="cx">                         'child3': [40, 10, 5, 10],

</span><span class="lines">@@ -2404,7 +1786,7 @@

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 20, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -2411,7 +1793,7 @@

</span><span class="cx">                         'child4': [20, 10, 20, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -2418,7 +1800,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 30, 0],

</span><span class="cx">                         'child2': [20, 10, 10, 0],

</span><span class="cx">                         'child3': [40, 10, 30, 10],

</span><span class="lines">@@ -2425,7 +1807,7 @@

</span><span class="cx">                         'child4': [20, 10, 10, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -2432,7 +1814,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 35, 0],

</span><span class="cx">                         'child2': [20, 10, 5, 0],

</span><span class="cx">                         'child3': [40, 10, 35, 10],

</span><span class="lines">@@ -2441,39 +1823,39 @@

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 20, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 20, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 20, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 20, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 30, 30],

-                        'child2': [20, 10, 10, 30],

-                        'child3': [40, 10, 30, 20],

-                        'child4': [20, 10, 10, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 30, 0],

+                        'child2': [20, 10, 10, 0],

+                        'child3': [40, 10, 30, -10],

+                        'child4': [20, 10, 10, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 35, 30],

-                        'child2': [20, 10, 5, 30],

-                        'child3': [40, 10, 35, 20],

-                        'child4': [20, 10, 5, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 35, 0],

+                        'child2': [20, 10, 5, 0],

+                        'child3': [40, 10, 35, -10],

+                        'child4': [20, 10, 5, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">             },

</span><span class="lines">@@ -2480,44 +1862,44 @@

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 20, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 20, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 20, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 20, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 20, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 20, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 20, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 20, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 30, 30],

-                        'child2': [20, 10, 10, 30],

-                        'child3': [40, 10, 30, 20],

-                        'child4': [20, 10, 10, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 30, 0],

+                        'child2': [20, 10, 10, 0],

+                        'child3': [40, 10, 30, -10],

+                        'child4': [20, 10, 10, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 40, 30],

-                        'child2': [20, 10, 0, 30],

-                        'child3': [40, 10, 40, 20],

-                        'child4': [20, 10, 0, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 40, 0],

+                        'child2': [20, 10, 0, 0],

+                        'child3': [40, 10, 40, -10],

+                        'child4': [20, 10, 0, -10],

</ins><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

-                        'child1': [40, 10, 35, 30],

-                        'child2': [20, 10, 5, 30],

-                        'child3': [40, 10, 35, 20],

-                        'child4': [20, 10, 5, 20],

</del><ins>+                        'flexbox': [80, 10],

+                        'child1': [40, 10, 35, 0],

+                        'child2': [20, 10, 5, 0],

+                        'child3': [40, 10, 35, -10],

+                        'child4': [20, 10, 5, -10],

</ins><span class="cx">                     },

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><span class="cx">                     'flex-start': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 20, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -2524,7 +1906,7 @@

</span><span class="cx">                         'child4': [20, 10, 20, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'flex-end': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 20, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 20, 10],

</span><span class="lines">@@ -2531,7 +1913,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'center': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 30, 0],

</span><span class="cx">                         'child2': [20, 10, 10, 0],

</span><span class="cx">                         'child3': [40, 10, 30, 10],

</span><span class="lines">@@ -2538,7 +1920,7 @@

</span><span class="cx">                         'child4': [20, 10, 10, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-between': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 40, 0],

</span><span class="cx">                         'child2': [20, 10, 0, 0],

</span><span class="cx">                         'child3': [40, 10, 40, 10],

</span><span class="lines">@@ -2545,7 +1927,7 @@

</span><span class="cx">                         'child4': [20, 10, 0, 10],

</span><span class="cx">                     },

</span><span class="cx">                     'space-around': {

</span><del>-                        'flexbox': [80, 40],

</del><ins>+                        'flexbox': [80, 10],

</ins><span class="cx">                         'child1': [40, 10, 35, 0],

</span><span class="cx">                         'child2': [20, 10, 5, 0],

</span><span class="cx">                         'child3': [40, 10, 35, 10],

</span><span class="lines">@@ -2579,7 +1961,7 @@

</span><span class="cx">     flexbox.appendChild(child);

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];

</ins><span class="cx"> var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> var wraps = ['wrap', 'wrap-reverse'];

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilineminmaxexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/multiline-min-max-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-min-max-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/multiline-min-max-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,16 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilineminmaxhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/multiline-min-max.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-min-max.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/multiline-min-max.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,148 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;link rel=&quot;stylesheet&quot; href=&quot;resources/flexbox.css&quot;&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+.flexbox {

+  width: 600px;

+  background-color: grey;

+  border: 5px solid black;

+  height: 20px;

+  position: relative;

+}

+.flexbox &gt; div {

+  height: 10px;

+}

+.children-border-box &gt; div {

+  box-sizing: border-box;

+}

+

+.flexbox :nth-child(1) {

+    background-color: blue;

+}

+.flexbox :nth-child(2) {

+    background-color: yellow;

+}

+.flexbox :nth-child(3) {

+    background-color: salmon;

+}

+.flexbox :nth-child(4) {

+    background-color: lime;

+}

+.flexbox :nth-child(5) {

+    background-color: red;

+}

+.flexbox :nth-child(6) {

+    background-color: orange;

+}

+.flexbox :nth-child(7) {

+    background-color: purple;

+}

+&lt;/style&gt;

+&lt;/head&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;min-width: 400px&quot; data-expected-width=&quot;400&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;min-width: 400px; padding-left: 10px;&quot; data-expected-width=&quot;500&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;min-width: 400px; border-left: 10px solid red;&quot; data-expected-width=&quot;500&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;min-width: 400px; margin-left: 10px;&quot; data-expected-width=&quot;490&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div style=&quot;flex: 1 1 600px; flex: 1 1 600px; max-width: 300px;&quot; data-expected-width=&quot;300&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;300&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div style=&quot;flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;&quot; data-expected-width=&quot;310&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;310&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;455&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;600&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div style=&quot;flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;&quot; data-expected-width=&quot;310&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;310&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;455&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;600&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap&quot;&gt;

+  &lt;div style=&quot;flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;&quot; data-expected-width=&quot;300&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;310&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;455&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;600&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap children-border-box&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;min-width: 400px; padding-left: 10px;&quot; data-expected-width=&quot;400&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap children-border-box&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;min-width: 400px; border-left: 10px solid red;&quot; data-expected-width=&quot;400&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap children-border-box&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;min-width: 400px; margin-left: 10px;&quot; data-expected-width=&quot;490&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-none&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap children-border-box&quot;&gt;

+  &lt;div style=&quot;flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;&quot; data-expected-width=&quot;300&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;300&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap children-border-box&quot;&gt;

+  &lt;div style=&quot;flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;&quot; data-expected-width=&quot;300&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;300&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;400&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;100&quot; data-offset-x=&quot;500&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox wrap children-border-box&quot;&gt;

+  &lt;div style=&quot;flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;&quot; data-expected-width=&quot;300&quot; data-offset-x=&quot;10&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;310&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;145&quot; data-offset-x=&quot;455&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;600&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;10&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilineminpreferredwidthexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>-PASS

</del><ins>+

+PASS .container 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilineminpreferredwidthhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-min-preferred-width.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,9 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><span class="cx"> &lt;link rel=&quot;stylesheet&quot; href=&quot;resources/flexbox.css&quot;&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;style&gt;

</span><span class="cx"> .item {

</span><span class="cx">     padding: 7px;

</span><span class="lines">@@ -19,6 +21,7 @@

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body onload=&quot;checkLayout('.container')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container flexbox wrap&quot; data-expected-height=42&gt;

</span><span class="cx">   &lt;div class=&quot;item flexbox wrap&quot; data-expected-width=42 data-expected-height=42&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinereversewrapbaselinehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,11 +3,11 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 200px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><del>-    -webkit-flex-wrap: wrap-reverse;

-    -webkit-align-items: baseline;

</del><ins>+    flex-wrap: wrap-reverse;

+    align-items: baseline;

</ins><span class="cx">     margin-bottom: 10px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="lines">@@ -32,23 +32,23 @@

</span><span class="cx"> with baseline alignment are aligned to cross axis start.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;first&lt;br&gt;first&lt;br&gt;first&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;second&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px; margin-top: 5px&quot;&gt;third&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;fourth&lt;br&gt;fourth&lt;/div&gt;

</del><ins>+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;first&lt;br&gt;first&lt;br&gt;first&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;second&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px; margin-top: 5px&quot;&gt;third&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;fourth&lt;br&gt;fourth&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;first&lt;br&gt;first&lt;br&gt;first&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;second&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;third&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px; margin-bottom: 5px&quot;&gt;fourth&lt;br&gt;fourth&lt;/div&gt;

</del><ins>+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;first&lt;br&gt;first&lt;br&gt;first&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;second&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;third&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px; margin-bottom: 5px&quot;&gt;fourth&lt;br&gt;fourth&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;width: 300px;&quot;&gt;

</span><del>-  &lt;div style=&quot;-webkit-flex: 1 0 100px; -webkit-align-self: flex-start; height: 100px&quot;&gt;first&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;second&lt;/div&gt;

-  &lt;div style=&quot;-webkit-flex: 1 0 100px;&quot;&gt;third&lt;br&gt;third&lt;/div&gt;

</del><ins>+  &lt;div style=&quot;flex: 1 0 100px; align-self: flex-start; height: 100px&quot;&gt;first&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;second&lt;/div&gt;

+  &lt;div style=&quot;flex: 1 0 100px;&quot;&gt;third&lt;br&gt;third&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinereversewrapoverflowexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,8 +1,10 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

</ins><span class="cx"> Test to make sure that wrap-reverse starts at the cross start edge if sizing is not auto.

</span><span class="cx"> 

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinereversewrapoverflowhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,12 +2,12 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><del>-    -webkit-flex-wrap: wrap-reverse;

</del><ins>+    flex-wrap: wrap-reverse;

</ins><span class="cx">     margin-top: 20px;

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="cx">     border: 0;

</span><span class="lines">@@ -26,52 +26,55 @@

</span><span class="cx">     background-color: yellow;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;Test to make sure that wrap-reverse starts at the cross start edge if

</span><span class="cx"> sizing is not auto.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div data-expected-width=&quot;200&quot; data-expected-height=&quot;35&quot; class=&quot;flexbox&quot; style=&quot;width: 200px; height: 35px;&quot;&gt;

</span><del>-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;15&quot; style=&quot;-webkit-flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;5&quot; style=&quot;-webkit-flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;-5&quot; style=&quot;-webkit-flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;15&quot; style=&quot;flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;5&quot; style=&quot;flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;-5&quot; style=&quot;flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div data-expected-width=&quot;200&quot; data-expected-height=&quot;35&quot; class=&quot;flexbox&quot; style=&quot;width: 200px; max-height: 35px;&quot;&gt;

</span><del>-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;15&quot; style=&quot;-webkit-flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;25&quot; style=&quot;-webkit-flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;5&quot; style=&quot;-webkit-flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;-5&quot; style=&quot;-webkit-flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;15&quot; style=&quot;flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;25&quot; style=&quot;flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;5&quot; style=&quot;flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;-5&quot; style=&quot;flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div data-expected-width=&quot;200&quot; data-expected-height=&quot;50&quot; class=&quot;flexbox&quot; style=&quot;width: 200px; min-height: 50px;&quot;&gt;

</span><del>-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;30&quot; style=&quot;-webkit-flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;40&quot; style=&quot;-webkit-flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; style=&quot;-webkit-flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot; style=&quot;-webkit-flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;30&quot; style=&quot;flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;40&quot; style=&quot;flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot; style=&quot;flex: 1 100px; height: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;100&quot; data-offset-y=&quot;10&quot; style=&quot;flex: 1 100px; height: 20px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;35&quot; data-expected-height=&quot;200&quot; class=&quot;flexbox&quot; style=&quot;-webkit-flex-direction: column; height: 200px; width: 35px&quot;&gt;

-  &lt;div data-offset-x=&quot;15&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;5&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div data-expected-width=&quot;35&quot; data-expected-height=&quot;200&quot; class=&quot;flexbox&quot; style=&quot;flex-direction: column; height: 200px; width: 35px&quot;&gt;

+  &lt;div data-offset-x=&quot;15&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;5&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;35&quot; data-expected-height=&quot;200&quot; class=&quot;flexbox&quot; style=&quot;-webkit-flex-direction: column; height: 200px; max-width: 35px&quot;&gt;

-  &lt;div data-offset-x=&quot;15&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;5&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div data-expected-width=&quot;35&quot; data-expected-height=&quot;200&quot; class=&quot;flexbox&quot; style=&quot;flex-direction: column; height: 200px; max-width: 35px&quot;&gt;

+  &lt;div data-offset-x=&quot;15&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;25&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;5&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div data-expected-width=&quot;600&quot; data-expected-height=&quot;200&quot; class=&quot;flexbox&quot; style=&quot;-webkit-flex-direction: column; height: 200px; min-width: 50px; max-width: 600px&quot;&gt;

-  &lt;div data-offset-x=&quot;580&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;590&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;570&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

-  &lt;div data-offset-x=&quot;560&quot; data-offset-y=&quot;100&quot; style=&quot;-webkit-flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div data-expected-width=&quot;600&quot; data-expected-height=&quot;200&quot; class=&quot;flexbox&quot; style=&quot;flex-direction: column; height: 200px; min-width: 50px; max-width: 600px&quot;&gt;

+  &lt;div data-offset-x=&quot;580&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;590&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;570&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 100px; width: 10px&quot;&gt;&lt;/div&gt;

+  &lt;div data-offset-x=&quot;560&quot; data-offset-y=&quot;100&quot; style=&quot;flex: 1 100px; width: 20px&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilineshrinktofitexpectedhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit-expected.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit-expected.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -33,15 +33,15 @@

</span><span class="cx"> &lt;body&gt;

</span><span class="cx"> &lt;p&gt;Test to make sure that multiline column flexboxes shrink-to-fit properly.&lt;/p&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 60px; width: 400px&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 60px; width: 100px&quot;&gt;

</ins><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 10px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 10px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 400px wide.&lt;/p&gt;

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide.&lt;/p&gt;

</ins><span class="cx"> 

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 30px; width: 400px&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 30px; width: 100px&quot;&gt;

</ins><span class="cx">   &lt;table&gt;

</span><span class="cx">     &lt;td&gt;

</span><span class="cx">       &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -53,10 +53,10 @@

</span><span class="cx">     &lt;/td&gt;

</span><span class="cx">   &lt;/table&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 400px wide.&lt;/p&gt;

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide.&lt;/p&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;width: 150px&quot;&gt;

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 60px; width: 150px&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 60px; width: 100px&quot;&gt;

</ins><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 10px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 10px&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -63,10 +63,10 @@

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 150px wide.&lt;/p&gt;

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide.&lt;/p&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;width: 150px&quot;&gt;

</span><del>-&lt;div class=&quot;testcase&quot; style=&quot;height: 35px; width: 150px;&quot;&gt;

</del><ins>+&lt;div class=&quot;testcase&quot; style=&quot;height: 35px; width: 100px;&quot;&gt;

</ins><span class="cx">   &lt;table&gt;

</span><span class="cx">     &lt;td&gt;

</span><span class="cx">       &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -79,7 +79,7 @@

</span><span class="cx">   &lt;/table&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 150px wide and 5px should

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide and 5px should

</ins><span class="cx"> stick out the bottom.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilineshrinktofithtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,16 +2,16 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><del>-    -webkit-flex-wrap: wrap;

-    -webkit-flex-direction: column;

</del><ins>+    flex-wrap: wrap;

+    flex-direction: column;

</ins><span class="cx">     float: left;

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox :nth-child(1) {

</span><span class="cx">     background-color: lightblue;

</span><span class="lines">@@ -35,7 +35,7 @@

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 10px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 400px wide.&lt;/p&gt;

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide.&lt;/p&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 30px&quot;&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -43,7 +43,7 @@

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 10px&quot;&gt;&lt;/div&gt;

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 400px wide.&lt;/p&gt;

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide.&lt;/p&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;width: 150px&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -53,7 +53,7 @@

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 150px wide.&lt;/p&gt;

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide.&lt;/p&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;width: 150px&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 35px&quot;&gt;

</span><span class="lines">@@ -63,7 +63,7 @@

</span><span class="cx">   &lt;div style=&quot;width: 100px; height: 20px&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><del>-&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 150px wide and 5px should

</del><ins>+&lt;p style=&quot;clear:left&quot;&gt;The grey background should be 100px wide and 5px should

</ins><span class="cx"> stick out the bottom.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxmultilinehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/multiline.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/multiline.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/multiline.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,13 +3,13 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><span class="cx">     position: relative;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     max-width: 600px;

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .title {

</span><span class="cx">     margin-top: 1em;

</span><span class="lines">@@ -21,34 +21,31 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .wrap {

</span><del>-    -webkit-flex-wrap: wrap;

</del><ins>+    flex-wrap: wrap;

</ins><span class="cx"> }

</span><span class="cx"> .wrap-reverse {

</span><del>-    -webkit-flex-wrap: wrap-reverse;

</del><ins>+    flex-wrap: wrap-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: #0f0;

</span><span class="lines">@@ -66,8 +63,11 @@

</span><span class="cx">     background-color: #030;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> var expectations = {

</span><span class="lines">@@ -225,160 +225,6 @@

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="cx">     },

</span><del>-    'horizontal-bt': {

-        'row': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 0, 40],

-                    'child2': [30, 10, 30, 35],

-                    'child3': [60, 5, 0, 30],

-                    'child4': [70, 20, 0, 10],

-                    'child5': [60, 10, 0, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 0, 0],

-                    'child2': [30, 10, 30, 0],

-                    'child3': [60, 5, 0, 10],

-                    'child4': [70, 20, 0, 15],

-                    'child5': [60, 10, 0, 35],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 30, 40],

-                    'child2': [30, 10, 0, 35],

-                    'child3': [60, 5, 0, 30],

-                    'child4': [70, 20, -10, 10],

-                    'child5': [60, 10, 0, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 30, 0],

-                    'child2': [30, 10, 0, 0],

-                    'child3': [60, 5, 0, 10],

-                    'child4': [70, 20, -10, 15],

-                    'child5': [60, 10, 0, 35],

-                },

-            },

-        },

-        'column': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 0, 30],

-                    'child2': [10, 30, 0, 0],

-                    'child3': [5, 60, 10, 0],

-                    'child4': [20, 70, 15, -10],

-                    'child5': [10, 60, 35, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 595, 30],

-                    'child2': [10, 30, 590, 0],

-                    'child3': [5, 60, 585, 0],

-                    'child4': [20, 70, 565, -10],

-                    'child5': [10, 60, 555, 0],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 595, 30],

-                    'child2': [10, 30, 590, 0],

-                    'child3': [5, 60, 585, 0],

-                    'child4': [20, 70, 565, -10],

-                    'child5': [10, 60, 555, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 0, 30],

-                    'child2': [10, 30, 0, 0],

-                    'child3': [5, 60, 10, 0],

-                    'child4': [20, 70, 15, -10],

-                    'child5': [10, 60, 35, 0],

-                },

-            },

-        },

-        'row-reverse': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 30, 40],

-                    'child2': [30, 10, 0, 35],

-                    'child3': [60, 5, 0, 30],

-                    'child4': [70, 20, -10, 10],

-                    'child5': [60, 10, 0, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 30, 0],

-                    'child2': [30, 10, 0, 0],

-                    'child3': [60, 5, 0, 10],

-                    'child4': [70, 20, -10, 15],

-                    'child5': [60, 10, 0, 35],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 0, 40],

-                    'child2': [30, 10, 30, 35],

-                    'child3': [60, 5, 0, 30],

-                    'child4': [70, 20, 0, 10],

-                    'child5': [60, 10, 0, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [60, 45],

-                    'child1': [30, 5, 0, 0],

-                    'child2': [30, 10, 30, 0],

-                    'child3': [60, 5, 0, 10],

-                    'child4': [70, 20, 0, 15],

-                    'child5': [60, 10, 0, 35],

-                },

-            },

-        },

-        'column-reverse': {

-            'ltr': {

-                'wrap': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 0, 0],

-                    'child2': [10, 30, 0, 30],

-                    'child3': [5, 60, 10, 0],

-                    'child4': [20, 70, 15, 0],

-                    'child5': [10, 60, 35, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 595, 0],

-                    'child2': [10, 30, 590, 30],

-                    'child3': [5, 60, 585, 0],

-                    'child4': [20, 70, 565, 0],

-                    'child5': [10, 60, 555, 0],

-                },

-            },

-            'rtl': {

-                'wrap': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 595, 0],

-                    'child2': [10, 30, 590, 30],

-                    'child3': [5, 60, 585, 0],

-                    'child4': [20, 70, 565, 0],

-                    'child5': [10, 60, 555, 0],

-                },

-                'wrap-reverse': {

-                    'flexbox': [600, 60],

-                    'child1': [5, 30, 0, 0],

-                    'child2': [10, 30, 0, 30],

-                    'child3': [5, 60, 10, 0],

-                    'child4': [20, 70, 15, 0],

-                    'child5': [10, 60, 35, 0],

-                },

-            },

-        },

-    },

</del><span class="cx">     'vertical-rl': {

</span><span class="cx">         'row': {

</span><span class="cx">             'ltr': {

</span><span class="lines">@@ -421,7 +267,7 @@

</span><span class="cx">         'column': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 30, 0],

</span><span class="cx">                     'child2': [30, 10, 0, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -429,25 +275,25 @@

</span><span class="cx">                     'child5': [60, 10, 0, 35],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 30, 45],

-                    'child2': [30, 10, 0, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, -10, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 30, 15],

+                    'child2': [30, 10, 0, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, -10, -15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 30, 45],

-                    'child2': [30, 10, 0, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, -10, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 30, 15],

+                    'child2': [30, 10, 0, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, -10, -15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 30, 0],

</span><span class="cx">                     'child2': [30, 10, 0, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -497,7 +343,7 @@

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 0, 0],

</span><span class="cx">                     'child2': [30, 10, 30, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -505,25 +351,25 @@

</span><span class="cx">                     'child5': [60, 10, 0, 35],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 0, 45],

-                    'child2': [30, 10, 30, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, 0, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 0, 15],

+                    'child2': [30, 10, 30, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, 0, -15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 0, 45],

-                    'child2': [30, 10, 30, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, 0, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 0, 15],

+                    'child2': [30, 10, 30, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, 0,-15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 0, 0],

</span><span class="cx">                     'child2': [30, 10, 30, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -575,7 +421,7 @@

</span><span class="cx">         'column': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 0, 0],

</span><span class="cx">                     'child2': [30, 10, 30, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -583,25 +429,25 @@

</span><span class="cx">                     'child5': [60, 10, 0, 35],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 0, 45],

-                    'child2': [30, 10, 30, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, 0, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 0, 15],

+                    'child2': [30, 10, 30, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, 0, -15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 0, 45],

-                    'child2': [30, 10, 30, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, 0, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 0, 15],

+                    'child2': [30, 10, 30, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, 0, -15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 0, 0],

</span><span class="cx">                     'child2': [30, 10, 30, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -651,7 +497,7 @@

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 30, 0],

</span><span class="cx">                     'child2': [30, 10, 0, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -659,25 +505,25 @@

</span><span class="cx">                     'child5': [60, 10, 0, 35],

</span><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 30, 45],

-                    'child2': [30, 10, 0, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, -10, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 30, 15],

+                    'child2': [30, 10, 0, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, -10, -15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'wrap': {

</span><del>-                    'flexbox': [60, 50],

-                    'child1': [30, 5, 30, 45],

-                    'child2': [30, 10, 0, 40],

-                    'child3': [60, 5, 0, 35],

-                    'child4': [70, 20, -10, 15],

-                    'child5': [60, 10, 0, 5],

</del><ins>+                    'flexbox': [60, 20],

+                    'child1': [30, 5, 30, 15],

+                    'child2': [30, 10, 0, 10],

+                    'child3': [60, 5, 0, 5],

+                    'child4': [70, 20, -10, -15],

+                    'child5': [60, 10, 0, -25],

</ins><span class="cx">                 },

</span><span class="cx">                 'wrap-reverse': {

</span><del>-                    'flexbox': [60, 50],

</del><ins>+                    'flexbox': [60, 20],

</ins><span class="cx">                     'child1': [30, 5, 30, 0],

</span><span class="cx">                     'child2': [30, 10, 0, 0],

</span><span class="cx">                     'child3': [60, 5, 0, 10],

</span><span class="lines">@@ -700,7 +546,7 @@

</span><span class="cx"> function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations)

</span><span class="cx"> {

</span><span class="cx">     var child = document.createElement('div');

</span><del>-    child.setAttribute('style', '-webkit-flex: 1 0 ' + preferredSize + 'px;'

</del><ins>+    child.setAttribute('style', 'flex: 1 0 ' + preferredSize + 'px;'

</ins><span class="cx">         + crossAxis + ': ' + crossAxisLength + 'px;');

</span><span class="cx"> 

</span><span class="cx">     child.setAttribute(&quot;data-expected-width&quot;, expectations[0]);

</span><span class="lines">@@ -711,7 +557,7 @@

</span><span class="cx">     flexbox.appendChild(child);

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];

</ins><span class="cx"> var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> var wraps = ['wrap', 'wrap-reverse'];

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnegativeflexroundingasserthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/negative-flex-rounding-assert.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/negative-flex-rounding-assert.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/negative-flex-rounding-assert.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,14 +2,14 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .math {

</span><del>-    display: -webkit-inline-flex;

</del><ins>+    display: inline-flex;

</ins><span class="cx"> }

</span><span class="cx"> .math &gt; * {

</span><span class="cx">     padding-bottom: 0.35em;

</span><span class="cx"> }

</span><span class="cx"> .mfrac {

</span><del>-    display: -webkit-inline-flex;

-    -webkit-flex-direction: column;

</del><ins>+    display: inline-flex;

+    flex-direction: column;

</ins><span class="cx"> }

</span><span class="cx"> .mfrac &gt; :first-child {

</span><span class="cx">     -webkit-margin-after: 0.2em;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnegativemarginsasserthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/negative-margins-assert.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/negative-margins-assert.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/negative-margins-assert.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,6 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;script&gt;

</span><del>-if (window.testRunner)

-    window.testRunner.dumpAsText();

</del><ins>+testRunner.dumpAsText();

</ins><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> div {

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnegativeoverflowexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/negative-overflow-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/negative-overflow-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/negative-overflow-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,9 +1,11 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnegativeoverflowhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/negative-overflow.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/negative-overflow.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/negative-overflow.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -23,7 +23,9 @@

</span><span class="cx">     background-color: green;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;script&gt;

</span><span class="cx"> window.onload = function() {

</span><span class="cx">     checkLayout('.flexbox');

</span><span class="lines">@@ -36,6 +38,7 @@

</span><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox align-items-flex-end&quot; data-expected-scroll-height=&quot;50&quot;&gt;

</span><span class="cx">     &lt;div&gt;&lt;/div&gt;

</span><span class="lines">@@ -63,11 +66,11 @@

</span><span class="cx">     &lt;div&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox align-items-center vertical-padding&quot; data-expected-scroll-height=&quot;80&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox align-items-center vertical-padding&quot; data-expected-scroll-height=&quot;90&quot;&gt;

</ins><span class="cx">     &lt;div&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox vertical-padding&quot; data-expected-scroll-height=&quot;105&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox vertical-padding&quot; data-expected-scroll-height=&quot;115&quot;&gt;

</ins><span class="cx">     &lt;div&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnestedflexboxminsizeautoexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+Green rectangle should be entirely within the black rectangle

+

+

+PASS #container 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnestedflexboxminsizeautohtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/nested-flexbox-min-size-auto.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,41 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+#container {

+  height: 300px;

+  outline: 2px solid black;

+}

+

+.inner

+{

+  width: 400px;

+  flex: 1;

+  background-color: green;

+}

+&lt;/style&gt;

+&lt;script&gt;

+function change() {

+  var container = document.getElementById('container');

+  container.offsetHeight;

+  container.style.height = '80px';

+  checkLayout('#container');

+}

+&lt;/script&gt;

+&lt;body onload=&quot;change()&quot;&gt;

+&lt;p&gt;Green rectangle should be entirely within the black rectangle&lt;/p&gt;

+&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;

+&lt;div id=&quot;container&quot;&gt;

+  &lt;div class=&quot;flexbox column&quot; style=&quot;height: 100%;&quot;&gt;

+    &lt;div class=&quot;flexbox flex-one&quot;&gt;

+        &lt;div class=&quot;flexbox column&quot;&gt;

+          &lt;div class=&quot;flexbox column flex-one&quot;&gt;

+            &lt;div class=&quot;inner&quot; data-expected-height=&quot;80&quot;&gt;

+            &lt;/div&gt;

+          &lt;/div&gt;

+        &lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnestedorthogonalflexboxrelayoutexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,25 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+#column {

+    display: flex;

+    flex-direction: column;

+    border: 5px solid yellow;

+    width: 200px;

+}

+

+#row {

+    display: flex;

+    flex-direction: row;

+    border: 5px solid blue;

+}

+

+.item {

+    border: 5px solid green;

+}

+&lt;/style&gt;

+&lt;body&gt;

+&lt;div id=&quot;column&quot;&gt;

+    &lt;div id=&quot;row&quot;&gt;

+        &lt;div class=&quot;item&quot;&gt;This text should not overflow its box&lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnestedorthogonalflexboxrelayouthtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/nested-orthogonal-flexbox-relayout.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,29 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+#column {

+    display: flex;

+    flex-direction: column;

+    border: 5px solid yellow;

+}

+

+#row {

+    display: flex;

+    flex-direction: row;

+    border: 5px solid blue;

+}

+

+.item {

+    border: 5px solid green;

+}

+&lt;/style&gt;

+&lt;body&gt;

+&lt;div id=&quot;column&quot;&gt;

+    &lt;div id=&quot;row&quot;&gt;

+        &lt;div class=&quot;item&quot;&gt;This text should not overflow its box&lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

+&lt;script&gt;

+var columnBox = document.getElementById(&quot;column&quot;);

+columnBox.offsetHeight;

+columnBox.style.width = &quot;200px&quot;;

+&lt;/script&gt;

</ins><span class="cx">\ No newline at end of file

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnestedstretchexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/nested-stretch-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/nested-stretch-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/nested-stretch-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,4 +1,6 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

</ins><span class="cx"> There should be two boxes of equal height on the left and 3 boxes of equal height on the right.

</span><del>-PASS

</del><span class="cx"> None of the boxes should overflow and the inner most boxes should be end aligned.

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxnestedstretchhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/nested-stretch.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/nested-stretch.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/nested-stretch.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -10,25 +10,28 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox {

</span><del>-  display: -webkit-flex; 

</del><ins>+  display: flex;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .row {

</span><del>-  -webkit-flex-direction: row;

</del><ins>+  flex-direction: row;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .column {

</span><del>-  display: -webkit-flex; 

-  -webkit-flex-direction: column;

</del><ins>+  display: flex;

+  flex-direction: column;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flex {

</span><del>-  -webkit-flex: 1 0 auto;

</del><ins>+  flex: 1 0 auto;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> There should be two boxes of equal height on the left and 3 boxes of equal

<span class="cx"> height on the right.

</span><span class="cx"> &lt;div class=&quot;flexbox row&quot; style=&quot;width: 600px&quot;&gt;

</span><span class="lines">@@ -45,11 +48,11 @@

</span><span class="cx"> 

<span class="cx"> None of the boxes should overflow and the inner most boxes should be end aligned.

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; style=&quot;width: 600px; height: 300px; position: relative;&quot;&gt;

</span><del>-  &lt;div data-expected-width=590 data-expected-height=250 class=&quot;column flex&quot; style=&quot;-webkit-justify-content: flex-end&quot;&gt;

-    &lt;div data-offset-y=&quot;180&quot; data-expected-width=570 data-expected-height=30 style=&quot;height: 20px; -webkit-flex: none;&quot;&gt;&lt;/div&gt;

-    &lt;div data-offset-y=&quot;220&quot; data-expected-width=570 data-expected-height=30 style=&quot;height: 20px; -webkit-flex: none;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=590 data-expected-height=250 class=&quot;column flex&quot; style=&quot;justify-content: flex-end&quot;&gt;

+    &lt;div data-offset-y=&quot;180&quot; data-expected-width=570 data-expected-height=30 style=&quot;height: 20px; flex: none;&quot;&gt;&lt;/div&gt;

+    &lt;div data-offset-y=&quot;220&quot; data-expected-width=570 data-expected-height=30 style=&quot;height: 20px; flex: none;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">   &lt;/div&gt;

</span><del>-  &lt;div data-expected-width=590 data-expected-height=30 style=&quot;height: 20px; -webkit-flex: none;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=590 data-expected-height=30 style=&quot;height: 20px; flex: none;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxorderpaintinghtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/order-painting.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/order-painting.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/order-painting.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3,9 +3,9 @@

</span><span class="cx"> &lt;body&gt;

</span><span class="cx"> &lt;p&gt;This test passes if there is no red showing.&lt;/p&gt;

</span><span class="cx"> 

</span><del>-&lt;div style=&quot;display: -webkit-flex; width: 100px;&quot;&gt;

-    &lt;div style=&quot;-webkit-order: 2; background-color: green; width: 100px; height: 100px; margin-left: -50px;&quot;&gt;&lt;/div&gt;

-    &lt;div style=&quot;-webkit-order: 1; background-color: red;   width: 50px;  height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div style=&quot;display: flex; width: 100px;&quot;&gt;

+    &lt;div style=&quot;order: 2; background-color: green; width: 100px; height: 100px; margin-left: -50px;&quot;&gt;&lt;/div&gt;

+    &lt;div style=&quot;order: 1; background-color: red;   width: 50px;  height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxorthogonalflexdirectionsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,9 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxorthogonalflexdirectionshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,12 +6,12 @@

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 600px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="cx">     background-color: blue;

</span><span class="lines">@@ -35,7 +35,7 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .nested {

</span><del>-    display: -webkit-flex;  

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #ddd;

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="lines">@@ -42,89 +42,89 @@

</span><span class="cx"> .rtl {

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><del>-.bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .align-start {

</span><del>-    -webkit-align-self: flex-start;

</del><ins>+    align-self: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;column nested&quot;&gt;

</span><del>-        &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

-        &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

+        &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;column nested align-start&quot;&gt;

</span><del>-        &lt;div data-expected-height=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

-        &lt;div data-expected-height=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div data-expected-height=&quot;0&quot; style=&quot;flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

+        &lt;div data-expected-height=&quot;0&quot; style=&quot;flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;column nested align-start&quot; style=&quot;height: 50px&quot;&gt;

</span><del>-        &lt;div data-expected-height=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

-        &lt;div data-expected-height=&quot;25&quot; style=&quot;-webkit-flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div data-expected-height=&quot;25&quot; style=&quot;flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

+        &lt;div data-expected-height=&quot;25&quot; style=&quot;flex: 1 0 0; width: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;column nested&quot; style=&quot;height: 50px&quot;&gt;

</span><del>-        &lt;div class=&quot;nested&quot; style=&quot;-webkit-flex: 1; width: 100px;&quot;&gt;

-            &lt;div data-expected-height=&quot;25&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

-            &lt;div data-expected-height=&quot;25&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div class=&quot;nested&quot; style=&quot;flex: 1; width: 100px;&quot;&gt;

+            &lt;div data-expected-height=&quot;25&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

+            &lt;div data-expected-height=&quot;25&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">         &lt;/div&gt;

</span><del>-        &lt;div style=&quot;-webkit-flex: 1;&quot;&gt;&lt;/div&gt;

</del><ins>+        &lt;div style=&quot;flex: 1;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-width=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-width=&quot;500&quot; style=&quot;flex: 1 0 0; height:100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; style=&quot;height: 100px&quot;&gt;

</span><del>-    &lt;div class=&quot;row-reverse nested&quot; style=&quot;-webkit-flex: 1; width: 100px;&quot;&gt;

-        &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

-        &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;row-reverse nested&quot; style=&quot;flex: 1; width: 100px;&quot;&gt;

+        &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

+        &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column-reverse&quot; style=&quot;height: 100px&quot;&gt;

</span><del>-    &lt;div class=&quot;row-reverse nested&quot; style=&quot;-webkit-flex: 1; width: 100px;&quot;&gt;

-        &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

-        &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;row-reverse nested&quot; style=&quot;flex: 1; width: 100px;&quot;&gt;

+        &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

+        &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot; style=&quot;height: 100px&quot;&gt;

</span><del>-    &lt;div class=&quot;column nested&quot; style=&quot;-webkit-flex: 1; width: 100px;&quot;&gt;

-        &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

-        &lt;div data-expected-width=&quot;50&quot; style=&quot;-webkit-flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div class=&quot;column nested&quot; style=&quot;flex: 1; width: 100px;&quot;&gt;

+        &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

+        &lt;div data-expected-width=&quot;50&quot; style=&quot;flex: 1 0 auto;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><del>-    &lt;div data-expected-height=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-height=&quot;50&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxorthogonalwritingmodesandintrinsicsizingexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,10 @@

</span><ins>+

+FAIL .flexbox 1 assert_equals: 

+&lt;div class=&quot;flexbox column&quot; data-expected-height=&quot;20&quot;&gt;

+    &lt;div class=&quot;vertical&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;

+        &lt;div style=&quot;width: 50px; height: 20px; background-color: blue;&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

+width expected 50 but got 784

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxorthogonalwritingmodesandintrinsicsizinghtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,33 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;style&gt;

+.flexbox {

+    background-color: gray;

+}

+

+.vertical {

+    writing-mode: vertical-lr;

+    width: min-content;

+    background-color: blue;

+}

+&lt;/style&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; data-expected-height=&quot;20&quot;&gt;

+    &lt;div class=&quot;vertical&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;

+        &lt;div style=&quot;width: 50px; height: 20px; background-color: blue;&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

+

+

+&lt;div class=&quot;flexbox column&quot; data-expected-height=&quot;20&quot;&gt;

+    &lt;div class=&quot;vertical&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;

+        &lt;div style=&quot;width: 50px; height: 20px; background-color: blue;&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot;&gt;&lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowandpaddingexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-and-padding-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,4 @@

</span><ins>+

+PASS #scrollable 1 

+Tests that padding bottom on a flexbox works in the face of overflowing content. Padding-right does not work. This matches the Blink/WebKit display:block behavior. Unfortunately, IE and Gecko both lose the padding bottom and the padding right.

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowandpaddinghtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-and-padding.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-and-padding.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-and-padding.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,31 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+#scrollable {

+    overflow: scroll;

+    background: pink;

+    height: 300px;

+    width: 300px;

+    box-sizing: border-box;

+    display: flex;

+    padding: 100px;

+}

+#item {

+    width: 300px;

+    height: 300px;

+    background: salmon;

+    flex-shrink: 0;

+}

+&lt;/style&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+Tests that padding bottom on a flexbox works in the face of overflowing content.

+Padding-right does not work. This matches the Blink/WebKit display:block behavior.

+Unfortunately, IE and Gecko both lose the padding bottom and the padding right.

+&lt;div id=&quot;scrollable&quot; data-expected-scroll-height=500 data-expected-scroll-width=400&gt;

+    &lt;div id=&quot;item&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;script&gt;

+checkLayout('#scrollable');

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowautodynamicchangesabsposexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,13 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;p&gt;This test should not have a horizontal scrollbar&lt;/p&gt;

+

+&lt;div style=&quot;width: 400px; height: 100px; overflow-x: hidden; overflow-y: scroll;&quot;&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowautodynamicchangesabsposhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-abspos.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,60 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+  body {

+    width: 400px;

+    height: 300px;

+  }

+

+  .flexbox {

+    display: flex;

+  }

+

+  .column {

+    flex-direction: column;

+  }

+

+  .flex11a {

+    flex: 1 1 auto;

+  }

+

+  .root {

+    height: 100px;

+    overflow-y: auto;

+    position: relative;

+  }

+  

+  #abspos {

+    position: absolute;

+    left: 0;

+    right: 0;

+    top: 0;

+    height: 10px;

+  }

+&lt;/style&gt;

+

+

+&lt;p&gt;This test should not have a horizontal scrollbar&lt;/p&gt;

+

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;flexbox&quot;&gt;

+    &lt;div class=&quot;flex11a&quot;&gt;

+      &lt;div class=&quot;root&quot;&gt;

+        &lt;div&gt;

+          &lt;div&gt;

+            &lt;div id=&quot;history&quot;&gt;&lt;/div&gt;

+            &lt;div id=&quot;abspos&quot;&gt;&lt;/div&gt;

+          &lt;/div&gt;

+        &lt;/div&gt;

+      &lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+onload = function() {

+  var historyEl = document.getElementById('history');

+  historyEl.offsetWidth;

+  historyEl.innerText = '\n\n\n\n\n\n\n\n';

+};

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowautodynamicchangesexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,13 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;p&gt;This test should not have a horizontal scrollbar&lt;/p&gt;

+

+&lt;div style=&quot;width: 400px; height: 100px; overflow-x: hidden; overflow-y: scroll;&quot;&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;br&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowautodynamicchangeshtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-auto-dynamic-changes.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,47 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;style&gt;

+  body {

+    width: 400px;

+    height: 300px;

+  }

+

+  .flexbox {

+    display: flex;

+  }

+

+  .column {

+    flex-direction: column;

+  }

+

+  .flex11a {

+    flex: 1 1 auto;

+  }

+

+  .root {

+    height: 100px;

+    overflow-y: auto;

+  }

+&lt;/style&gt;

+

+

+&lt;p&gt;This test should not have a horizontal scrollbar&lt;/p&gt;

+

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;flexbox&quot;&gt;

+    &lt;div class=&quot;flex11a&quot;&gt;

+      &lt;div class=&quot;root&quot;&gt;

+        &lt;div id=&quot;history&quot;&gt;&lt;/div&gt;

+      &lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+onload = function() {

+  var historyEl = document.getElementById('history');

+  historyEl.offsetWidth;

+  historyEl.innerText = '\n\n\n\n\n\n\n\n';

+};

+&lt;/script&gt;

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowautoresizescorrectlyexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,8 @@

</span><ins>+ 

+

+FAIL hbox dimensions assert_equals: expected 104 but got 89

+FAIL intrinsicHeightBox dimensions assert_equals: expected 104 but got 89

+PASS scrollbarSize should not be zero 

+FAIL inner dimensions assert_equals: expected 100 but got 85

+FAIL vbox dimensions assert_equals: expected 100 but got 85

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowautoresizescorrectlyhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/overflow-auto-resizes-correctly.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,98 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;title&gt;When a block inside a flexbox adds scrollbars due to overflow, the parent flexbox should re-flex based on the child size including scrollbars.&lt;/title&gt;

+&lt;style&gt;

+.vflex {

+  display: flex;

+  flex-direction: column;

+  max-width: 200px;

+  margin: 10px 0 10px 0;

+}

+.hflex {

+  display: flex;

+  flex-direction: row;

+  max-height: 200px;

+  margin: 10px 0 10px 0;

+}

+.hbox {

+  overflow-x: auto;

+  white-space: nowrap;

+}

+.vbox {

+  overflow-y: auto;

+  max-height: 200px;

+}

+.intrinsic-height-box {

+  min-height: -webkit-min-content;

+  overflow: auto;

+  flex-basis: 0;

+}

+.rect {

+  min-height: 100px;

+  min-width: 100px;

+  background-color: green;

+  display: inline-block;

+}

+&lt;/style&gt;

+

+&lt;div class=&quot;vflex&quot;&gt;

+  &lt;div class=&quot;hbox&quot;&gt;

+    &lt;div class=&quot;rect&quot;&gt;&lt;/div&gt;

+    &lt;div class=&quot;rect&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;vflex&quot;&gt;

+  &lt;div class=&quot;intrinsic-height-box&quot;&gt;

+    &lt;div class=&quot;rect&quot; style=&quot;min-width: 300px&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;hflex&quot;&gt;

+  &lt;div class=&quot;vbox&quot;&gt;

+    &lt;div class=&quot;rect&quot; style=&quot;min-height: 300px;&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div style=&quot;display: flex; width: 100px; height: 100px;&quot;&gt;

+  &lt;div id=&quot;inner&quot; style=&quot;flex: none; height: 100px; overflow: auto;&quot;&gt;

+    &lt;div style=&quot;width: 100px; height: 150px; background-color: green;&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;!-- This div is only for measuring scrollbar size --&gt;

+&lt;div id=&quot;measure&quot; style=&quot;height: 100px; width: 100px; display: inline-box; overflow: auto;&quot;&gt;

+  &lt;div style=&quot;min-height: 300px;&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+  var hbox = document.querySelector('.hbox');

+  test(function() {

+    assert_equals(hbox.parentNode.clientHeight, hbox.parentNode.scrollHeight);

+    assert_equals(hbox.clientHeight, hbox.scrollHeight);

+  }, 'hbox dimensions');

+

+  var intrinsicHeightBox = document.querySelector('.intrinsic-height-box');

+  test(function() {

+    assert_equals(intrinsicHeightBox.clientHeight, intrinsicHeightBox.scrollHeight);

+  }, 'intrinsicHeightBox dimensions');

+

+  var measure = document.getElementById('measure');

+  var scrollbarSize = measure.offsetWidth - measure.clientWidth;

+  test(function() {

+    assert_not_equals(scrollbarSize, 0);

+  }, 'scrollbarSize should not be zero');

+

+  var inner = document.getElementById('inner');

+  test(function() {

+    assert_equals(inner.clientWidth, 100);

+    assert_equals(inner.offsetWidth, 100 + scrollbarSize);

+  }, 'inner dimensions');

+

+  var vbox = document.querySelector('.vbox');

+  test(function() {

+    assert_equals(vbox.clientWidth, 100);

+    assert_equals(vbox.offsetWidth, 100 + scrollbarSize);

+  }, 'vbox dimensions');

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowkeepscrollposexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,3 @@

</span><del>-PASS document.querySelector('.overflow-auto').scrollTop is 50

</del><span class="cx"> 

</span><ins>+PASS Scroll position is correct 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxoverflowkeepscrollposhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/overflow-keep-scrollpos.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,16 +1,17 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><del>-&lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;style&gt;

</span><span class="cx"> div.flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx"> }

</span><span class="cx"> div.overflow-auto {

</span><span class="cx">     overflow: auto;

</span><span class="cx"> }

</span><span class="cx"> div.flex {

</span><del>-    -webkit-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> .container {

</span><span class="cx">     width: 100px;

</span><span class="lines">@@ -21,12 +22,13 @@

</span><span class="cx">     function runTest() {

</span><span class="cx">         document.querySelector('.overflow-auto').scrollTop = 50;

</span><span class="cx">         document.querySelector('#sidebar').innerHTML = '';

</span><del>-        shouldBe(&quot;document.querySelector('.overflow-auto').scrollTop&quot;, &quot;50&quot;);

</del><ins>+        assert_equals(document.querySelector('.overflow-auto').scrollTop, 50);

</ins><span class="cx">     }

</span><span class="cx"> &lt;/script&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;/head&gt;

</span><del>-&lt;body onload=&quot;runTest()&quot;&gt;

</del><ins>+&lt;body onload=&quot;test(runTest, 'Scroll position is correct')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;container flexbox&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flex overflow-auto flexbox&quot;&gt;

</span><span class="cx">         &lt;div style=&quot;height: 400px&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -34,6 +36,5 @@

</span><span class="cx">     &lt;div id=&quot;sidebar&quot;&gt;foo&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;div id=&quot;console&quot;&gt;&lt;/div&gt;

</span><del>-&lt;script src=&quot;../resources/js-test-post.js&quot;&gt;&lt;/script&gt;

</del><span class="cx"> &lt;/body&gt;

</span><span class="cx"> &lt;/html&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentheightchildrenofalignSelfstretchflexitemexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,14 @@

</span><ins>+

+

+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentheightchildrenofalignSelfstretchflexitemhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,78 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.horizontal {

+    height: 50px;

+    background-color: purple;

+    position: relative;

+}

+.vertical {

+    width: 50px;

+    height: 10px;

+    background-color: purple;

+    position: relative;

+    writing-mode: vertical-rl;

+}

+.flex-one {

+    background-color: red;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;script&gt;

+function changeHeight()

+{

+  document.getElementById('dynamicHorizontalChild').style.height = &quot;90%&quot;;

+  document.getElementById('dynamicVerticalChild').style.width = &quot;30%&quot;;

+  checkLayout('.flexbox');

+}

+&lt;/script&gt;

+&lt;body onload=&quot;changeHeight()&quot;&gt;

+&lt;div class=&quot;flexbox horizontal&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot; class=&quot;flex-one&quot;&gt;

+    &lt;div data-expected-height=&quot;35&quot; style=&quot;height: 70%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox horizontal&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot; class=&quot;flex-one&quot;&gt;

+    &lt;div id=&quot;dynamicHorizontalChild&quot; data-expected-height=&quot;45&quot; style=&quot;height: 70%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox horizontal&quot;&gt;

+  &lt;div data-expected-height=&quot;50&quot; class=&quot;flex-one&quot; style=&quot;padding: 10px; border: 2px solid black&quot;&gt;

+    &lt;div data-expected-height=&quot;18&quot; style=&quot;height: 70%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox horizontal&quot;&gt;

+  &lt;img data-expected-height=&quot;25&quot; style=&quot;max-height: 50%&quot; src=&quot;../../images/resources/green-10.png&quot; /&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox horizontal&quot;&gt;

+  &lt;div data-expected-height=&quot;25&quot; class=&quot;flex-one&quot; style=&quot;max-height:50%&quot;&gt;

+    &lt;div data-expected-height=&quot;13&quot; style=&quot;height: 50%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox vertical&quot;&gt;

+  &lt;div data-expected-width=&quot;50&quot; class=&quot;flex-one&quot;&gt;

+    &lt;div data-expected-width=&quot;25&quot; style=&quot;width: 50%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox vertical&quot;&gt;

+  &lt;div data-expected-width=&quot;50&quot; class=&quot;flex-one&quot;&gt;

+    &lt;div id=&quot;dynamicVerticalChild&quot; data-expected-width=&quot;15&quot; style=&quot;width: 50%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox vertical&quot;&gt;

+  &lt;div data-expected-width=&quot;50&quot; class=&quot;flex-one&quot; style=&quot;padding: 10px; border: 2px solid black&quot;&gt;

+    &lt;div data-expected-width=&quot;13&quot; style=&quot;width: 50%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox vertical&quot;&gt;

+  &lt;img data-expected-width=&quot;25&quot; style=&quot;max-width: 50%&quot; src=&quot;../../images/resources/green-10.png&quot; /&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox vertical&quot;&gt;

+  &lt;div data-expected-width=&quot;25&quot; class=&quot;flex-one&quot; style=&quot;max-width: 50%&quot;&gt;

+    &lt;div data-expected-width=&quot;13&quot; style=&quot;width: 50%; background-color: lime&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentmarginsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percent-margins-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percent-margins-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percent-margins-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,3 +1,5 @@

</span><del>-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentmarginshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percent-margins.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percent-margins.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percent-margins.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,19 +1,22 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;display:-webkit-flex; -webkit-flex-direction: column; background-color: salmon; height: 300px; width: 400px;&quot;&gt;

-    &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; -webkit-flex: 1&quot; data-expected-width=320 data-expected-height=135&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;display:flex; flex-direction: column; background-color: salmon; height: 300px; width: 400px;&quot;&gt;

+    &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; flex: 1&quot; data-expected-width=320 data-expected-height=135&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px;&quot; data-expected-width=320 data-expected-height=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;display:-webkit-flex; background-color: salmon; height: 300px; width: 400px;&quot;&gt;

-    &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; -webkit-flex: 1 5px&quot; data-expected-width=235 data-expected-height=5&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;display:flex; background-color: salmon; height: 300px; width: 400px;&quot;&gt;

+    &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; flex: 1 5px&quot; data-expected-width=235 data-expected-height=5&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; width: 5px&quot; data-expected-width=5 data-expected-height=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;display:-webkit-flex; background-color: salmon; height: 300px; width: 400px; padding: 100px;&quot;&gt;

-    &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; -webkit-flex: 1 5px&quot; data-expected-width=235 data-expected-height=5&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;display:flex; background-color: salmon; height: 300px; width: 400px; padding: 100px;&quot;&gt;

+    &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; flex: 1 5px&quot; data-expected-width=235 data-expected-height=5&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div style=&quot;margin: 10%; background-color: orange; height: 5px; width: 5px&quot; data-expected-width=5 data-expected-height=5&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentageheightinabsposexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,38 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+body {

+  position: relative;

+  width: 800px;

+  height: 600px;

+}

+

+#container {

+  position: absolute;

+  top: 0;

+  bottom: 0;

+  left: 0;

+  right: 0;

+}

+

+#top-bar {

+  background-color: green;

+  height: 100px;

+}

+

+#content {

+  background-color: blue;

+  height: 500px;

+}

+&lt;/style&gt;

+

+

+&lt;div id=&quot;container&quot;&gt;

+  &lt;div id=&quot;top-bar&quot;&gt;

+  Tests that percentage heights get resolved correctly when the flexbox is

+  &lt;/div&gt;

+  &lt;div id=&quot;content&quot;&gt;

+  absolutely positioned without an explicit height. You should see no red.

+  &lt;/div&gt;

+&lt;/div&gt;

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentageheightinabsposhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-height-in-abspos.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,41 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+body {

+  position: relative;

+  width: 800px;

+  height: 600px;

+}

+

+#container {

+  background-color: red;

+  position: absolute;

+  top: 0;

+  bottom: 0;

+  left: 0;

+  right: 0;

+  display: flex;

+  flex-direction: column;

+}

+

+#top-bar {

+  background-color: green;

+  height: 20%;

+}

+

+#content {

+  background-color: blue;

+  flex-basis: 100%;

+}

+&lt;/style&gt;

+

+

+&lt;div id=&quot;container&quot;&gt;

+  &lt;div id=&quot;top-bar&quot;&gt;

+  Tests that percentage heights get resolved correctly when the flexbox is

+  &lt;/div&gt;

+  &lt;div id=&quot;content&quot;&gt;

+  absolutely positioned without an explicit height. You should see no red.

+  &lt;/div&gt;

+&lt;/div&gt;

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentageheightreplacedelementexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,11 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+You should see no red -- the height should be considered definite

+

+

+

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentageheightreplacedelementhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-height-replaced-element.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,36 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;p&gt;You should see no red -- the height should be considered definite&lt;/p&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 100px; height: 150px; outline: 5px solid black;&quot;&gt;

+  &lt;div style=&quot;background: red;&quot;&gt;

+    &lt;img style=&quot;height: 100%; width: 100%;&quot; src=&quot;../images/resources/green-100.png&quot; data-expected-height=&quot;150&quot;&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;width: 100px; height: 150px; outline: 5px solid black;&quot;&gt;

+  &lt;div class=&quot;flex-one&quot; style=&quot;background: red;&quot;&gt;

+    &lt;img style=&quot;height: 100%; width: 100%;&quot; src=&quot;../images/resources/green-100.png&quot; data-expected-height=&quot;150&quot;&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 100px; height: 150px; outline: 5px solid black;&quot;&gt;

+  &lt;div style=&quot;background: red;&quot;&gt;

+    &lt;object style=&quot;height: 100%; width: 100%;&quot; data=&quot;../images/resources/green-100.png&quot; data-expected-height=&quot;150&quot;&gt;&lt;/object&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot; style=&quot;width: 100px; height: 150px; outline: 5px solid black;&quot;&gt;

+  &lt;div style=&quot;background: red;&quot;&gt;

+    &lt;embed style=&quot;height: 100%; width: 100%;&quot; type=&quot;application/x-webkit-test-webplugin&quot; data-expected-height=&quot;150&quot;&gt;&lt;/embed&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentageheightsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percentage-heights-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-heights-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percentage-heights-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,6 +1,8 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentageheightshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percentage-heights.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-heights.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percentage-heights.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,7 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="lines">@@ -21,14 +21,17 @@

</span><span class="cx">     height: 40%;

</span><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column wrap;

</del><ins>+    flex-flow: column wrap;

</ins><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><del>-    -webkit-align-content: flex-start;

</del><ins>+    align-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot;&gt;

</span><span class="cx">     &lt;div data-expected-height=&quot;40&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -43,25 +46,25 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot;&gt;

</span><del>-    &lt;div data-expected-height=&quot;20&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1; min-height: 0; max-height: 20%&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-height=&quot;20&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1; min-height: 0; max-height: 20%&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div data-expected-height=&quot;40&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;20&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-height=&quot;40&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;60&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox column&quot; style=&quot;-webkit-writing-mode: vertical-rl&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox column&quot; style=&quot;writing-mode: vertical-rl&quot;&gt;

</ins><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;40&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox column&quot; style=&quot;-webkit-writing-mode: vertical-rl&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox column&quot; style=&quot;writing-mode: vertical-rl&quot;&gt;

</ins><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;0&quot; style=&quot;margin-bottom: 10%&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;20&quot; data-offset-y=&quot;0&quot; style=&quot;margin-bottom: 20%&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;60&quot; data-offset-y=&quot;60&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox column&quot; style=&quot;-webkit-writing-mode: vertical-rl&quot;&gt;

-    &lt;div data-expected-width=&quot;20&quot; data-offset-x=&quot;80&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1; min-width: 0; max-width: 20%&quot;&gt;&lt;/div&gt;

</del><ins>+&lt;div class=&quot;flexbox column&quot; style=&quot;writing-mode: vertical-rl&quot;&gt;

+    &lt;div data-expected-width=&quot;20&quot; data-offset-x=&quot;80&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1; min-width: 0; max-width: 20%&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;40&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-width=&quot;40&quot; data-offset-x=&quot;0&quot; data-offset-y=&quot;0&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagemaxwidthcrossaxisexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,8 @@

</span><ins>+Both bars should be the same width

+

+Content

+Content

+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagemaxwidthcrossaxishtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-max-width-cross-axis.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,22 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;link rel=&quot;stylesheet&quot; href=&quot;resources/flexbox.css&quot;&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+

+&lt;p&gt;Both bars should be the same width&lt;/p&gt;

+&lt;div class=&quot;flexbox column&quot; style=&quot;width: 400px;&quot;&gt;

+  &lt;div data-expected-width=&quot;200&quot; style=&quot;margin-left: 50%; width: 50%; background: green;&quot;&gt;

+    Content

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;width: 400px;&quot;&gt;

+  &lt;div data-expected-width=&quot;200&quot; style=&quot;margin-left: 50%; max-width: 50%; background: blue;&quot;&gt;

+    Content

+  &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagesizesexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,8 +1,10 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagesizesquirksexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,5 +1,7 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

</ins><span class="cx"> CompatMode: BackCompat

</span><del>-PASS

-PASS

-PASS

-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagesizesquirkshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,6 +1,6 @@

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><span class="cx">     height: 50px;

</span><span class="lines">@@ -13,10 +13,10 @@

</span><span class="cx"> }

</span><span class="cx"> .row &gt; div &gt; div {

</span><span class="cx">     height: 20px;

</span><del>-    -webkit-flex: 0 0 auto;

</del><ins>+    flex: 0 0 auto;

</ins><span class="cx"> }

</span><span class="cx"> .column &gt; .flexbox {

</span><del>-    -webkit-flex-direction: column;

</del><ins>+    flex-direction: column;

</ins><span class="cx"> }

</span><span class="cx"> .container &gt; div &gt; :nth-child(1) {

</span><span class="cx">     background-color: orange;

</span><span class="lines">@@ -31,8 +31,11 @@

</span><span class="cx">     background-color: purple;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div&gt;CompatMode: &lt;script&gt;document.write(document.compatMode)&lt;/script&gt;&lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -56,13 +59,13 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container row&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-        &lt;div style=&quot;-webkit-flex: 0 0 50%&quot; data-expected-width=25&gt;&lt;/div&gt;

</del><ins>+        &lt;div style=&quot;flex: 0 0 50%&quot; data-expected-width=25&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container column&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-        &lt;div style=&quot;-webkit-flex: 0 0 50%&quot; data-expected-height=25&gt;&lt;/div&gt;

</del><ins>+        &lt;div style=&quot;flex: 0 0 50%&quot; data-expected-height=25&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagesizeshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/percentage-sizes.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-sizes.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/percentage-sizes.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,7 +1,7 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx"> }

</span><span class="cx"> .column, .column .fixed {

</span><span class="cx">     height: 50px;

</span><span class="lines">@@ -16,10 +16,10 @@

</span><span class="cx">     height: 20px;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><del>-    -webkit-flex: 0 0 auto;

</del><ins>+    flex: 0 0 auto;

</ins><span class="cx"> }

</span><span class="cx"> .column &gt; .flexbox {

</span><del>-    -webkit-flex-direction: column;

</del><ins>+    flex-direction: column;

</ins><span class="cx"> }

</span><span class="cx"> .container &gt; div &gt; :nth-child(1) {

</span><span class="cx">     background-color: orange;

</span><span class="lines">@@ -34,8 +34,11 @@

</span><span class="cx">     background-color: purple;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container row&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -75,25 +78,25 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container row&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-        &lt;div style=&quot;-webkit-flex: 0 0 50%&quot; data-expected-width=25&gt;&lt;/div&gt;

</del><ins>+        &lt;div style=&quot;flex: 0 0 50%&quot; data-expected-width=25&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container column&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox&quot;&gt;

</span><del>-        &lt;div style=&quot;-webkit-flex: 0 0 50%&quot; data-expected-height=0&gt;&lt;/div&gt;

</del><ins>+        &lt;div style=&quot;flex: 0 0 50%&quot; data-expected-height=0&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container row&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox fixed&quot;&gt;

</span><del>-        &lt;div style=&quot;-webkit-flex: 0 0 50%&quot; data-expected-width=25&gt;&lt;/div&gt;

</del><ins>+        &lt;div style=&quot;flex: 0 0 50%&quot; data-expected-width=25&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;container column&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexbox fixed&quot;&gt;

</span><del>-        &lt;div style=&quot;-webkit-flex: 0 0 50%&quot; data-expected-height=25&gt;&lt;/div&gt;

</del><ins>+        &lt;div style=&quot;flex: 0 0 50%&quot; data-expected-height=25&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagewidthinabsposexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,39 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+body {

+  position: relative;

+  width: 600px;

+  height: 800px;

+}

+

+#container {

+  position: absolute;

+  top: 0;

+  bottom: 0;

+  left: 0;

+  right: 0;

+  display: flex;

+}

+

+#top-bar {

+  background-color: green;

+  width: 100px;

+}

+

+#content {

+  background-color: blue;

+  width: 500px;

+}

+&lt;/style&gt;

+

+

+&lt;div id=&quot;container&quot;&gt;

+  &lt;div id=&quot;top-bar&quot;&gt;

+  Tests that percentage widths get resolved correctly when the flexbox is

+  &lt;/div&gt;

+  &lt;div id=&quot;content&quot;&gt;

+  absolutely positioned without an explicit width. You should see no red.

+  &lt;/div&gt;

+&lt;/div&gt;

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpercentagewidthinabsposhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/percentage-width-in-abspos.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,41 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+body {

+  position: relative;

+  width: 600px;

+  height: 800px;

+}

+

+#container {

+  background-color: red;

+  position: absolute;

+  top: 0;

+  bottom: 0;

+  left: 0;

+  right: 0;

+  display: flex;

+  flex-direction: row;

+}

+

+#top-bar {

+  background-color: green;

+  width: 20%;

+}

+

+#content {

+  background-color: blue;

+  flex-basis: 100%;

+}

+&lt;/style&gt;

+

+

+&lt;div id=&quot;container&quot;&gt;

+  &lt;div id=&quot;top-bar&quot;&gt;

+  Tests that percentage widths get resolved correctly when the flexbox is

+  &lt;/div&gt;

+  &lt;div id=&quot;content&quot;&gt;

+  absolutely positioned without an explicit width. You should see no red.

+  &lt;/div&gt;

+&lt;/div&gt;

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxperpendicularwritingmodesinsideflexitemexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>- PASS

</del><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxperpendicularwritingmodesinsideflexitemhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,8 +1,8 @@

</span><span class="cx"> &lt;!DOCTYPE html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

-    -webkit-flex-direction: column;

</del><ins>+    display: flex;

+    flex-direction: column;

</ins><span class="cx">     height: 300px;

</span><span class="cx">     width: 200px;

</span><span class="cx">     padding: 3px;

</span><span class="lines">@@ -9,7 +9,7 @@

</span><span class="cx">     border: 4px solid black;

</span><span class="cx"> }

</span><span class="cx"> .flexitem {

</span><del>-    -webkit-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx">     padding: 3px;

</span><span class="cx">     border: 4px solid cyan;

</span><span class="cx">     min-height: 0;

</span><span class="lines">@@ -16,7 +16,7 @@

</span><span class="cx"> }

</span><span class="cx"> .vertical {

</span><span class="cx">     position: relative;

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx">     padding: 3px;

</span><span class="cx">     border: 4px solid blue;

</span><span class="cx"> }

</span><span class="lines">@@ -28,9 +28,12 @@

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> 

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;div class=&quot;flexbox&quot;&gt;

</span><span class="cx">         &lt;div class=&quot;flexitem&quot; data-expected-width=200 data-expected-height=300&gt;

</span><span class="cx">             &lt;div class=&quot;vertical&quot; data-expected-height=286&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpositionabsolutechildexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/position-absolute-child-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/position-absolute-child-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/position-absolute-child-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,320 +1,242 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

+PASS .flexbox 49 

+PASS .flexbox 50 

+PASS .flexbox 51 

+PASS .flexbox 52 

+PASS .flexbox 53 

+PASS .flexbox 54 

+PASS .flexbox 55 

+PASS .flexbox 56 

+PASS .flexbox 57 

+PASS .flexbox 58 

+PASS .flexbox 59 

+PASS .flexbox 60 

+PASS .flexbox 61 

+PASS .flexbox 62 

+PASS .flexbox 63 

+PASS .flexbox 64 

+PASS .flexbox 65 

+PASS .flexbox 66 

+PASS .flexbox 67 

+PASS .flexbox 68 

+PASS .flexbox 69 

+PASS .flexbox 70 

+PASS .flexbox 71 

+PASS .flexbox 72 

+PASS .flexbox 73 

+PASS .flexbox 74 

+PASS .flexbox 75 

+PASS .flexbox 76 

+PASS .flexbox 77 

+PASS .flexbox 78 

+PASS .flexbox 79 

+PASS .flexbox 80 

+PASS .flexbox 81 

+PASS .flexbox 82 

+PASS .flexbox 83 

+PASS .flexbox 84 

+PASS .flexbox 85 

+PASS .flexbox 86 

+PASS .flexbox 87 

+PASS .flexbox 88 

+PASS .flexbox 89 

+PASS .flexbox 90 

+PASS .flexbox 91 

+PASS .flexbox 92 

+PASS .flexbox 93 

+PASS .flexbox 94 

+PASS .flexbox 95 

+PASS .flexbox 96 

+PASS .flexbox 97 

+PASS .flexbox 98 

+PASS .flexbox 99 

+PASS .flexbox 100 

+PASS .flexbox 101 

+PASS .flexbox 102 

+PASS .flexbox 103 

+PASS .flexbox 104 

+PASS .flexbox 105 

+PASS .flexbox 106 

+PASS .flexbox 107 

+PASS .flexbox 108 

+PASS .flexbox 109 

+PASS .flexbox 110 

+PASS .flexbox 111 

+PASS .flexbox 112 

+PASS .flexbox 113 

+PASS .flexbox 114 

+PASS .flexbox 115 

+PASS .flexbox 116 

+PASS .flexbox 117 

+PASS .flexbox 118 

+PASS .flexbox 119 

+PASS .flexbox 120 

+PASS .flexbox 121 

+PASS .flexbox 122 

+PASS .flexbox 123 

+PASS .flexbox 124 

+PASS .flexbox 125 

+PASS .flexbox 126 

+PASS .flexbox 127 

+PASS .flexbox 128 

+PASS .flexbox 129 

+PASS .flexbox 130 

+PASS .flexbox 131 

+PASS .flexbox 132 

+PASS .flexbox 133 

+PASS .flexbox 134 

+PASS .flexbox 135 

+PASS .flexbox 136 

+PASS .flexbox 137 

+PASS .flexbox 138 

+PASS .flexbox 139 

+PASS .flexbox 140 

+PASS .flexbox 141 

+PASS .flexbox 142 

+PASS .flexbox 143 

+PASS .flexbox 144 

+PASS .flexbox 145 

+PASS .flexbox 146 

+PASS .flexbox 147 

+PASS .flexbox 148 

+PASS .flexbox 149 

+PASS .flexbox 150 

+PASS .flexbox 151 

+PASS .flexbox 152 

+PASS .flexbox 153 

+PASS .flexbox 154 

+PASS .flexbox 155 

+PASS .flexbox 156 

+PASS .flexbox 157 

+PASS .flexbox 158 

+PASS .flexbox 159 

+PASS .flexbox 160 

+PASS .flexbox 161 

+PASS .flexbox 162 

+PASS .flexbox 163 

+PASS .flexbox 164 

+PASS .flexbox 165 

+PASS .flexbox 166 

+PASS .flexbox 167 

+PASS .flexbox 168 

+PASS .flexbox 169 

+PASS .flexbox 170 

+PASS .flexbox 171 

+PASS .flexbox 172 

+PASS .flexbox 173 

+PASS .flexbox 174 

+PASS .flexbox 175 

+PASS .flexbox 176 

+PASS .flexbox 177 

+PASS .flexbox 178 

+PASS .flexbox 179 

+PASS .flexbox 180 

+PASS .flexbox 181 

+PASS .flexbox 182 

+PASS .flexbox 183 

+PASS .flexbox 184 

+PASS .flexbox 185 

+PASS .flexbox 186 

+PASS .flexbox 187 

+PASS .flexbox 188 

+PASS .flexbox 189 

+PASS .flexbox 190 

+PASS .flexbox 191 

+PASS .flexbox 192 

+PASS .flexbox 193 

+PASS .flexbox 194 

+PASS .flexbox 195 

+PASS .flexbox 196 

+PASS .flexbox 197 

+PASS .flexbox 198 

+PASS .flexbox 199 

+PASS .flexbox 200 

+PASS .flexbox 201 

+PASS .flexbox 202 

+PASS .flexbox 203 

+PASS .flexbox 204 

+PASS .flexbox 205 

+PASS .flexbox 206 

+PASS .flexbox 207 

+PASS .flexbox 208 

+PASS .flexbox 209 

+PASS .flexbox 210 

+PASS .flexbox 211 

+PASS .flexbox 212 

+PASS .flexbox 213 

+PASS .flexbox 214 

+PASS .flexbox 215 

+PASS .flexbox 216 

</ins><span class="cx"> horizontal-tb ltr row

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> horizontal-tb rtl row

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> horizontal-tb ltr column

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> horizontal-tb rtl column

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt ltr row

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt rtl row

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt ltr column

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt rtl column

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt ltr row-reverse

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt rtl row-reverse

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt ltr column-reverse

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-horizontal-bt rtl column-reverse

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl ltr row

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl rtl row

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl ltr column

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl rtl column

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl ltr row-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl rtl row-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl ltr column-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-rl rtl column-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr ltr row

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr rtl row

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr ltr column

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr rtl column

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr ltr row-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr rtl row-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr ltr column-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><span class="cx"> vertical-lr rtl column-reverse

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpositionabsolutechildhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/position-absolute-child.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/position-absolute-child.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/position-absolute-child.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -10,39 +10,36 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="cx"> .flexbox div {

</span><span class="cx">     border: 0;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox :nth-child(1) {

</span><span class="lines">@@ -63,8 +60,11 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> function getFlexDirection(flexFlow, writingMode)

</span><span class="lines">@@ -74,208 +74,113 @@

</span><span class="cx">     return (flexFlow.indexOf('row') != -1) ? 'height' : 'width';

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> 

</span><ins>+// In each group, you have 3x3 tests. The first 3 test &quot;regular&quot; flexbox,

+// the second test justify-content: space-between, and the final three test

+// justify-content: center; align-items: center;

+// In each of these groups, the absolute item is in position 0, 1, 2.

+// crossAxisOffset is used for the absolute-positioned child.

</ins><span class="cx"> var expectations = {

</span><span class="cx">     'horizontal-tb': {

</span><span class="cx">         row: {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },

</span><del>-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

</del><ins>+                { offsets: [0, 0, 150], sizes: [150, 0, 450] },

+                { offsets: [0, 200, 0], sizes: [200, 400, 0] },

</ins><span class="cx">                 { offsets: [0, 0, 560] },

</span><del>-                { offsets: [0, 560, 560] },

-                { offsets: [0, 560, 600] },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 90], crossAxisOffset: 0 },

</del><ins>+                { offsets: [0, 0, 560] },

+                { offsets: [0, 560, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },

</span><del>-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

</del><ins>+                { offsets: [450, 600, 0], sizes: [150, 0, 450] },

+                { offsets: [400, 0, 600], sizes: [200, 400, 0] },

</ins><span class="cx">                 { offsets: [580, 560, 0] },

</span><del>-                { offsets: [560, 20, 0] },

-                { offsets: [560, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, -30], crossAxisOffset: 0 },

</del><ins>+                { offsets: [560, 580, 0] },

+                { offsets: [560, 0, 580] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         column: {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },

</span><del>-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [0, 0, 30], sizes: [30, 0, 90] },

+                { offsets: [0, 40, 0], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [0, 0, 80] },

</span><del>-                { offsets: [0, 80, 80] },

-                { offsets: [0, 80, 120] },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 90], crossAxisOffset: 0 },

</del><ins>+                { offsets: [0, 0, 80] },

+                { offsets: [0, 80, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },

</span><del>-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [0, 0, 30], sizes: [30, 0, 90] },

+                { offsets: [0, 40, 0], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [0, 0, 80] },

</span><del>-                { offsets: [0, 80, 80] },

-                { offsets: [0, 80, 120] },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 90], crossAxisOffset: 60 },

</del><ins>+                { offsets: [0, 0, 80] },

+                { offsets: [0, 80, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         'row-reverse': {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },

</span><del>-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

-                { offsets: [600, 560, 0] },

-                { offsets: [560, 40, 0] },

-                { offsets: [560, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

</del><ins>+                { offsets: [450, 600, 0], sizes: [150, 0, 450] },

+                { offsets: [400, 0, 600], sizes: [200, 400, 0] },

+                { offsets: [580, 560, 0] },

+                { offsets: [560, 580, 0] },

+                { offsets: [560, 0, 580] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },

</span><del>-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

-                { offsets: [-20, 0, 560] },

-                { offsets: [0, 540, 560] },

-                { offsets: [0, 560, 580] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

</del><ins>+                { offsets: [0, 0, 150], sizes: [150, 0, 450] },

+                { offsets: [0, 200, 0], sizes: [200, 400, 0] },

+                { offsets: [0, 0, 560] },

+                { offsets: [0, 0, 560] },

+                { offsets: [0, 560, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },

</span><del>-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

-                { offsets: [120, 80, 0] },

-                { offsets: [80, 40, 0] },

-                { offsets: [80, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

-            ],

-            rtl: [

-                { offsets: [120, 72, 0], sizes: [0, 48, 72] },

-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

-                { offsets: [120, 80, 0] },

-                { offsets: [80, 40, 0] },

-                { offsets: [80, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

-            ],

-        },

-    },

-    'horizontal-bt': {

-        // This matches the horizontal-tb values above.

-        row: {

-            ltr: [

-                { offsets: [0, 0, 240], sizes: [0, 240, 360] },

-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

-                { offsets: [0, 0, 560] },

-                { offsets: [0, 560, 560] },

-                { offsets: [0, 560, 600] },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 90], crossAxisOffset: 60 },

-            ],

-            rtl: [

-                { offsets: [600, 360, 0], sizes: [0, 240, 360] },

-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

-                { offsets: [580, 560, 0] },

-                { offsets: [560, 20, 0] },

-                { offsets: [560, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, -30], crossAxisOffset: 60 },

-            ],

-        },

-        // horizontal-bt flips the main axis direction so the offsets are different from horizontal-tb.

-        column: {

-            ltr: [

-                { offsets: [120, 72, 0], sizes: [0, 48, 72] },

-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [90, 120, 0], sizes: [30, 0, 90] },

+                { offsets: [80, 0, 120], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [100, 80, 0] },

</span><del>-                { offsets: [80, 20, 0] },

-                { offsets: [80, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, -30], crossAxisOffset: 0 },

</del><ins>+                { offsets: [80, 100, 0] },

+                { offsets: [80, 0, 100] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },

</span><del>-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [90, 120, 0], sizes: [30, 0, 90] },

+                { offsets: [80, 0, 120], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [100, 80, 0] },

</span><del>-                { offsets: [80, 20, 0] },

-                { offsets: [80, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, -30], crossAxisOffset: 60 },

</del><ins>+                { offsets: [80, 100, 0] },

+                { offsets: [80, 0, 100] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><del>-        'row-reverse': {

-            ltr: [

-                { offsets: [600, 360, 0], sizes: [0, 240, 360] },

-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

-                { offsets: [600, 560, 0] },

-                { offsets: [560, 40, 0] },

-                { offsets: [560, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

-            ],

-            rtl: [

-                { offsets: [0, 0, 240], sizes: [0, 240, 360] },

-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

-                { offsets: [-20, 0, 560] },

-                { offsets: [0, 540, 560] },

-                { offsets: [0, 560, 580] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

-            ],

-        },

-        'column-reverse': {

-            ltr: [

-                { offsets: [0, 0, 48], sizes: [0, 48, 72] },

-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

-                { offsets: [-20, 0, 80] },

-                { offsets: [0, 60, 80] },

-                { offsets: [0, 80, 100] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

-            ],

-            rtl: [

-                { offsets: [0, 0, 48], sizes: [0, 48, 72] },

-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

-                { offsets: [-20, 0, 80] },

-                { offsets: [0, 60, 80] },

-                { offsets: [0, 80, 100] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

-            ],

-        },

</del><span class="cx">     },

</span><span class="cx">     'vertical-rl': {

</span><span class="cx">         row: {

</span><span class="lines">@@ -282,25 +187,25 @@

<span class="cx">             // The same as horizontal-tb + column.

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },

</span><del>-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [0, 0, 30], sizes: [30, 0, 90] },

+                { offsets: [0, 40, 0], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [0, 0, 80] },

</span><del>-                { offsets: [0, 80, 80] },

-                { offsets: [0, 80, 120] },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 90], crossAxisOffset: 60 },

</del><ins>+                { offsets: [0, 0, 80] },

+                { offsets: [0, 80, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },

</span><del>-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [90, 120, 0], sizes: [30, 0, 90] },

+                { offsets: [80, 0, 120], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [100, 80, 0] },

</span><del>-                { offsets: [80, 20, 0] },

-                { offsets: [80, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, -30], crossAxisOffset: 60 },

</del><ins>+                { offsets: [80, 100, 0] },

+                { offsets: [80, 0, 100] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         column: {

</span><span class="lines">@@ -307,73 +212,73 @@

<span class="cx">             // The same as horizontal-tb + row.

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },

</span><del>-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

</del><ins>+                { offsets: [450, 600, 0], sizes: [150, 0, 450] },

+                { offsets: [400, 0, 600], sizes: [200, 400, 0] },

</ins><span class="cx">                 { offsets: [580, 560, 0] },

</span><del>-                { offsets: [560, 20, 0] },

-                { offsets: [560, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, -30], crossAxisOffset: 0 },

</del><ins>+                { offsets: [560, 580, 0] },

+                { offsets: [560, 0, 580] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },

</span><del>-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

</del><ins>+                { offsets: [450, 600, 0], sizes: [150, 0, 450] },

+                { offsets: [400, 0, 600], sizes: [200, 400, 0] },

</ins><span class="cx">                 { offsets: [580, 560, 0] },

</span><del>-                { offsets: [560, 20, 0] },

-                { offsets: [560, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, -30], crossAxisOffset: 60 },

</del><ins>+                { offsets: [560, 580, 0] },

+                { offsets: [560, 0, 580] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         'row-reverse': {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },

</span><del>-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

-                { offsets: [120, 80, 0] },

-                { offsets: [80, 40, 0] },

-                { offsets: [80, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

</del><ins>+                { offsets: [90, 120, 0], sizes: [30, 0, 90] },

+                { offsets: [80, 0, 120], sizes: [40, 80, 0] },

+                { offsets: [100, 80, 0] },

+                { offsets: [80, 100, 0] },

+                { offsets: [80, 0, 100] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },

</span><del>-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

-                { offsets: [-20, 0, 80] },

-                { offsets: [0, 60, 80] },

-                { offsets: [0, 80, 100] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

</del><ins>+                { offsets: [0, 0, 30], sizes: [30, 0, 90] },

+                { offsets: [0, 40, 0], sizes: [40, 80, 0] },

+                { offsets: [0, 0, 80] },

+                { offsets: [0, 0, 80] },

+                { offsets: [0, 80, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },

</span><del>-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

-                { offsets: [-20, 0, 560] },

-                { offsets: [0, 540, 560] },

-                { offsets: [0, 560, 580] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

</del><ins>+                { offsets: [0, 0, 150], sizes: [150, 0, 450] },

+                { offsets: [0, 200, 0], sizes: [200, 400, 0] },

+                { offsets: [0, 0, 560] },

+                { offsets: [0, 0, 560] },

+                { offsets: [0, 560, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },

</span><del>-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

-                { offsets: [-20, 0, 560] },

-                { offsets: [0, 540, 560] },

-                { offsets: [0, 560, 580] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

</del><ins>+                { offsets: [0, 0, 150], sizes: [150, 0, 450] },

+                { offsets: [0, 200, 0], sizes: [200, 400, 0] },

+                { offsets: [0, 0, 560] },

+                { offsets: [0, 0, 560] },

+                { offsets: [0, 560, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         }

</span><span class="cx">     },

</span><span class="lines">@@ -382,98 +287,97 @@

<span class="cx">             // The same as horizontal-tb + column.

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },

</span><del>-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [0, 0, 30], sizes: [30, 0, 90] },

+                { offsets: [0, 40, 0], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [0, 0, 80] },

</span><del>-                { offsets: [0, 80, 80] },

-                { offsets: [0, 80, 120] },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 90], crossAxisOffset: 0 },

</del><ins>+                { offsets: [0, 0, 80] },

+                { offsets: [0, 80, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },

</span><del>-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

</del><ins>+                { offsets: [90, 120, 0], sizes: [30, 0, 90] },

+                { offsets: [80, 0, 120], sizes: [40, 80, 0] },

</ins><span class="cx">                 { offsets: [100, 80, 0] },

</span><del>-                { offsets: [80, 20, 0] },

-                { offsets: [80, 0, -20] },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, -30], crossAxisOffset: 0 },

</del><ins>+                { offsets: [80, 100, 0] },

+                { offsets: [80, 0, 100] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         column: {

<del>-            // The same as horizontal-bt + row.

</del><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },

</span><del>-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

</del><ins>+                { offsets: [0, 0, 150], sizes: [150, 0, 450] },

+                { offsets: [0, 200, 0], sizes: [200, 400, 0] },

</ins><span class="cx">                 { offsets: [0, 0, 560] },

</span><del>-                { offsets: [0, 560, 560] },

-                { offsets: [0, 560, 600] },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 90], crossAxisOffset: 0 },

</del><ins>+                { offsets: [0, 0, 560] },

+                { offsets: [0, 560, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },

</span><del>-                { offsets: [0, 150, 150], sizes: [150, 0, 450] },

-                { offsets: [0, 200, 600], sizes: [200, 400, 0] },

</del><ins>+                { offsets: [0, 0, 150], sizes: [150, 0, 450] },

+                { offsets: [0, 200, 0], sizes: [200, 400, 0] },

</ins><span class="cx">                 { offsets: [0, 0, 560] },

</span><del>-                { offsets: [0, 560, 560] },

-                { offsets: [0, 560, 600] },

-                { offsets: [10, 10, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 50], crossAxisOffset: 60 },

-                { offsets: [10, 50, 90], crossAxisOffset: 60 },

</del><ins>+                { offsets: [0, 0, 560] },

+                { offsets: [0, 560, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         'row-reverse': {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },

</span><del>-                { offsets: [90, 90, 0], sizes: [30, 0, 90] },

-                { offsets: [80, 0, 0], sizes: [40, 80, 0] },

-                { offsets: [120, 80, 0] },

-                { offsets: [80, 40, 0] },

-                { offsets: [80, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

</del><ins>+                { offsets: [90, 120, 0], sizes: [30, 0, 90] },

+                { offsets: [80, 0, 120], sizes: [40, 80, 0] },

+                { offsets: [100, 80, 0] },

+                { offsets: [80, 100, 0] },

+                { offsets: [80, 0, 100] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },

</span><del>-                { offsets: [0, 30, 30], sizes: [30, 0, 90] },

-                { offsets: [0, 40, 120], sizes: [40, 80, 0] },

-                { offsets: [-20, 0, 80] },

-                { offsets: [0, 60, 80] },

-                { offsets: [0, 80, 100] },

-                { offsets: [-30, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 10, 50], crossAxisOffset: 0 },

-                { offsets: [10, 50, 50], crossAxisOffset: 0 },

</del><ins>+                { offsets: [0, 0, 30], sizes: [30, 0, 90] },

+                { offsets: [0, 40, 0], sizes: [40, 80, 0] },

+                { offsets: [0, 0, 80] },

+                { offsets: [0, 0, 80] },

+                { offsets: [0, 80, 0] },

+                { offsets: [30, 10, 50], crossAxisOffset: 30 },

+                { offsets: [10, 30, 50], crossAxisOffset: 30 },

+                { offsets: [10, 50, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             ltr: [

</span><span class="cx">                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },

</span><del>-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

-                { offsets: [600, 560, 0] },

-                { offsets: [560, 40, 0] },

-                { offsets: [560, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 50, 10], crossAxisOffset: 0 },

-                { offsets: [50, 10, 10], crossAxisOffset: 0 },

</del><ins>+                { offsets: [450, 600, 0], sizes: [150, 0, 450] },

+                { offsets: [400, 0, 600], sizes: [200, 400, 0] },

+                { offsets: [580, 560, 0] },

+                { offsets: [560, 580, 0] },

+                { offsets: [560, 0, 580] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">             rtl: [

</span><span class="cx">                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },

</span><del>-                { offsets: [450, 450, 0], sizes: [150, 0, 450] },

-                { offsets: [400, 0, 0], sizes: [200, 400, 0] },

-                { offsets: [600, 560, 0] },

-                { offsets: [560, 40, 0] },

-                { offsets: [560, 0, 0] },

-                { offsets: [90, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 50, 10], crossAxisOffset: 60 },

-                { offsets: [50, 10, 10], crossAxisOffset: 60 },

</del><ins>+                { offsets: [450, 600, 0], sizes: [150, 0, 450] },

+                { offsets: [400, 0, 600], sizes: [200, 400, 0] },

+                { offsets: [580, 560, 0] },

+                { offsets: [560, 580, 0] },

+                { offsets: [560, 0, 580] },

+                { offsets: [30, 50, 10], crossAxisOffset: 30 },

+                { offsets: [50, 30, 10], crossAxisOffset: 30 },

+                { offsets: [50, 10, 30], crossAxisOffset: 30 },

</ins><span class="cx">             ],

</span><span class="cx">         },

</span><span class="cx">     }

</span><span class="lines">@@ -502,7 +406,7 @@

</span><span class="cx">         var flexbox = document.createElement('div');

</span><span class="cx">         flexbox.className = 'flexbox ' + flexboxClassName;

</span><span class="cx">         setFlexboxSize(flexbox, flexDirection);

</span><del>-        flexbox.style.webkitJustifyContent = 'space-between';

</del><ins>+        flexbox.style.justifyContent = 'space-between';

</ins><span class="cx">         for (var childIndex = 1; childIndex &lt;= 3; ++childIndex) {

</span><span class="cx">             var child = document.createElement('div');

</span><span class="cx">             child.style[flexDirection] = '40px';

</span><span class="lines">@@ -536,8 +440,8 @@

</span><span class="cx">         flexbox.style.height = '100px';

</span><span class="cx">         flexbox.style.width = '100px';

</span><span class="cx">         flexbox.style.margin = &quot;20px&quot;;

</span><del>-        flexbox.style.webkitJustifyContent = 'center';

-        flexbox.style.webkitAlignItems = 'center';

</del><ins>+        flexbox.style.justifyContent = 'center';

+        flexbox.style.alignItems = 'center';

</ins><span class="cx"> 

</span><span class="cx">         for (var childIndex = 1; childIndex &lt;= 3; ++childIndex) {

</span><span class="cx">             var child = document.createElement('div');

</span><span class="lines">@@ -576,7 +480,7 @@

</span><span class="cx">                 setFlexboxSize(flexbox, flexDirection);

</span><span class="cx">                 for (var childIndex = 1; childIndex &lt;= 3; ++childIndex) {

</span><span class="cx">                     var child = document.createElement('div');

</span><del>-                    child.style.webkitFlex = childIndex;

</del><ins>+                    child.style.flex = childIndex;

</ins><span class="cx">                     if (childIndex == absoluteIndex)

</span><span class="cx">                         child.style.position = 'absolute';

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpositionabsolutechildrenexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/position-absolute-children-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/position-absolute-children-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/position-absolute-children-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,320 +1,242 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

+PASS .flexbox 32 

+PASS .flexbox 33 

+PASS .flexbox 34 

+PASS .flexbox 35 

+PASS .flexbox 36 

+PASS .flexbox 37 

+PASS .flexbox 38 

+PASS .flexbox 39 

+PASS .flexbox 40 

+PASS .flexbox 41 

+PASS .flexbox 42 

+PASS .flexbox 43 

+PASS .flexbox 44 

+PASS .flexbox 45 

+PASS .flexbox 46 

+PASS .flexbox 47 

+PASS .flexbox 48 

+PASS .flexbox 49 

+PASS .flexbox 50 

+PASS .flexbox 51 

+PASS .flexbox 52 

+PASS .flexbox 53 

+PASS .flexbox 54 

+PASS .flexbox 55 

+PASS .flexbox 56 

+PASS .flexbox 57 

+PASS .flexbox 58 

+PASS .flexbox 59 

+PASS .flexbox 60 

+PASS .flexbox 61 

+PASS .flexbox 62 

+PASS .flexbox 63 

+PASS .flexbox 64 

+PASS .flexbox 65 

+PASS .flexbox 66 

+PASS .flexbox 67 

+PASS .flexbox 68 

+PASS .flexbox 69 

+PASS .flexbox 70 

+PASS .flexbox 71 

+PASS .flexbox 72 

+PASS .flexbox 73 

+PASS .flexbox 74 

+PASS .flexbox 75 

+PASS .flexbox 76 

+PASS .flexbox 77 

+PASS .flexbox 78 

+PASS .flexbox 79 

+PASS .flexbox 80 

+PASS .flexbox 81 

+PASS .flexbox 82 

+PASS .flexbox 83 

+PASS .flexbox 84 

+PASS .flexbox 85 

+PASS .flexbox 86 

+PASS .flexbox 87 

+PASS .flexbox 88 

+PASS .flexbox 89 

+PASS .flexbox 90 

+PASS .flexbox 91 

+PASS .flexbox 92 

+PASS .flexbox 93 

+PASS .flexbox 94 

+PASS .flexbox 95 

+PASS .flexbox 96 

+PASS .flexbox 97 

+PASS .flexbox 98 

+PASS .flexbox 99 

+PASS .flexbox 100 

+PASS .flexbox 101 

+PASS .flexbox 102 

+PASS .flexbox 103 

+PASS .flexbox 104 

+PASS .flexbox 105 

+PASS .flexbox 106 

+PASS .flexbox 107 

+PASS .flexbox 108 

+PASS .flexbox 109 

+PASS .flexbox 110 

+PASS .flexbox 111 

+PASS .flexbox 112 

+PASS .flexbox 113 

+PASS .flexbox 114 

+PASS .flexbox 115 

+PASS .flexbox 116 

+PASS .flexbox 117 

+PASS .flexbox 118 

+PASS .flexbox 119 

+PASS .flexbox 120 

</ins><span class="cx"> horizontal-tb ltr row justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse justify-content-space-around

</span><del>-PASS

-horizontal-bt ltr row justify-content-flex-start

-PASS

-horizontal-bt ltr row justify-content-flex-end

-PASS

-horizontal-bt ltr row justify-content-center

-PASS

-horizontal-bt ltr row justify-content-space-between

-PASS

-horizontal-bt ltr row justify-content-space-around

-PASS

-horizontal-bt rtl row justify-content-flex-start

-PASS

-horizontal-bt rtl row justify-content-flex-end

-PASS

-horizontal-bt rtl row justify-content-center

-PASS

-horizontal-bt rtl row justify-content-space-between

-PASS

-horizontal-bt rtl row justify-content-space-around

-PASS

-horizontal-bt ltr column justify-content-flex-start

-PASS

-horizontal-bt ltr column justify-content-flex-end

-PASS

-horizontal-bt ltr column justify-content-center

-PASS

-horizontal-bt ltr column justify-content-space-between

-PASS

-horizontal-bt ltr column justify-content-space-around

-PASS

-horizontal-bt rtl column justify-content-flex-start

-PASS

-horizontal-bt rtl column justify-content-flex-end

-PASS

-horizontal-bt rtl column justify-content-center

-PASS

-horizontal-bt rtl column justify-content-space-between

-PASS

-horizontal-bt rtl column justify-content-space-around

-PASS

-horizontal-bt ltr row-reverse justify-content-flex-start

-PASS

-horizontal-bt ltr row-reverse justify-content-flex-end

-PASS

-horizontal-bt ltr row-reverse justify-content-center

-PASS

-horizontal-bt ltr row-reverse justify-content-space-between

-PASS

-horizontal-bt ltr row-reverse justify-content-space-around

-PASS

-horizontal-bt rtl row-reverse justify-content-flex-start

-PASS

-horizontal-bt rtl row-reverse justify-content-flex-end

-PASS

-horizontal-bt rtl row-reverse justify-content-center

-PASS

-horizontal-bt rtl row-reverse justify-content-space-between

-PASS

-horizontal-bt rtl row-reverse justify-content-space-around

-PASS

-horizontal-bt ltr column-reverse justify-content-flex-start

-PASS

-horizontal-bt ltr column-reverse justify-content-flex-end

-PASS

-horizontal-bt ltr column-reverse justify-content-center

-PASS

-horizontal-bt ltr column-reverse justify-content-space-between

-PASS

-horizontal-bt ltr column-reverse justify-content-space-around

-PASS

-horizontal-bt rtl column-reverse justify-content-flex-start

-PASS

-horizontal-bt rtl column-reverse justify-content-flex-end

-PASS

-horizontal-bt rtl column-reverse justify-content-center

-PASS

-horizontal-bt rtl column-reverse justify-content-space-between

-PASS

-horizontal-bt rtl column-reverse justify-content-space-around

-PASS

</del><span class="cx"> vertical-rl ltr row justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse justify-content-space-around

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse justify-content-flex-start

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse justify-content-flex-end

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse justify-content-center

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse justify-content-space-between

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse justify-content-space-around

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpositionabsolutechildrenhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/position-absolute-children.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/position-absolute-children.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/position-absolute-children.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -10,39 +10,36 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="cx"> .flexbox div {

</span><span class="cx">     border: 0;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox :nth-child(1) {

</span><span class="lines">@@ -60,24 +57,30 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .justify-content-flex-start {

</span><del>-    -webkit-justify-content: flex-start;

</del><ins>+    justify-content: flex-start;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-flex-end {

</span><del>-    -webkit-justify-content: flex-end;

</del><ins>+    justify-content: flex-end;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-center {

</span><del>-    -webkit-justify-content: center;

</del><ins>+    justify-content: center;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-space-between {

</span><del>-    -webkit-justify-content: space-between;

</del><ins>+    justify-content: space-between;

</ins><span class="cx"> }

</span><span class="cx"> .justify-content-space-around {

</span><del>-    -webkit-justify-content: space-around;

</del><ins>+    justify-content: space-around;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;script&gt;

<ins>+// Each flexbox has two abspos children - one is 40x10, the other 10x20.

+// The flexbox itself is 80x20.

+// All that is flipped for vertical flows.

</ins><span class="cx"> var expectations = {

</span><span class="cx">     'horizontal-tb': {

</span><span class="cx">         'row': {

</span><span class="lines">@@ -87,12 +90,12 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [80, 0],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 0],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [0, 0],

</span><span class="lines">@@ -99,8 +102,8 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="lines">@@ -109,12 +112,12 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [-40, 0],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [40, 0],

</span><span class="lines">@@ -121,8 +124,8 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -133,12 +136,12 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [0, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [0, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [0, 0],

</span><span class="lines">@@ -145,8 +148,8 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="lines">@@ -155,12 +158,12 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [10, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [10, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [10, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [10, 0],

</span><span class="lines">@@ -167,8 +170,8 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [10, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -175,8 +178,8 @@

</span><span class="cx">         'row-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [80, 0],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 0],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [0, 0],

</span><span class="lines">@@ -183,22 +186,22 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [80, 0],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 0],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [-40, 0],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [40, 0],

</span><span class="lines">@@ -205,126 +208,32 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [-40, 0],

-                    'child2': [-10, 0],

-                },

-                'space-around': {

</del><span class="cx">                     'child1': [0, 0],

</span><del>-                    'child2': [30, 0],

-                },

-            },

-        },

-        'column-reverse': {

-            'ltr': {

-                'flex-start': {

-                    'child1': [0, 80],

-                    'child2': [0, 80],

-                },

-                'flex-end': {

-                    'child1': [0, 0],

</del><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><del>-                'center': {

-                    'child1': [0, 40],

-                    'child2': [0, 40],

-                },

-                'space-between': {

-                    'child1': [0, 80],

-                    'child2': [0, 80],

-                },

</del><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><del>-            'rtl': {

-                'flex-start': {

-                    'child1': [10, 80],

-                    'child2': [0, 80],

-                },

-                'flex-end': {

-                    'child1': [10, 0],

-                    'child2': [0, 0],

-                },

-                'center': {

-                    'child1': [10, 40],

-                    'child2': [0, 40],

-                },

-                'space-between': {

-                    'child1': [10, 80],

-                    'child2': [0, 80],

-                },

-                'space-around': {

-                    'child1': [10, 40],

-                    'child2': [0, 40],

-                },

-            },

</del><span class="cx">         },

</span><del>-    },

-    'horizontal-bt': {

-        'row': {

</del><ins>+        'column-reverse': {

</ins><span class="cx">             'ltr': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [0, 10],

-                    'child2': [0, 0],

-                },

-                'flex-end': {

-                    'child1': [80, 10],

-                    'child2': [80, 0],

-                },

-                'center': {

-                    'child1': [40, 10],

-                    'child2': [40, 0],

-                },

-                'space-between': {

-                    'child1': [0, 10],

-                    'child2': [0, 0],

-                },

-                'space-around': {

-                    'child1': [40, 10],

-                    'child2': [40, 0],

-                },

-            },

-            'rtl': {

-                'flex-start': {

-                    'child1': [40, 10],

-                    'child2': [70, 0],

-                },

-                'flex-end': {

-                    'child1': [-40, 10],

-                    'child2': [-10, 0],

-                },

-                'center': {

-                    'child1': [0, 10],

-                    'child2': [30, 0],

-                },

-                'space-between': {

-                    'child1': [40, 10],

-                    'child2': [70, 0],

-                },

-                'space-around': {

-                    'child1': [0, 10],

-                    'child2': [30, 0],

-                },

-            },

-        },

-        'column': {

-            'ltr': {

-                'flex-start': {

</del><span class="cx">                     'child1': [0, 40],

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [0, -40],

-                    'child2': [0, -10],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [0, 40],

</span><span class="lines">@@ -331,8 +240,8 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="lines">@@ -341,112 +250,20 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [10, -40],

-                    'child2': [0, -10],

-                },

-                'center': {

</del><span class="cx">                     'child1': [10, 0],

</span><del>-                    'child2': [0, 30],

-                },

-                'space-between': {

-                    'child1': [10, 40],

-                    'child2': [0, 70],

-                },

-                'space-around': {

-                    'child1': [10, 0],

-                    'child2': [0, 30],

-                },

-            },

-        },

-        'row-reverse': {

-            'ltr': {

-                'flex-start': {

-                    'child1': [80, 10],

-                    'child2': [80, 0],

-                },

-                'flex-end': {

-                    'child1': [0, 10],

</del><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [40, 10],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [80, 10],

-                    'child2': [80, 0],

-                },

-                'space-around': {

-                    'child1': [40, 10],

-                    'child2': [40, 0],

-                },

-            },

-            'rtl': {

-                'flex-start': {

-                    'child1': [-40, 10],

-                    'child2': [-10, 0],

-                },

-                'flex-end': {

-                    'child1': [40, 10],

-                    'child2': [70, 0],

-                },

-                'center': {

-                    'child1': [0, 10],

-                    'child2': [30, 0],

-                },

-                'space-between': {

-                    'child1': [-40, 10],

-                    'child2': [-10, 0],

-                },

-                'space-around': {

-                    'child1': [0, 10],

-                    'child2': [30, 0],

-                },

-            },

-        },

-        'column-reverse': {

-            'ltr': {

-                'flex-start': {

-                    'child1': [0, -40],

-                    'child2': [0, -10],

-                },

-                'flex-end': {

-                    'child1': [0, 40],

-                    'child2': [0, 70],

-                },

-                'center': {

-                    'child1': [0, 0],

-                    'child2': [0, 30],

-                },

-                'space-between': {

-                    'child1': [0, -40],

-                    'child2': [0, -10],

-                },

-                'space-around': {

-                    'child1': [0, 0],

-                    'child2': [0, 30],

-                },

-            },

-            'rtl': {

-                'flex-start': {

-                    'child1': [10, -40],

-                    'child2': [0, -10],

-                },

-                'flex-end': {

</del><span class="cx">                     'child1': [10, 40],

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><del>-                'center': {

-                    'child1': [10, 0],

-                    'child2': [0, 30],

-                },

-                'space-between': {

-                    'child1': [10, -40],

-                    'child2': [0, -10],

-                },

</del><span class="cx">                 'space-around': {

</span><del>-                    'child1': [10, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -459,12 +276,12 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [10, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [10, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [10, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [10, 0],

</span><span class="lines">@@ -471,8 +288,8 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [10, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="lines">@@ -481,12 +298,12 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [10, -40],

-                    'child2': [0, -10],

</del><ins>+                    'child1': [10, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [10, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [10, 40],

</span><span class="lines">@@ -493,8 +310,8 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [10, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -505,12 +322,12 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [-40, 0],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [40, 0],

</span><span class="lines">@@ -517,8 +334,8 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="lines">@@ -527,12 +344,12 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [-40, 10],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 10],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 10],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [40, 10],

</span><span class="lines">@@ -539,8 +356,8 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 10],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -547,8 +364,8 @@

</span><span class="cx">         'row-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [10, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [10, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [10, 0],

</span><span class="lines">@@ -555,22 +372,22 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [10, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [10, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [10, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [10, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [10, -40],

-                    'child2': [0, -10],

</del><ins>+                    'child1': [10, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [10, 40],

</span><span class="lines">@@ -577,16 +394,16 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [10, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [10, -40],

-                    'child2': [0, -10],

</del><ins>+                    'child1': [10, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [10, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [10, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -593,8 +410,8 @@

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [-40, 0],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [40, 0],

</span><span class="lines">@@ -601,22 +418,22 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [-40, 0],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [-40, 10],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 10],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [40, 10],

</span><span class="lines">@@ -623,16 +440,16 @@

</span><span class="cx">                     'child2': [70, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 10],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [-40, 10],

-                    'child2': [-10, 0],

</del><ins>+                    'child1': [0, 10],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 10],

-                    'child2': [30, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -645,12 +462,12 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [0, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [0, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [0, 0],

</span><span class="lines">@@ -657,8 +474,8 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="lines">@@ -667,12 +484,12 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [0, -40],

-                    'child2': [0, -10],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [0, 40],

</span><span class="lines">@@ -679,8 +496,8 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -691,12 +508,12 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [80, 0],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 0],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [0, 0],

</span><span class="lines">@@ -703,8 +520,8 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="lines">@@ -713,12 +530,12 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><del>-                    'child1': [80, 10],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 10],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [40, 10],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><span class="cx">                     'child1': [0, 10],

</span><span class="lines">@@ -725,8 +542,8 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [40, 10],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -733,8 +550,8 @@

</span><span class="cx">         'row-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [0, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [0, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [0, 0],

</span><span class="lines">@@ -741,22 +558,22 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [0, 80],

-                    'child2': [0, 80],

</del><ins>+                    'child1': [0, 40],

+                    'child2': [0, 70],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 40],

-                    'child2': [0, 40],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [0, -40],

-                    'child2': [0, -10],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [0, 40],

</span><span class="lines">@@ -763,16 +580,16 @@

</span><span class="cx">                     'child2': [0, 70],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [0, -40],

-                    'child2': [0, -10],

</del><ins>+                    'child1': [0, 0],

+                    'child2': [0, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [0, 0],

-                    'child2': [0, 30],

</del><ins>+                    'child1': [0, 20],

+                    'child2': [0, 35],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -779,8 +596,8 @@

</span><span class="cx">         'column-reverse': {

</span><span class="cx">             'ltr': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [80, 0],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 0],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [0, 0],

</span><span class="lines">@@ -787,22 +604,22 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [80, 0],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 0],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [40, 0],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 0],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">             'rtl': {

</span><span class="cx">                 'flex-start': {

</span><del>-                    'child1': [80, 10],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 10],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'flex-end': {

</span><span class="cx">                     'child1': [0, 10],

</span><span class="lines">@@ -809,16 +626,16 @@

</span><span class="cx">                     'child2': [0, 0],

</span><span class="cx">                 },

</span><span class="cx">                 'center': {

</span><del>-                    'child1': [40, 10],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-between': {

</span><del>-                    'child1': [80, 10],

-                    'child2': [80, 0],

</del><ins>+                    'child1': [40, 10],

+                    'child2': [70, 0],

</ins><span class="cx">                 },

</span><span class="cx">                 'space-around': {

</span><del>-                    'child1': [40, 10],

-                    'child2': [40, 0],

</del><ins>+                    'child1': [20, 10],

+                    'child2': [35, 0],

</ins><span class="cx">                 },

</span><span class="cx">             },

</span><span class="cx">         },

</span><span class="lines">@@ -825,7 +642,7 @@

</span><span class="cx">     },

</span><span class="cx"> };

</span><span class="cx"> 

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];

</ins><span class="cx"> var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpreferredwidthsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/preferred-widths-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/preferred-widths-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/preferred-widths-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,65 +1,50 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

</ins><span class="cx"> horizontal-tb overflowY row

</span><del>-PASS

</del><span class="cx"> horizontal-tb overflowX row

</span><del>-PASS

</del><span class="cx"> horizontal-tb overflowY column

</span><del>-PASS

</del><span class="cx"> horizontal-tb overflowX column

</span><del>-PASS

</del><span class="cx"> horizontal-tb overflowY row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb overflowX row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb overflowY column-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb overflowX column-reverse

</span><del>-PASS

-horizontal-bt overflowY row

-PASS

-horizontal-bt overflowX row

-PASS

-horizontal-bt overflowY column

-PASS

-horizontal-bt overflowX column

-PASS

-horizontal-bt overflowY row-reverse

-PASS

-horizontal-bt overflowX row-reverse

-PASS

-horizontal-bt overflowY column-reverse

-PASS

-horizontal-bt overflowX column-reverse

-PASS

</del><span class="cx"> vertical-lr overflowY row

</span><del>-PASS

</del><span class="cx"> vertical-lr overflowX row

</span><del>-PASS

</del><span class="cx"> vertical-lr overflowY column

</span><del>-PASS

</del><span class="cx"> vertical-lr overflowX column

</span><del>-PASS

</del><span class="cx"> vertical-lr overflowY row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr overflowX row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr overflowY column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr overflowX column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowY row

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowX row

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowY column

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowX column

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowY row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowX row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowY column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl overflowX column-reverse

</span><del>-PASS

</del><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpreferredwidthsorthogonalhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/preferred-widths-orthogonal.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/preferred-widths-orthogonal.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/preferred-widths-orthogonal.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,13 +2,13 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     float: left;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div {

</span><span class="cx">     margin: 2px 13px 8px 17px;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .flexbox &gt; div:not(.nested) {

</span><span class="cx">     width: 10px;

</span><span class="lines">@@ -43,17 +43,17 @@

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .nested {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #ddd;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .clear {

</span><span class="cx">     clear: both;

</span><span class="lines">@@ -72,7 +72,7 @@

</span><span class="cx"> &lt;br class=clear&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot; data-expected-height=115  data-expect-width=80&gt;

</span><del>-    &lt;div class=&quot;horizontal-tb nested&quot; data-expected-height=80  data-expect-width=50 style=&quot;min-height: 0px;&quot;&gt;

</del><ins>+    &lt;div class=&quot;horizontal-tb nested&quot; data-expected-height=80  data-expect-width=50&gt;

</ins><span class="cx">         &lt;div class=&quot;vertical-lr nested&quot; data-expected-height=80  data-expect-width=30&gt;

</span><span class="cx">             &lt;div&gt;&lt;/div&gt;

</span><span class="cx">             &lt;div&gt;&lt;/div&gt;

</span><span class="lines">@@ -93,7 +93,7 @@

</span><span class="cx"> &lt;br class=clear&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot; data-expected-height=65  data-expect-width=70&gt;

</span><del>-    &lt;div class=&quot;nested horizontal-tb&quot; data-expected-height=30  data-expect-width=40 style=&quot;min-height: 0px;&quot;&gt;

</del><ins>+    &lt;div class=&quot;nested horizontal-tb&quot; data-expected-height=30  data-expect-width=40&gt;

</ins><span class="cx">         &lt;div&gt;&lt;/div&gt;

</span><span class="cx">         &lt;div&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxpreferredwidthshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/preferred-widths.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/preferred-widths.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/preferred-widths.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,7 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx">     float: left;

</span><span class="cx"> }

</span><span class="lines">@@ -9,8 +9,8 @@

</span><span class="cx"> .flexbox &gt; div {

</span><span class="cx">     padding: 2px 13px 8px 17px;

</span><span class="cx">     margin: 2px 13px 8px 17px;

</span><del>-    -webkit-flex: none;

</del><span class="cx">     flex: none;

</span><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .title {

</span><span class="cx">     margin-top: 1em;

</span><span class="lines">@@ -27,35 +27,35 @@

</span><span class="cx">     overflow: auto;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row {

</span><del>-    -webkit-flex-flow: row;

</del><ins>+    flex-flow: row;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var scrollDirections = ['overflowY', 'overflowX'];

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelayoutalignitemsexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/relayout-align-items-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relayout-align-items-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/relayout-align-items-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,4 @@

</span><del>-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelayoutalignitemshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/relayout-align-items.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relayout-align-items.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/relayout-align-items.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -12,9 +12,12 @@

</span><span class="cx">     width: 50px;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div id=&quot;from-stretch&quot; class=&quot;flexbox&quot;&gt;

</span><span class="cx">     &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;90&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-expected-height=&quot;10&quot; data-offset-y=&quot;90&quot; class=&quot;align-self-auto&quot;&gt;&lt;/div&gt;

</span><span class="lines">@@ -36,8 +39,8 @@

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> document.body.offsetLeft;

</span><del>-document.getElementById(&quot;from-stretch&quot;).style.webkitAlignItems = &quot;flex-end&quot;;

-document.getElementById(&quot;to-stretch&quot;).style.webkitAlignItems = &quot;stretch&quot;;

</del><ins>+document.getElementById(&quot;from-stretch&quot;).style.alignItems = &quot;flex-end&quot;;

+document.getElementById(&quot;to-stretch&quot;).style.alignItems = &quot;stretch&quot;;

</ins><span class="cx"> checkLayout(&quot;.flexbox&quot;);

</span><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelayoutimageloadexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/relayout-image-load-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relayout-image-load-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/relayout-image-load-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,5 +1,6 @@

</span><ins>+

+PASS #test 1 

</ins><span class="cx"> Test to make sure that we properly relayout when an image loads. You should see a green 100x100 image.

</span><span class="cx"> 

</span><span class="cx">  

</span><span class="cx"> 

</span><del>-PASS

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelayoutimageloadhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/relayout-image-load.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relayout-image-load.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/relayout-image-load.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -4,9 +4,12 @@

</span><span class="cx"> &lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

</span><span class="cx"> &lt;style&gt;

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;p&gt;Test to make sure that we properly relayout when an image loads. You

</span><span class="cx"> should see a green 100x100 image.&lt;/p&gt;

</span><span class="cx"> &lt;div id=&quot;test&quot; class=&quot;flexbox&quot;&gt;

</span><span class="lines">@@ -16,8 +19,6 @@

</span><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;script&gt;

</span><del>-if (window.testRunner)

-    testRunner.waitUntilDone();

</del><span class="cx"> 

</span><span class="cx"> function changeImage()

</span><span class="cx"> {

</span><span class="lines">@@ -28,8 +29,6 @@

</span><span class="cx"> function imageLoaded()

</span><span class="cx"> {

</span><span class="cx">     checkLayout('#test')

</span><del>-    if (window.testRunner)

-        testRunner.notifyDone();

</del><span class="cx"> }

</span><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;/body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelposwithpercentagetopexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+This should be in the center of the container

+This is tall

+

+PASS .border 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelposwithpercentagetophtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/relpos-with-percentage-top.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,40 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+html, body {

+  margin: 0;

+}

+

+.border {

+  border:1px solid #000;

+}

+.width-50 {

+  width: 50%;

+}

+.flex {

+  display: flex;

+  flex-flow: row wrap;

+}

+.tall {

+  height: 300px;

+}

+.top-50 {

+  position: relative;

+  top: 50%;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.border')&quot;&gt;

+&lt;div class=&quot;border&quot;&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    &lt;div class=&quot;width-50&quot;&gt;

+      &lt;label class=&quot;top-50&quot; data-offset-y=&quot;151&quot;&gt;This should be in the center of the container&lt;/label&gt;

+    &lt;/div&gt;

+    &lt;div class=&quot;width-50&quot;&gt;

+      &lt;div class=&quot;tall&quot;&gt;

+        This is tall

+      &lt;/div&gt;

+    &lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelposwithscrollablewithabsposcrashexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,4 @@

<ins>+PASS if no crash or assertion failure.

+

+xxxxxxxxxxxxxxxxxxxxxx

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxrelposwithscrollablewithabsposcrashhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/relpos-with-scrollable-with-abspos-crash.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,16 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script&gt;

+    if (window.testRunner)

+        testRunner.dumpAsText();

+&lt;/script&gt;

+&lt;p&gt;PASS if no crash or assertion failure.&lt;/p&gt;

+&lt;div style=&quot;display:flex;&quot;&gt;

+    &lt;div&gt;

+        &lt;div style=&quot;position:relative; width:5em;&quot;&gt;

+            &lt;div style=&quot;overflow:auto;&quot;&gt;

+                &lt;div&gt;xxxxxxxxxxxxxxxxxxxxxx&lt;/div&gt;

+                &lt;div style=&quot;position:absolute;&quot;&gt;&lt;/div&gt;

+            &lt;/div&gt;

+        &lt;/div&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxresizemincontentflexboxexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

</span><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxresizemincontentflexboxhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/resize-min-content-flexbox.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,38 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;style&gt;

+body, html {

+  height: 100%;

+  margin: 0;

+}

+

+.flexbox.column {

+  min-height: min-content;

+  background: green;

+  height: 100%;

+}

+

+#content {

+  height: 1000px;

+  max-height: 100%;

+}

+&lt;/style&gt;

+

+&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;

+

+&lt;div class=&quot;flexbox column justify-content-center align-items-center&quot; data-expected-height=&quot;100&quot;&gt;

+  &lt;div id=&quot;content&quot; data-expected-height=&quot;100&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+  document.body.offsetHeight;

+  document.documentElement.style.height = '100px';

+

+  checkLayout('.flexbox');

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxresourcesboxorientbuttonjs"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/resources/box-orient-button.js (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/resources/box-orient-button.js                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/resources/box-orient-button.js        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,20 @@

</span><ins>+

+function setFlexDirection(element, flexDirection) {

+    element.style.webkitFlexDirection = flexDirection;

+    element.style.flexDirection = flexDirection;

+}

+

+function gebi(id) {

+    return document.getElementById(id);

+}

+

+setFlexDirection(gebi(&quot;toVertical&quot;), &quot;column&quot;);

+setFlexDirection(gebi(&quot;toHorizontal&quot;), &quot;row&quot;);

+

+var referenceHorizontalHeight = gebi(&quot;reference_horizontal&quot;).clientHeight;

+var referenceVerticalHeight = gebi(&quot;reference_vertical&quot;).clientHeight;

+test(function() { assert_equals(gebi('default').clientHeight, referenceHorizontalHeight); }, &quot;default height&quot;);

+test(function() { assert_equals(gebi('horizontal').clientHeight, referenceHorizontalHeight); }, &quot;horizontal height&quot;);

+test(function() { assert_equals(gebi('vertical').clientHeight, referenceVerticalHeight); }, &quot;vertical height&quot;);

+test(function() { assert_equals(gebi('toHorizontal').clientHeight, referenceHorizontalHeight); }, &quot;toHorizontal height&quot;);

+test(function() { assert_equals(gebi('toVertical').clientHeight, referenceVerticalHeight); }, &quot;toVertical height&quot;);

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxscrollbarsautoexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/scrollbars-auto-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/scrollbars-auto-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/scrollbars-auto-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,177 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script src=&quot;resources/scrollbars.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+.horizontal-header {

+  width: 120px;

+}

+.vertical-header {

+  width: 60px;

+}

+.container-row {

+  display: flex;

+  flex-direction: row;

+  align-items: flex-start;

+  justify-content: flex-start;

+}

+.container {

+  flex: none;

+  margin: 5px;

+}

+.ltr {

+  direction: ltr;

+}

+.rtl {

+  direction: rtl;

+}

+.horizontal {

+  writing-mode: horizontal-tb;

+}

+.flipped-blocks {

+  writing-mode: vertical-rl;

+}

+.flipped-lines {

+  writing-mode: vertical-lr;

+}

+.flex {

+  border: 2px solid red;

+  overflow: auto;

+  max-width: 100px;

+  max-height: 100px;

+  white-space: nowrap;

+  font-size: 0;

+}

+.row &gt; div, .row-reverse &gt; div {

+  display: inline-flex;

+  margin: 3px;

+}

+.column &gt; div, .column-reverse &gt; div {

+  display: flex;

+}

+

+/* Adjust margins to account for collapsing. */

+.ltr.horizontal &gt; .row &gt; .leaf3 {

+  margin-right: 0;

+}

+.ltr.flipped-blocks &gt; .row &gt; .leaf3, .ltr.flipped-lines &gt; .row &gt; .leaf3 {

+  margin-bottom: 0;

+}

+.rtl.horizontal &gt; .row &gt; .leaf3 {

+  margin-left: 0;

+}

+.rtl.flipped-blocks &gt; .row &gt; .leaf3, .rtl.flipped-lines &gt; .row &gt; .leaf3 {

+  margin-top: 0;

+}

+

+.ltr.horizontal &gt; .row-reverse &gt; .leaf3 {

+  margin-left: 0;

+}

+.ltr.flipped-blocks &gt; .row-reverse &gt; .leaf3, .ltr.flipped-lines &gt; .row-reverse &gt; .leaf3 {

+  margin-top: 0;

+}

+.rtl.horizontal &gt; .row-reverse &gt; .leaf3 {

+  margin-right: 0;

+}

+.rtl.flipped-blocks &gt; .row-reverse &gt; .leaf3, .rtl.flipped-lines &gt; .row-reverse &gt; .leaf3 {

+  margin-bottom: 0;

+}

+

+.horizontal &gt; .column &gt; .leaf1, .horizontal &gt; .column &gt; .leaf2 {

+  margin: 3px 3px 6px 3px;

+}

+.horizontal &gt; .column &gt; .leaf3 {

+  margin: 3px;

+}

+.flipped-blocks &gt; .column &gt; .leaf1, .flipped-blocks &gt; .column &gt; .leaf2 {

+  margin: 3px 3px 3px 6px;

+}

+.flipped-blocks &gt; .column &gt; .leaf3 {

+  margin: 3px;

+}

+.flipped-lines &gt; .column &gt; .leaf1, .flipped-lines &gt; .column &gt; .leaf2 {

+  margin: 3px 6px 3px 3px;

+}

+.flipped-lines &gt; .column &gt; .leaf3 {

+  margin: 3px;

+}

+

+.horizontal &gt; .column-reverse &gt; .leaf1, .horizontal &gt; .column-reverse &gt; .leaf2 {

+  margin: 6px 3px 3px 3px;

+}

+.horizontal &gt; .column-reverse &gt; .leaf3 {

+  margin: 0 3px 3px 3px;

+}

+.flipped-blocks &gt; .column-reverse &gt; .leaf1, .flipped-blocks &gt; .column-reverse &gt; .leaf2 {

+  margin: 3px 6px 3px 3px;

+}

+.flipped-blocks &gt; .column-reverse &gt; .leaf3 {

+  margin: 3px 0 3px 3px;

+}

+.flipped-lines &gt; .column-reverse &gt; .leaf1, .flipped-lines &gt; .column-reverse &gt; .leaf2 {

+  margin: 3px 3px 3px 6px;

+}

+.flipped-lines &gt; .column-reverse &gt; .leaf3 {

+  margin: 3px 3px 3px 0;

+}

+

+.flex &gt; div {

+  width: 30px;

+  height: 30px;

+  border: 2px solid blue;

+  flex-direction: column;

+  justify-content: center;

+}

+.flex &gt; div &gt; div {

+  font-size: 20px;

+  text-align: center;

+  flex: none;

+}

+&lt;/style&gt;

+

+&lt;div class=&quot;container-row&quot;&gt;

+  &lt;div class=&quot;vertical-header ltr horizontal&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header ltr horizontal&quot;&gt;ltr&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-lr&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header rtl horizontal&quot;&gt;rtl&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-lr&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+// Override createContentNode to emulate reverse flow direction.

+createContentNode = (flexDirection, textDirection, writingMode) =&gt; {

+  var flexNode = document.createElement(&quot;div&quot;);

+  flexNode.className = &quot;flex &quot; + flexDirection;

+  flexNode.title = &quot;flex-direction: &quot; + flexDirection + &quot;; direction: &quot; + textDirection + &quot;; writing-mode: &quot; + writingMode;

+  for (var i = 1; i &lt; 4; i++)

+    flexNode.appendChild(createLeafNode(flexDirection.endsWith(&quot;reverse&quot;) ? 4 - i : i));

+  return flexNode;

+}

+

+flexDirections.forEach((flexDirection) =&gt; {

+  var containerRow = createContainerRow(flexDirection);

+  document.body.appendChild(containerRow);

+});

+

+// Scroll all flex containers to the emulated beginning of flow.

+var nodes = document.querySelectorAll(&quot;.ltr &gt; .row-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 10000;

+  nodes[i].scrollTop = 10000;

+}

+nodes = document.querySelectorAll(&quot;.rtl &gt; .row-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 0;

+  nodes[i].scrollTop = 0;

+}

+nodes = document.querySelectorAll(&quot;.column-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 10000;

+  nodes[i].scrollTop = 10000;

+}

+nodes = document.querySelectorAll(&quot;.flipped-blocks &gt; .column-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 0;

+  nodes[i].scrollTop = 0;

+}

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxscrollbarsautohtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/scrollbars-auto.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/scrollbars-auto.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/scrollbars-auto.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,86 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script src=&quot;resources/scrollbars.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+.horizontal-header {

+  width: 120px;

+}

+.vertical-header {

+  width: 60px;

+}

+.container-row {

+  display: flex;

+  flex-direction: row;

+  align-items: flex-start;

+  justify-content: flex-start;

+}

+.container {

+  flex: none;

+  margin: 5px;

+}

+.ltr {

+  direction: ltr;

+}

+.rtl {

+  direction: rtl;

+}

+.horizontal {

+  writing-mode: horizontal-tb;

+}

+.flipped-blocks {

+  writing-mode: vertical-rl;

+}

+.flipped-lines {

+  writing-mode: vertical-lr;

+}

+.flex {

+  border: 2px solid red;

+  display: flex;

+  overflow: auto;

+  max-width: 100px;

+  max-height: 100px;

+}

+.column {

+  flex-direction: column;

+}

+.column-reverse {

+  flex-direction: column-reverse;

+}

+.row {

+  flex-direction: row;

+}

+.row-reverse {

+  flex-direction: row-reverse;

+}

+.flex &gt; .leaf1, .flex &gt; .leaf2, .flex &gt; .leaf3 {

+  flex: none;

+  width: 30px;

+  height: 30px;

+  border: 2px solid blue;

+  margin: 3px;

+  display: flex;

+  flex-direction: column;

+  justify-content: center;

+}

+.flex &gt; div &gt; div {

+  font-size: 20px;

+  text-align: center;

+  flex: none;

+}

+&lt;/style&gt;

+

+&lt;div class=&quot;container-row&quot;&gt;

+  &lt;div class=&quot;vertical-header ltr horizontal&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header ltr horizontal&quot;&gt;ltr&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-lr&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header rtl horizontal&quot;&gt;rtl&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-lr&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+flexDirections.forEach((flexDirection) =&gt; {

+  var containerRow = createContainerRow(flexDirection);

+  document.body.appendChild(containerRow);

+});

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxscrollbarsexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/scrollbars-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/scrollbars-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/scrollbars-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,177 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script src=&quot;resources/scrollbars.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+.horizontal-header {

+  width: 120px;

+}

+.vertical-header {

+  width: 60px;

+}

+.container-row {

+  display: flex;

+  flex-direction: row;

+  align-items: flex-start;

+  justify-content: flex-start;

+}

+.container {

+  flex: none;

+  margin: 5px;

+}

+.ltr {

+  direction: ltr;

+}

+.rtl {

+  direction: rtl;

+}

+.horizontal {

+  writing-mode: horizontal-tb;

+}

+.flipped-blocks {

+  writing-mode: vertical-rl;

+}

+.flipped-lines {

+  writing-mode: vertical-lr;

+}

+.flex {

+  border: 2px solid red;

+  overflow: scroll;

+  max-width: 100px;

+  max-height: 100px;

+  white-space: nowrap;

+  font-size: 0;

+}

+.row &gt; div, .row-reverse &gt; div {

+  display: inline-flex;

+  margin: 3px;

+}

+.column &gt; div, .column-reverse &gt; div {

+  display: flex;

+}

+

+/* Adjust margins to account for collapsing. */

+.ltr.horizontal &gt; .row &gt; .leaf3 {

+  margin-right: 0;

+}

+.ltr.flipped-blocks &gt; .row &gt; .leaf3, .ltr.flipped-lines &gt; .row &gt; .leaf3 {

+  margin-bottom: 0;

+}

+.rtl.horizontal &gt; .row &gt; .leaf3 {

+  margin-left: 0;

+}

+.rtl.flipped-blocks &gt; .row &gt; .leaf3, .rtl.flipped-lines &gt; .row &gt; .leaf3 {

+  margin-top: 0;

+}

+

+.ltr.horizontal &gt; .row-reverse &gt; .leaf3 {

+  margin-left: 0;

+}

+.ltr.flipped-blocks &gt; .row-reverse &gt; .leaf3, .ltr.flipped-lines &gt; .row-reverse &gt; .leaf3 {

+  margin-top: 0;

+}

+.rtl.horizontal &gt; .row-reverse &gt; .leaf3 {

+  margin-right: 0;

+}

+.rtl.flipped-blocks &gt; .row-reverse &gt; .leaf3, .rtl.flipped-lines &gt; .row-reverse &gt; .leaf3 {

+  margin-bottom: 0;

+}

+

+.horizontal &gt; .column &gt; .leaf1, .horizontal &gt; .column &gt; .leaf2 {

+  margin: 3px 3px 6px 3px;

+}

+.horizontal &gt; .column &gt; .leaf3 {

+  margin: 3px;

+}

+.flipped-blocks &gt; .column &gt; .leaf1, .flipped-blocks &gt; .column &gt; .leaf2 {

+  margin: 3px 3px 3px 6px;

+}

+.flipped-blocks &gt; .column &gt; .leaf3 {

+  margin: 3px;

+}

+.flipped-lines &gt; .column &gt; .leaf1, .flipped-lines &gt; .column &gt; .leaf2 {

+  margin: 3px 6px 3px 3px;

+}

+.flipped-lines &gt; .column &gt; .leaf3 {

+  margin: 3px;

+}

+

+.horizontal &gt; .column-reverse &gt; .leaf1, .horizontal &gt; .column-reverse &gt; .leaf2 {

+  margin: 6px 3px 3px 3px;

+}

+.horizontal &gt; .column-reverse &gt; .leaf3 {

+  margin: 0 3px 3px 3px;

+}

+.flipped-blocks &gt; .column-reverse &gt; .leaf1, .flipped-blocks &gt; .column-reverse &gt; .leaf2 {

+  margin: 3px 6px 3px 3px;

+}

+.flipped-blocks &gt; .column-reverse &gt; .leaf3 {

+  margin: 3px 0 3px 3px;

+}

+.flipped-lines &gt; .column-reverse &gt; .leaf1, .flipped-lines &gt; .column-reverse &gt; .leaf2 {

+  margin: 3px 3px 3px 6px;

+}

+.flipped-lines &gt; .column-reverse &gt; .leaf3 {

+  margin: 3px 3px 3px 0;

+}

+

+.flex &gt; div {

+  width: 30px;

+  height: 30px;

+  border: 2px solid blue;

+  flex-direction: column;

+  justify-content: center;

+}

+.flex &gt; div &gt; div {

+  font-size: 20px;

+  text-align: center;

+  flex: none;

+}

+&lt;/style&gt;

+

+&lt;div class=&quot;container-row&quot;&gt;

+  &lt;div class=&quot;vertical-header ltr horizontal&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header ltr horizontal&quot;&gt;ltr&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-lr&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header rtl horizontal&quot;&gt;rtl&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-lr&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+// Override createContentNode to emulate reverse flow direction.

+createContentNode = (flexDirection, textDirection, writingMode) =&gt; {

+  var flexNode = document.createElement(&quot;div&quot;);

+  flexNode.className = &quot;flex &quot; + flexDirection;

+  flexNode.title = &quot;flex-direction: &quot; + flexDirection + &quot;; direction: &quot; + textDirection + &quot;; writing-mode: &quot; + writingMode;

+  for (var i = 1; i &lt; 4; i++)

+    flexNode.appendChild(createLeafNode(flexDirection.endsWith(&quot;reverse&quot;) ? 4 - i : i));

+  return flexNode;

+}

+

+flexDirections.forEach((flexDirection) =&gt; {

+  var containerRow = createContainerRow(flexDirection);

+  document.body.appendChild(containerRow);

+});

+

+// Scroll all flex containers to the emulated beginning of flow.

+var nodes = document.querySelectorAll(&quot;.ltr &gt; .row-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 10000;

+  nodes[i].scrollTop = 10000;

+}

+nodes = document.querySelectorAll(&quot;.rtl &gt; .row-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 0;

+  nodes[i].scrollTop = 0;

+}

+nodes = document.querySelectorAll(&quot;.column-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 10000;

+  nodes[i].scrollTop = 10000;

+}

+nodes = document.querySelectorAll(&quot;.flipped-blocks &gt; .column-reverse&quot;);

+for (var i = 0; i &lt; nodes.length; i++) {

+  nodes[i].scrollLeft = 0;

+  nodes[i].scrollTop = 0;

+}

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxscrollbarshtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/scrollbars.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/scrollbars.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/scrollbars.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,86 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;script src=&quot;resources/scrollbars.js&quot;&gt;&lt;/script&gt;

+&lt;style&gt;

+.horizontal-header {

+  width: 120px;

+}

+.vertical-header {

+  width: 60px;

+}

+.container-row {

+  display: flex;

+  flex-direction: row;

+  align-items: flex-start;

+  justify-content: flex-start;

+}

+.container {

+  flex: none;

+  margin: 5px;

+}

+.ltr {

+  direction: ltr;

+}

+.rtl {

+  direction: rtl;

+}

+.horizontal {

+  writing-mode: horizontal-tb;

+}

+.flipped-blocks {

+  writing-mode: vertical-rl;

+}

+.flipped-lines {

+  writing-mode: vertical-lr;

+}

+.flex {

+  border: 2px solid red;

+  display: flex;

+  overflow: scroll;

+  max-width: 100px;

+  max-height: 100px;

+}

+.column {

+  flex-direction: column;

+}

+.column-reverse {

+  flex-direction: column-reverse;

+}

+.row {

+  flex-direction: row;

+}

+.row-reverse {

+  flex-direction: row-reverse;

+}

+.flex &gt; .leaf1, .flex &gt; .leaf2, .flex &gt; .leaf3 {

+  flex: none;

+  width: 30px;

+  height: 30px;

+  border: 2px solid blue;

+  margin: 3px;

+  display: flex;

+  flex-direction: column;

+  justify-content: center;

+}

+.flex &gt; div &gt; div {

+  font-size: 20px;

+  text-align: center;

+  flex: none;

+}

+&lt;/style&gt;

+

+&lt;div class=&quot;container-row&quot;&gt;

+  &lt;div class=&quot;vertical-header ltr horizontal&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header ltr horizontal&quot;&gt;ltr&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header ltr flipped-blocks&quot;&gt;ltr&lt;br&gt;vertical-lr&lt;/div&gt;

+  &lt;div class=&quot;horizontal-header rtl horizontal&quot;&gt;rtl&lt;br&gt;horizontal-tb&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-rl&lt;/div&gt;

+  &lt;div class=&quot;vertical-header rtl flipped-blocks&quot;&gt;rtl&lt;br&gt;vertical-lr&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+flexDirections.forEach((flexDirection) =&gt; {

+  var containerRow = createContainerRow(flexDirection);

+  document.body.appendChild(containerRow);

+});

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxshrinkingcolumnflexboxexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

</span><ins>+

+PASS body 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxshrinkingcolumnflexboxhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/shrinking-column-flexbox.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,52 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+

+&lt;style&gt;

+body {

+  width: 800px;

+  height: 600px;

+}

+

+.green {

+  background: green;

+}

+

+.blue {

+  background: blue;

+}

+

+.inner {

+  height: 200px;

+}

+

+.small {

+  height: 100px;

+}

+&lt;/style&gt;

+

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+

+&lt;script&gt;

+onload = function() {

+  document.body.offsetWidth;

+  document.getElementById(&quot;target&quot;).classList.add(&quot;small&quot;);

+

+  checkLayout(&quot;body&quot;);

+};

+&lt;/script&gt;

+

+&lt;body class=&quot;flexbox column&quot;&gt;

+

+&lt;div class=&quot;flexbox column flex-one-one-auto&quot;&gt;

+  &lt;div class=&quot;flex-one-one-auto green&quot; data-expected-height=&quot;250&quot; id=&quot;target&quot;&gt;

+    &lt;div class=&quot;inner&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;flex-one-one-auto blue&quot; data-expected-height=&quot;350&quot;&gt;

+    &lt;div class=&quot;inner&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div id=log&gt;&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchaftersiblingsizechangeexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>-PASS

</del><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchaftersiblingsizechangehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/stretch-after-sibling-size-change.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,9 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><span class="cx"> &lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;script&gt;

</span><span class="cx"> window.onload = function()

</span><span class="cx"> {

</span><span class="lines">@@ -12,6 +14,7 @@

</span><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div data-expected-width=&quot;100&quot; data-expected-height=&quot;20&quot; class=&quot;flexbox&quot; style=&quot;width: 100px&quot;&gt;

</span><span class="cx">     &lt;div id=a class=&quot;flex-one&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot; style=&quot;background-color: blue; height: 30px;&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div id=b class=&quot;flex-one&quot; data-expected-width=&quot;50&quot; data-expected-height=&quot;20&quot; style=&quot;background-color: green&quot;&gt;&lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchinputincolumnexpectedhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/stretch-input-in-column-expected.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretch-input-in-column-expected.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/stretch-input-in-column-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,8 +6,7 @@

</span><span class="cx">     background-color: grey;

</span><span class="cx"> }

</span><span class="cx"> .flexbox &gt; * {

</span><del>-    -webkit-flex: 1;

-    -moz-flex: 1;

</del><ins>+    flex: 1;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> &lt;body&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchsimplifiedlayoutexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/stretch-simplified-layout-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretch-simplified-layout-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/stretch-simplified-layout-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1 +1,3 @@

</span><del>-PASS

</del><ins>+

+PASS .flexbox 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchsimplifiedlayouthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/stretch-simplified-layout.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretch-simplified-layout.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/stretch-simplified-layout.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2,7 +2,9 @@

</span><span class="cx"> &lt;html&gt;

</span><span class="cx"> &lt;head&gt;

</span><span class="cx"> &lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;script&gt;

</span><span class="cx"> window.onload = function() {

</span><span class="cx">     document.body.offsetHeight;

</span><span class="lines">@@ -13,6 +15,7 @@

</span><span class="cx"> &lt;/script&gt;

</span><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div class=&quot;flexbox&quot; style=&quot;height: 100px;&quot; data-expected-height=&quot;100&quot;&gt;

</span><span class="cx">     &lt;div style=&quot;width: 100%; overflow: auto; padding-bottom: 100px; background-color: red;&quot; data-expected-height=&quot;100&quot;&gt;

</span><span class="cx">         &lt;div style=&quot;position: relative; height: 100px; background-color: green;&quot; data-expected-height=&quot;100&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchtablechildexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/stretch-table-child-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretch-table-child-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/stretch-table-child-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,3 @@

</span><ins>+

+PASS .test 1 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchtablechildhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/stretch-table-child.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretch-table-child.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/stretch-table-child.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,39 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;style&gt;

+.container {

+    display: flex;

+    flex-direction: column;

+    height: 100px;

+    width: 50px;

+}

+.first {

+    flex: 1 1 auto;

+}

+.test {

+    flex: 0 0 auto;

+    background-color: green;

+    display: flex;

+}

+td {

+    padding: 23px;

+}

+&lt;/style&gt;

+&lt;/head&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.test')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+&lt;div class=&quot;container&quot;&gt;

+    &lt;div class=&quot;first&quot;&gt;

+    &lt;/div&gt;

+    &lt;div class=&quot;test&quot; data-expected-height=50&gt;

+        &lt;table&gt;

+            &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;

+        &lt;/table&gt;

+    &lt;/div&gt;

+&lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchedchildshrinkonrelayoutexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,8 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchedchildshrinkonrelayouthtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,73 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;style&gt;

+.flexbox {

+    display: flex;

+    background: papayawhip;

+    border: 1px solid midnightblue;

+    margin: 1em;

+    width: 50px;

+}

+

+.flexbox &gt; div {

+    margin: 5px;

+    min-width: 10px;

+    min-height: 10px;

+    background-color: lawngreen;

+}

+

+.column {

+    flex-flow: column;

+}

+

+.horizontal-tb {

+    writing-mode: horizontal-tb;

+}

+.vertical-lr {

+    writing-mode: vertical-lr;

+}

+

+.largeitem {

+    height: 200px;

+    width: 200px;

+    margin: 5px;

+}

+&lt;/style&gt;

+&lt;/head&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot;&gt;

+  &lt;div data-expected-height=10 data-expected-width=10&gt;&lt;/div&gt;

+  &lt;div class=&quot;largeitem&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div data-expected-height=10 data-expected-width=40&gt;&lt;/div&gt;

+  &lt;div class=&quot;largeitem&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;div class=&quot;flexbox&quot;&gt;

+  &lt;div class=&quot;horizontal-tb&quot; data-expected-height=10 data-expected-width=10&gt;&lt;/div&gt;

+  &lt;div class=&quot;largeitem&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;horizontal-tb&quot; data-expected-height=10 data-expected-width=40&gt;&lt;/div&gt;

+  &lt;div class=&quot;largeitem&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox&quot;&gt;

+  &lt;div class=&quot;vertical-lr&quot; data-expected-height=10 data-expected-width=10&gt;&lt;/div&gt;

+  &lt;div class=&quot;largeitem&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;div class=&quot;flexbox column&quot;&gt;

+  &lt;div class=&quot;vertical-lr&quot; data-expected-height=10 data-expected-width=40&gt;&lt;/div&gt;

+  &lt;div class=&quot;largeitem&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+&lt;script&gt;

+document.body.offsetTop;

+var targets = document.getElementsByClassName('largeitem');

+for (var i = targets.length - 1; i &gt;= 0; i--) {

+  targets[i].remove();

+};

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchingorthogonalflowsexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+

+&lt;p&gt;You should see no red.&lt;/p&gt;

+

+&lt;div style=&quot;height: 40px; background-color: green;&quot;&gt;&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstretchingorthogonalflowshtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/stretching-orthogonal-flows.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,9 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+

+&lt;p&gt;You should see no red.&lt;/p&gt;

+

+&lt;div class=&quot;flexbox column align-items-stretch&quot; style=&quot;background-color: red;&quot;&gt;

+  &lt;div style=&quot;background-color: green; height: 20px;&quot;&gt;&lt;/div&gt;

+  &lt;div style=&quot;writing-mode: vertical-lr; background-color: green; height: 20px;&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstylechangeexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/style-change-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/style-change-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/style-change-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,8 +1,10 @@

</span><ins>+

+PASS .flexbox 1 

+PASS .flexbox 1 

+PASS .flexbox 1 

+PASS .flexbox 1 

+PASS .flexbox 1 

+PASS .flexbox 1 

</ins><span class="cx"> This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.

</span><span class="cx"> 

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxstylechangehtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/style-change.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/style-change.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/style-change.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -5,7 +5,7 @@

</span><span class="cx">     margin: 0;

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="lines">@@ -24,14 +24,17 @@

</span><span class="cx">   background-color: yellow !important;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;p&gt;This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.&lt;/p&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div id=&quot;flexbox&quot; class=&quot;flexbox&quot; style=&quot;width: 300px; height: 300px;&quot;&gt;

</span><del>-  &lt;div id=&quot;a&quot; style=&quot;-webkit-flex: 0 0 auto; width: 100px; height: 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div id=&quot;b&quot; style=&quot;-webkit-flex: 0 0 auto; width: 100px; height: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div id=&quot;a&quot; style=&quot;flex: 0 0 auto; width: 100px; height: 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div id=&quot;b&quot; style=&quot;flex: 0 0 auto; width: 100px; height: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;script&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -50,21 +53,21 @@

</span><span class="cx"> 

</span><span class="cx"> checkValues(0, 0, 100, 0);

</span><span class="cx"> 

</span><del>-flexbox.style.webkitJustifyContent = &quot;flex-end&quot;;

</del><ins>+flexbox.style.justifyContent = &quot;flex-end&quot;;

</ins><span class="cx"> checkValues(100, 0, 200, 0);

</span><span class="cx"> 

</span><del>-flexbox.style.webkitAlignItems = &quot;flex-end&quot;;

</del><ins>+flexbox.style.alignItems = &quot;flex-end&quot;;

</ins><span class="cx"> checkValues(100, 200, 200, 200);

</span><span class="cx"> 

</span><del>-bDiv.style.webkitOrder = -1;

</del><ins>+bDiv.style.order = -1;

</ins><span class="cx"> checkValues(200, 200, 100, 200);

</span><span class="cx"> 

</span><del>-aDiv.style.webkitAlignSelf = &quot;flex-start&quot;;

</del><ins>+aDiv.style.alignSelf = &quot;flex-start&quot;;

</ins><span class="cx"> checkValues(200, 0, 100, 200);

</span><span class="cx"> 

</span><span class="cx"> flexbox.style.width = &quot;100px&quot;;

</span><del>-flexbox.style.webkitFlexWrap = &quot;wrap&quot;;

-flexbox.style.webkitAlignContent = &quot;flex-end&quot;;

</del><ins>+flexbox.style.flexWrap = &quot;wrap&quot;;

+flexbox.style.alignContent = &quot;flex-end&quot;;

</ins><span class="cx"> checkValues(0, 200, 0, 100);

</span><span class="cx"> 

</span><span class="cx"> &lt;/script&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxtextoverflowonflexboxexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,26 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;style&gt;

+div.flex {

+  display: flex;

+  width: 100px;

+  overflow: hidden;

+}

+&lt;/style&gt;

+&lt;/head&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    AAAAAAAAAAAAAAAAAAAA

+  &lt;/div&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    &lt;b&gt;bbbbbbbbbbbbbbbbbbbb&lt;/b&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    &lt;div&gt;cccccccccccccccccccc&lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    DDDDDDDDDDDDDDDDDDDD&lt;b&gt;ee&lt;/b&gt;FFFFFFFFFFFFFFFFFFFF

+  &lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxtextoverflowonflexboxhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/text-overflow-on-flexbox.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,27 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;style&gt;

+div.flex {

+  display: flex;

+  width: 100px;

+  overflow: hidden;

+  text-overflow: ellipsis;

+}

+&lt;/style&gt;

+&lt;/head&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    AAAAAAAAAAAAAAAAAAAA

+  &lt;/div&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    &lt;b&gt;bbbbbbbbbbbbbbbbbbbb&lt;/b&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    &lt;div&gt;cccccccccccccccccccc&lt;/div&gt;

+  &lt;/div&gt;

+  &lt;div class=&quot;flex&quot;&gt;

+    DDDDDDDDDDDDDDDDDDDD&lt;b&gt;ee&lt;/b&gt;FFFFFFFFFFFFFFFFFFFF

+  &lt;/div&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxtruecenteringexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/true-centering-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/true-centering-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/true-centering-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,71 +1,57 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+PASS .flexbox 20 

+PASS .flexbox 21 

+PASS .flexbox 22 

+PASS .flexbox 23 

+PASS .flexbox 24 

+PASS .flexbox 25 

+PASS .flexbox 26 

+PASS .flexbox 27 

+PASS .flexbox 28 

+PASS .flexbox 29 

+PASS .flexbox 30 

+PASS .flexbox 31 

</ins><span class="cx"> horizontal-tb ltr row

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl row-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb ltr column-reverse

</span><del>-PASS

</del><span class="cx"> horizontal-tb rtl column-reverse

</span><del>-PASS

-horizontal-bt ltr row

-PASS

-horizontal-bt rtl row

-PASS

-horizontal-bt ltr column

-PASS

-horizontal-bt rtl column

-PASS

-horizontal-bt ltr row-reverse

-PASS

-horizontal-bt rtl row-reverse

-PASS

-horizontal-bt ltr column-reverse

-PASS

-horizontal-bt rtl column-reverse

-PASS

</del><span class="cx"> vertical-lr ltr row

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr ltr column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-lr rtl column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl row-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl ltr column-reverse

</span><del>-PASS

</del><span class="cx"> vertical-rl rtl column-reverse

</span><del>-PASS

</del><ins>+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxtruecenteringhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/true-centering.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/true-centering.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/true-centering.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -4,7 +4,7 @@

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 100px;

</span><span class="cx">     height: 100px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: #aaa;

</span><span class="cx">     position: relative;

</span><span class="cx"> }

</span><span class="lines">@@ -11,7 +11,7 @@

</span><span class="cx"> .flexbox &gt; div {

</span><span class="cx">     height: 110px;

</span><span class="cx">     width: 60px;

</span><del>-    -webkit-flex: none;

</del><ins>+    flex: none;

</ins><span class="cx"> }

</span><span class="cx"> .vertical &gt; div {

</span><span class="cx">     width: 110px;

</span><span class="lines">@@ -30,67 +30,67 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> .horizontal-tb {

</span><del>-    -webkit-writing-mode: horizontal-tb;

</del><ins>+    writing-mode: horizontal-tb;

</ins><span class="cx"> }

</span><del>-.horizontal-bt {

-    -webkit-writing-mode: horizontal-bt;

-}

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> .row-reverse {

</span><del>-    -webkit-flex-flow: row-reverse;

</del><ins>+    flex-flow: row-reverse;

</ins><span class="cx"> }

</span><span class="cx"> .column {

</span><del>-    -webkit-flex-flow: column;

</del><ins>+    flex-flow: column;

</ins><span class="cx"> }

</span><span class="cx"> .column-reverse {

</span><del>-    -webkit-flex-flow: column-reverse;

</del><ins>+    flex-flow: column-reverse;

</ins><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: center; -webkit-justify-content: center;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: center; justify-content: center;&quot;&gt;

</ins><span class="cx">     &lt;div data-offset-x=&quot;-10&quot; data-offset-y=&quot;-5&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;50&quot; data-offset-y=&quot;-5&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox row-reverse&quot; style=&quot;-webkit-align-items: center; -webkit-justify-content: center;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox row-reverse&quot; style=&quot;align-items: center; justify-content: center;&quot;&gt;

</ins><span class="cx">     &lt;div data-offset-x=&quot;50&quot; data-offset-y=&quot;-5&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;-10&quot; data-offset-y=&quot;-5&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox column vertical&quot; style=&quot;-webkit-align-items: center; -webkit-justify-content: center;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox column vertical&quot; style=&quot;align-items: center; justify-content: center;&quot;&gt;

</ins><span class="cx">     &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;-10&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox column-reverse vertical&quot; style=&quot;-webkit-align-items: center; -webkit-justify-content: center;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox column-reverse vertical&quot; style=&quot;align-items: center; justify-content: center;&quot;&gt;

</ins><span class="cx">     &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;50&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;-5&quot; data-offset-y=&quot;-10&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: center; -webkit-justify-content: space-around;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: center; justify-content: space-around;&quot;&gt;

</ins><span class="cx">     &lt;div data-offset-x=&quot;-10&quot; data-offset-y=&quot;-5&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-offset-x=&quot;50&quot; data-offset-y=&quot;-5&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: flex-start; -webkit-justify-content: flex-start;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: flex-start; justify-content: flex-start;&quot;&gt;

</ins><span class="cx">     &lt;div data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-offset-x=60 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div class=&quot;flexbox&quot; style=&quot;-webkit-align-items: flex-start; -webkit-justify-content: space-between;&quot;&gt;

</del><ins>+&lt;div class=&quot;flexbox&quot; style=&quot;align-items: flex-start; justify-content: space-between;&quot;&gt;

</ins><span class="cx">     &lt;div data-offset-x=0 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx">     &lt;div data-offset-x=60 data-offset-y=0&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;script&gt;

</span><del>-var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];

</del><ins>+var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'];

</ins><span class="cx"> var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];

</span><span class="cx"> var directions = ['ltr', 'rtl'];

</span><span class="cx"> 

</span><span class="lines">@@ -123,7 +123,7 @@

</span><span class="cx">                     isReverse = direction == 'ltr';

</span><span class="cx">                     break;

</span><span class="cx">                 case 'column':

</span><del>-                    isReverse = writingMode == 'vertical-rl' || writingMode == 'horizontal-bt';

</del><ins>+                    isReverse = writingMode == 'vertical-rl';

</ins><span class="cx">                     break;

</span><span class="cx">                 case 'column-reverse':

</span><span class="cx">                     isReverse = writingMode == 'vertical-lr' || writingMode == 'horizontal-tb';

</span><span class="lines">@@ -140,7 +140,7 @@

</span><span class="cx">             }

</span><span class="cx"> 

</span><span class="cx">             var container = document.createElement('div');

</span><del>-            container.innerHTML = '&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; style=&quot;-webkit-align-items: center; -webkit-justify-content: center;&quot;&gt;\n' +

</del><ins>+            container.innerHTML = '&lt;div class=&quot;flexbox ' + flexboxClassName + '&quot; style=&quot;align-items: center; justify-content: center;&quot;&gt;\n' +

</ins><span class="cx">                 '&lt;div ' + firstChildExpected + '&gt;&lt;/div&gt;\n' +

</span><span class="cx">                 '&lt;div ' + lastChildExpected + '&gt;&lt;/div&gt;\n' +

</span><span class="cx">             '&lt;/div&gt;';

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxundefinedminwidthexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/undefined-min-width-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/undefined-min-width-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/undefined-min-width-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,4 @@

</span><ins>+

+PASS .flexbox 1 

+Test to make sure that we do not assert on this code.

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxundefinedminwidthhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/undefined-min-width.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/undefined-min-width.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/undefined-min-width.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,15 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+Test to make sure that we do not assert on this code.

+

+&lt;div class=&quot;flexbox column&quot; style=&quot;max-height: 0; overflow: hidden; line-height: 13px;&quot; data-expected-height=&quot;0&quot;&gt;

+    &lt;div style=&quot;min-height: 100%;&quot; data-expected-height=&quot;0&quot;&gt;This is a flex item.&lt;/div&gt;

+    &lt;div style=&quot;flex: none;&quot; data-expected-height=&quot;13&quot;&gt;Inflexible&lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxverticalaligndonoteffectflexitemsexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,20 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href='resources/flexbox.css' rel='stylesheet'&gt;

+

+&lt;style&gt;

+.flexbox {

+  background-color: lightgrey;

+}

+&lt;/style&gt;

+

+&lt;p&gt;This test checks that vertical-align should have no effect on a flex item

+i.e flex items' content should not be shifted by the vertical-align&lt;/p&gt;

+

+&lt;div class='flexbox'&gt;

+  &lt;!-- flex item: block child --&gt;

+  &lt;div&gt;block&lt;/div&gt;

+  &lt;!-- flex item: anonymous block box around inline content --&gt;

+  anonymous item 2

+  &lt;!-- flex item: inline child --&gt;

+  &lt;span&gt;item 3&lt;/span&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxverticalaligndonoteffectflexitemshtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/vertical-align-do-not-effect-flex-items.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,26 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;link href='resources/flexbox.css' rel='stylesheet'&gt;

+

+&lt;style&gt;

+.flexbox {

+  background-color: lightgrey;

+}

+#item1 {

+  vertical-align: 10px;

+}

+#item3 {

+  vertical-align: 30px;

+}

+&lt;/style&gt;

+

+&lt;p&gt;This test checks that vertical-align should have no effect on a flex item

+i.e flex items' content should not be shifted by the vertical-align&lt;/p&gt;

+

+&lt;div class='flexbox'&gt;

+  &lt;!-- flex item: block child --&gt;

+  &lt;div id='item1'&gt;block&lt;/div&gt;

+  &lt;!-- flex item: anonymous block box around inline content --&gt;

+  anonymous item 2

+  &lt;!-- flex item: inline child --&gt;

+  &lt;span id='item3'&gt;item 3&lt;/span&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxverticalflexboxpercentageignoredexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,16 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;style&gt;

+.flexbox {

+    max-height: 10px;

+    overflow: hidden;

+}

+&lt;/style&gt;

+

+&lt;body&gt;

+

+&lt;div class=&quot;flexbox&quot;&gt;

+    &lt;div&gt;

+        The height here should be ignored.

+    &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxverticalflexboxpercentageignoredhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/vertical-flexbox-percentage-ignored.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,17 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox {

+    max-height: 10px;

+    overflow: hidden;

+}

+&lt;/style&gt;

+

+&lt;body&gt;

+

+&lt;div class=&quot;flexbox column&quot;&gt;

+    &lt;div style=&quot;height: 1%&quot;&gt;

+        The height here should be ignored.

+    &lt;/div&gt;

+&lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwhitespaceinflexitemexpectedhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem-expected.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem-expected.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem-expected.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,18 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+  .a {

+    flex: none;

+    width: 30px;

+    background: salmon;

+  }

+&lt;/style&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flexbox justify-content-space-around&quot;&gt;

+    &lt;div class=&quot;a&quot;&gt;&lt;/div&gt;

+  &lt;/div&gt;

+

+  &lt;div class=&quot;flexbox&quot;&gt;

+    &lt;b&gt;foo&lt;/b&gt;&lt;b&gt;bar&lt;/b&gt;

+  &lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwhitespaceinflexitemhtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/whitespace-in-flexitem.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,19 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+  .flexbox { white-space: pre; }

+  .a {

+    flex: none;

+    width: 30px;

+    background: salmon;

+  }

+&lt;/style&gt;

+&lt;body&gt;

+  &lt;div class=&quot;flexbox justify-content-space-around&quot;&gt;

+    &lt;div class=&quot;a&quot;&gt;&lt;/div&gt; &amp;#9;

+  &lt;/div&gt;

+

+  &lt;div class=&quot;flexbox&quot;&gt;

+    &lt;b&gt;foo&lt;/b&gt; &lt;b&gt;bar&lt;/b&gt;

+  &lt;/div&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwidthchangeandrelayoutchildrenexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,2 +1,3 @@

</span><ins>+

+PASS #container 1 

</ins><span class="cx"> This div should be 200px wide.

</span><del>-PASS

</del></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwidthchangeandrelayoutchildrenhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/width-change-and-relayout-children.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -12,9 +12,12 @@

</span><span class="cx">     background-color: salmon;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;/head&gt;

</span><span class="cx"> &lt;body&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;div id=&quot;container&quot; style=&quot;width: 100px&quot; data-expected-width=&quot;200&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox column&quot; data-expected-width=&quot;200&quot;&gt;

</span><span class="cx">     &lt;div class=&quot;flexitem&quot; data-expected-width=&quot;200&quot;&gt;

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwrappingcolumndynamicchangesexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes-expected.txt (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes-expected.txt                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,5 @@

</span><ins>+

+PASS .flexbox 1 

+The green boxes should all be within the black box

+

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwrappingcolumndynamicchangeshtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes.html (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes.html                                (rev 0)

+++ trunk/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,35 @@

</span><ins>+&lt;!DOCTYPE html&gt;

+&lt;html&gt;

+&lt;link href=&quot;resources/flexbox.css&quot; rel=&quot;stylesheet&quot;&gt;

+&lt;style&gt;

+.flexbox {

+  width: 600px;

+  height: 160px;

+  outline: 2px solid black;

+}

+.item {

+  height: 20px;

+  background-color: green;

+  margin: 5px;

+}

+&lt;/style&gt;

+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

+&lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

+&lt;div id=log&gt;&lt;/div&gt;

+

+&lt;p&gt;The green boxes should all be within the black box&lt;/p&gt;

+

+&lt;div class=&quot;flexbox column wrap&quot; id=&quot;test&quot;&gt;

+  &lt;div class=&quot;item&quot; data-expected-width=&quot;290&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;item&quot; data-expected-width=&quot;290&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;item&quot; data-expected-width=&quot;290&quot;&gt;&lt;/div&gt;

+  &lt;div class=&quot;item&quot; data-expected-width=&quot;290&quot;&gt;&lt;/div&gt;

+&lt;/div&gt;

+

+&lt;script&gt;

+var flex = document.getElementById(&quot;test&quot;);

+flex.offsetWidth;

+flex.style.height = &quot;60px&quot;;

+&lt;/script&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwritingmodesexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/writing-modes-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/writing-modes-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/writing-modes-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,21 +1,21 @@

</span><del>-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

-PASS

</del><ins>+

+PASS .flexbox 1 

+PASS .flexbox 2 

+PASS .flexbox 3 

+PASS .flexbox 4 

+PASS .flexbox 5 

+PASS .flexbox 6 

+PASS .flexbox 7 

+PASS .flexbox 8 

+PASS .flexbox 9 

+PASS .flexbox 10 

+PASS .flexbox 11 

+PASS .flexbox 12 

+PASS .flexbox 13 

+PASS .flexbox 14 

+PASS .flexbox 15 

+PASS .flexbox 16 

+PASS .flexbox 17 

+PASS .flexbox 18 

+PASS .flexbox 19 

+

</ins></span></pre></div>

<a id="trunkLayoutTestscss3flexboxwritingmodeshtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/writing-modes.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/writing-modes.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/writing-modes.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -6,7 +6,7 @@

</span><span class="cx"> }

</span><span class="cx"> .flexbox {

</span><span class="cx">     width: 600px;

</span><del>-    display: -webkit-flex;

</del><ins>+    display: flex;

</ins><span class="cx">     background-color: grey;

</span><span class="cx"> }

</span><span class="cx"> .flexbox div {

</span><span class="lines">@@ -18,10 +18,11 @@

</span><span class="cx">     direction: rtl;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-.bt {

-    -webkit-writing-mode: horizontal-bt;

</del><ins>+.horizontal-tb {

+    writing-mode:horizontal-tb;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><ins>+

</ins><span class="cx"> .vertical-rl, .vertical-lr {

</span><span class="cx">     height: 600px;

</span><span class="cx"> }

</span><span class="lines">@@ -29,13 +30,12 @@

</span><span class="cx"> :-webkit-any(.vertical-rl, .vertical-lr) div {

</span><span class="cx">     width: 20px;

</span><span class="cx"> }

</span><del>-

</del><span class="cx"> .vertical-rl {

</span><del>-    -webkit-writing-mode: vertical-rl;

</del><ins>+    writing-mode: vertical-rl;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .vertical-lr {

</span><del>-    -webkit-writing-mode: vertical-lr;

</del><ins>+    writing-mode: vertical-lr;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> .flexbox &gt; :nth-child(1) {

</span><span class="lines">@@ -48,64 +48,67 @@

</span><span class="cx">     background-color: red;

</span><span class="cx"> }

</span><span class="cx"> &lt;/style&gt;

</span><del>-&lt;script src=&quot;../../resources/check-layout.js&quot;&gt;&lt;/script&gt;

</del><ins>+&lt;script src=&quot;../../resources/testharness.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;

+&lt;script src=&quot;../../resources/check-layout-th.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx"> &lt;body onload=&quot;checkLayout('.flexbox')&quot;&gt;

</span><ins>+&lt;div id=log&gt;&lt;/div&gt;

</ins><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox rtl&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;-webkit-flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;100&quot; style=&quot;-webkit-flex: 1 0 0; margin-left: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;100&quot; style=&quot;flex: 1 0 0; margin-left: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox rtl&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;-webkit-flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-start: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;525&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;175&quot; style=&quot;flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;0&quot; style=&quot;flex: 1 0 0; -webkit-margin-start: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox rtl&quot; style=&quot;-webkit-margin-start: 20px;-webkit-margin-end: 50px;&quot;&gt;

</span><del>-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;575&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;225&quot; style=&quot;-webkit-flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-start: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;575&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;225&quot; style=&quot;flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;50&quot; style=&quot;flex: 1 0 0; -webkit-margin-start: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;50&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 100px 0 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;50&quot; style=&quot;flex: 1 0 0; margin: 0 100px 0 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; class=&quot;bt&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; class=&quot;horizontal-tb&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;450&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;550&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;450&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;50&quot; data-offset-y=&quot;550&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;0&quot; class=&quot;bt&quot; style=&quot;-webkit-flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;200&quot; data-offset-y=&quot;300&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;500&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;0&quot; class=&quot;horizontal-tb&quot; style=&quot;flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;200&quot; data-offset-y=&quot;300&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;100&quot; data-offset-y=&quot;500&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="lines">@@ -112,102 +115,86 @@

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;margin: auto 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;450&quot; data-offset-y=&quot;75&quot; style=&quot;-webkit-flex: 2 0 auto; height: auto;&quot;&gt;&lt;div data-offset-y=&quot;75&quot; style=&quot;width:200px;height:300px;background-color:orange;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;margin: auto 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;450&quot; data-offset-y=&quot;75&quot; style=&quot;flex: 2 0 auto; height: auto;&quot;&gt;&lt;div data-offset-y=&quot;75&quot; style=&quot;width:200px;height:300px;background-color:orange;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;525&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;margin: auto 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;450&quot; data-offset-y=&quot;75&quot; class=&quot;bt&quot; style=&quot;-webkit-flex: 2 0 auto; height: auto;&quot;&gt;&lt;div style=&quot;width:200px;height:300px;background-color:orange;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;margin: auto 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;450&quot; data-offset-y=&quot;75&quot; class=&quot;horizontal-tb&quot; style=&quot;flex: 2 0 auto; height: auto;&quot;&gt;&lt;div style=&quot;width:200px;height:300px;background-color:orange;&quot;&gt;&lt;/div&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;525&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; class=&quot;bt&quot; style=&quot;-webkit-flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; class=&quot;horizontal-tb&quot; style=&quot;flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr rtl&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;525&quot; style=&quot;-webkit-flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;350&quot; data-offset-y=&quot;175&quot; class=&quot;bt&quot; style=&quot;-webkit-flex: 2 0 0; padding: 100px 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; -webkit-margin-start: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;525&quot; style=&quot;flex: 1 0 0; margin: auto 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;350&quot; data-offset-y=&quot;175&quot; class=&quot;horizontal-tb&quot; style=&quot;flex: 2 0 0; padding: 100px 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;75&quot; data-offset-y=&quot;0&quot; style=&quot;flex: 1 0 0; -webkit-margin-start: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-lr&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;350&quot; style=&quot;-webkit-flex: 1 1 400px; min-height: 350px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;250&quot; style=&quot;-webkit-flex: 1 1 400px;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;350&quot; style=&quot;flex: 1 1 400px; min-height: 350px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;250&quot; style=&quot;flex: 1 1 400px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-rl&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><span class="cx"> &lt;div class=&quot;flexbox vertical-rl&quot;&gt;

</span><del>-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;480&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 100px 0 50px;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</del><ins>+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;0&quot; data-offset-x=&quot;480&quot; style=&quot;flex: 1 0 0; margin: 0 100px 0 50px;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;300&quot; data-offset-y=&quot;150&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 2 0 0;&quot;&gt;&lt;/div&gt;

+  &lt;div data-expected-height=&quot;150&quot; data-offset-y=&quot;450&quot; data-offset-x=&quot;580&quot; style=&quot;flex: 1 0 0;&quot;&gt;&lt;/div&gt;

</ins><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><del>-&lt;div style=&quot;position:relative&quot;&gt;

-&lt;div class=&quot;flexbox bt&quot; style=&quot;height:200px&quot;&gt;

-  &lt;div data-expected-width=&quot;150&quot; data-offset-y=&quot;180&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;300&quot; data-offset-y=&quot;180&quot; data-offset-x=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;150&quot; data-offset-y=&quot;180&quot; data-offset-x=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;

-&lt;/div&gt;

-

-&lt;div style=&quot;position:relative&quot;&gt;

-&lt;div class=&quot;flexbox bt&quot; style=&quot;height:200px&quot;&gt;

-  &lt;div data-expected-width=&quot;150&quot; data-offset-y=&quot;130&quot; data-offset-x=&quot;0&quot; style=&quot;-webkit-flex: 1 0 0; margin: 100px 0 50px 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;300&quot; data-offset-y=&quot;180&quot; data-offset-x=&quot;150&quot; style=&quot;-webkit-flex: 2 0 0;&quot;&gt;&lt;/div&gt;

-  &lt;div data-expected-width=&quot;150&quot; data-offset-y=&quot;180&quot; data-offset-x=&quot;450&quot; style=&quot;-webkit-flex: 1 0 0;&quot;&gt;&lt;/div&gt;

-&lt;/div&gt;

-&lt;/div&gt;

-

</del><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><del>-    &lt;div data-expected-width=&quot;600&quot; style=&quot;direction: rtl; display: -webkit-flex; margin-left: 10px; margin-right:20px;&quot; class=&quot;flexbox&quot;&gt;

-      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;535&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-      &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;185&quot; style=&quot;-webkit-flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

-      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;10&quot; style=&quot;-webkit-flex: 1 0 0;margin-right: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-width=&quot;600&quot; style=&quot;direction: rtl; display: flex; margin-left: 10px; margin-right:20px;&quot; class=&quot;flexbox&quot;&gt;

+      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;535&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+      &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;185&quot; style=&quot;flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

+      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;10&quot; style=&quot;flex: 1 0 0;margin-right: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span><span class="cx"> &lt;div style=&quot;position: relative;&quot;&gt;

</span><del>-    &lt;div data-expected-width=&quot;700&quot; style=&quot;direction: rtl; display: -webkit-flex; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;&quot; class=&quot;flexbox &quot;&gt;

-      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;565&quot; style=&quot;-webkit-flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

-      &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;215&quot; style=&quot;-webkit-flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

-      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;40&quot; style=&quot;-webkit-flex: 1 0 0;margin-right: 100px;&quot;&gt;&lt;/div&gt;

</del><ins>+    &lt;div data-expected-width=&quot;700&quot; style=&quot;direction: rtl; display: flex; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;&quot; class=&quot;flexbox &quot;&gt;

+      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;565&quot; style=&quot;flex: 1 0 0; margin: 0 auto;&quot;&gt;&lt;/div&gt;

+      &lt;div data-expected-width=&quot;350&quot; data-offset-x=&quot;215&quot; style=&quot;flex: 2 0 0; padding: 0 100px;&quot;&gt;&lt;/div&gt;

+      &lt;div data-expected-width=&quot;75&quot; data-offset-x=&quot;40&quot; style=&quot;flex: 1 0 0;margin-right: 100px;&quot;&gt;&lt;/div&gt;

</ins><span class="cx">     &lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestscss3flexboxzindexhtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/flexbox/z-index.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/css3/flexbox/z-index.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/css3/flexbox/z-index.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -13,7 +13,7 @@

</span><span class="cx"> &lt;/style&gt;

</span><span class="cx"> &lt;div&gt;This tests that z-index on non-positioned flex-items works. The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.&lt;div&gt;

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><del>-    &lt;div style=&quot;display:-webkit-flex;&quot;&gt;

</del><ins>+    &lt;div style=&quot;display:flex;&quot;&gt;

</ins><span class="cx">         &lt;div class=&quot;flex-item&quot; style=&quot;z-index: 1; background-color: salmon;&quot;&gt;&lt;/div&gt;

</span><span class="cx">         &lt;div class=&quot;flex-item&quot; style=&quot;z-index: 100; background-color: orange;&quot;&gt;&lt;/div&gt;

</span><span class="cx">     &lt;/div&gt;

</span><span class="lines">@@ -21,7 +21,7 @@

</span><span class="cx">     &lt;div class=&quot;positioned&quot; style=&quot;top: 25px; z-index: 50; background-color: purple&quot;&gt;&lt;/div&gt;

</span><span class="cx"> &lt;/div&gt;

</span><span class="cx"> &lt;div style=&quot;position:relative&quot;&gt;

</span><del>-    &lt;div style=&quot;display:-webkit-flex;&quot;&gt;

</del><ins>+    &lt;div style=&quot;display:flex;&quot;&gt;

</ins><span class="cx">         &lt;img class=&quot;flex-item&quot; style=&quot;z-index: 1; background-color: salmon;&quot;&gt;&lt;/img&gt;

</span><span class="cx">         &lt;img class=&quot;flex-item&quot; style=&quot;z-index: 100; background-color: orange;&quot;&gt;&lt;/img&gt;

</span><span class="cx">     &lt;/div&gt;

</span></span></pre></div>

<a id="trunkLayoutTestsfastreplacedtablepercentheighthtml"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/replaced/table-percent-height.html (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/fast/replaced/table-percent-height.html        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/fast/replaced/table-percent-height.html        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -98,14 +98,12 @@

</span><span class="cx">     shouldBe(&quot;getHeight('input-button-75')&quot;, &quot;getHeight('input-button-100')&quot;);

</span><span class="cx"> 

</span><span class="cx">     shouldBe(&quot;getWidth('input-checkbox-75')&quot;, &quot;getWidth('input-checkbox-100')&quot;);

</span><del>-    shouldBeTrue(&quot;getHeight('input-checkbox-75') != '0px'&quot;);

</del><ins>+    shouldBeFalse(&quot;getHeight('input-checkbox-75') != '0px'&quot;);

</ins><span class="cx">     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.

</span><span class="cx">     is75PercentOf(&quot;getHeight('input-checkbox-75')&quot;, &quot;getHeight('input-checkbox-100')&quot;, hasSubpixelSupport);

</span><span class="cx"> 

</span><span class="cx">     shouldBe(&quot;getWidth('input-file-75')&quot;, &quot;getWidth('input-file-100')&quot;);

</span><span class="cx">     shouldBeTrue(&quot;getHeight('input-file-75') != '0px'&quot;);

<del>-    // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.

-    is75PercentOf(&quot;getHeight('input-file-75')&quot;, &quot;getHeight('input-file-100')&quot;, hasSubpixelSupport);

</del><span class="cx"> 

<span class="cx">     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.

</span><span class="cx">     shouldBe(&quot;getWidth('input-image-75')&quot;, &quot;'75px'&quot;);

</span><span class="lines">@@ -114,7 +112,7 @@

</span><span class="cx">     shouldBe(&quot;getHeight('input-image-100')&quot;, &quot;'100px'&quot;);

</span><span class="cx"> 

</span><span class="cx">     shouldBe(&quot;getWidth('input-radio-75')&quot;, &quot;getWidth('input-radio-100')&quot;);

</span><del>-    shouldBeTrue(&quot;getHeight('input-radio-75') != '0px'&quot;);

</del><ins>+    shouldBeFalse(&quot;getHeight('input-radio-75') != '0px'&quot;);

</ins><span class="cx">     // Note: This behavior doesn't match to Firefox 3.5 and Opera 10.

</span><span class="cx">     is75PercentOf(&quot;getHeight('input-radio-75')&quot;, &quot;getHeight('input-radio-100')&quot;, hasSubpixelSupport);

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2886,3 +2886,17 @@

</span><span class="cx"> [ Debug ] fast/frames/exponential-frames.html [ Skip ]

</span><span class="cx"> 

</span><span class="cx"> webkit.org/b/168053 pageoverlay/overlay-remove-reinsert-view.html [ Pass Failure ]

</span><ins>+

+# Skip some flexbox tests that aren't designed to run in smaller viewports

+css3/flexbox/overflow-auto-resizes-correctly.html [ Skip ]

+css3/flexbox/flexbox-height-with-overflow-auto.html [ Skip ]

+css3/flexbox/flex-flow-auto-margins-no-available-space-assert.html [ Skip ]

+css3/flexbox/flex-one-sets-flex-basis-to-zero-px.html [ Skip ]

+

+# Skip test because checkboxes/radio buttons don't behave the same on iOS

+fast/replaced/table-percent-height.html [ Skip ]

+fast/table/003.html [ Skip ]

+

+# Bundle upload is not supported on iOS

+fast/files/filereader-zip-bundle-using-open-panel.html [ Skip ]

+http/tests/local/fileapi/upload-zip-bundle-as-blob-using-open-panel.html [ Skip ]

</ins></span></pre></div>

<a id="trunkLayoutTestsplatformmacfastreplacedtablepercentheightexpectedtxt"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac/fast/replaced/table-percent-height-expected.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/platform/mac/fast/replaced/table-percent-height-expected.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/LayoutTests/platform/mac/fast/replaced/table-percent-height-expected.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -57,17 +57,16 @@

</span><span class="cx"> PASS getHeight('input-button-75') != '0px' is true

</span><span class="cx"> PASS getHeight('input-button-75') is getHeight('input-button-100')

</span><span class="cx"> PASS getWidth('input-checkbox-75') is getWidth('input-checkbox-100')

</span><del>-PASS getHeight('input-checkbox-75') != '0px' is true

</del><ins>+PASS getHeight('input-checkbox-75') != '0px' is false

</ins><span class="cx"> PASS getHeight('input-checkbox-75') is 75% of getHeight('input-checkbox-100').

</span><span class="cx"> PASS getWidth('input-file-75') is getWidth('input-file-100')

</span><span class="cx"> PASS getHeight('input-file-75') != '0px' is true

<del>-PASS getHeight('input-file-75') is 75% of getHeight('input-file-100').

</del><span class="cx"> PASS getWidth('input-image-75') is '75px'

</span><span class="cx"> PASS getHeight('input-image-75') is '75px'

</span><span class="cx"> PASS getWidth('input-image-100') is '100px'

</span><span class="cx"> PASS getHeight('input-image-100') is '100px'

</span><span class="cx"> PASS getWidth('input-radio-75') is getWidth('input-radio-100')

</span><del>-PASS getHeight('input-radio-75') != '0px' is true

</del><ins>+PASS getHeight('input-radio-75') != '0px' is false

</ins><span class="cx"> PASS getHeight('input-radio-75') is 75% of getHeight('input-radio-100').

</span><span class="cx"> PASS getWidth('input-reset-75') is getWidth('input-reset-100')

</span><span class="cx"> PASS getHeight('input-reset-75') != '0px' is true

</span></span></pre></div>

<a id="trunkLayoutTestsresourceschecklayoutthjs"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/resources/check-layout-th.js (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/resources/check-layout-th.js                                (rev 0)

+++ trunk/LayoutTests/resources/check-layout-th.js        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,195 @@

</span><ins>+(function() {

+// Test is initiated from body.onload, so explicit done() call is required.

+setup({ explicit_done: true });

+

+function checkSubtreeExpectedValues(t, parent, prefix)

+{

+    var checkedLayout = checkExpectedValues(t, parent, prefix);

+    Array.prototype.forEach.call(parent.childNodes, function(node) {

+        checkedLayout |= checkSubtreeExpectedValues(t, node, prefix);

+    });

+    return checkedLayout;

+}

+

+function checkAttribute(output, node, attribute)

+{

+    var result = node.getAttribute &amp;&amp; node.getAttribute(attribute);

+    output.checked |= !!result;

+    return result;

+}

+

+function assert_tolerance(actual, expected, message)

+{

+    if (isNaN(expected) || Math.abs(actual - expected) &gt;= 1) {

+        assert_equals(actual, Number(expected), message);

+    }

+}

+

+function checkExpectedValues(t, node, prefix)

+{

+    var output = { checked: false };

+

+    var expectedWidth = checkAttribute(output, node, &quot;data-expected-width&quot;);

+    if (expectedWidth) {

+        assert_tolerance(node.offsetWidth, expectedWidth, prefix + &quot;width&quot;);

+    }

+

+    var expectedHeight = checkAttribute(output, node, &quot;data-expected-height&quot;);

+    if (expectedHeight) {

+        assert_tolerance(node.offsetHeight, expectedHeight, prefix + &quot;height&quot;);

+    }

+

+    var expectedOffset = checkAttribute(output, node, &quot;data-offset-x&quot;);

+    if (expectedOffset) {

+        assert_tolerance(node.offsetLeft, expectedOffset, prefix + &quot;offsetLeft&quot;);

+    }

+

+    var expectedOffset = checkAttribute(output, node, &quot;data-offset-y&quot;);

+    if (expectedOffset) {

+        assert_tolerance(node.offsetTop, expectedOffset, prefix + &quot;offsetTop&quot;);

+    }

+

+    var expectedWidth = checkAttribute(output, node, &quot;data-expected-client-width&quot;);

+    if (expectedWidth) {

+        assert_tolerance(node.clientWidth, expectedWidth, prefix + &quot;clientWidth&quot;);

+    }

+

+    var expectedHeight = checkAttribute(output, node, &quot;data-expected-client-height&quot;);

+    if (expectedHeight) {

+        assert_tolerance(node.clientHeight, expectedHeight, prefix + &quot;clientHeight&quot;);

+    }

+

+    var expectedWidth = checkAttribute(output, node, &quot;data-expected-scroll-width&quot;);

+    if (expectedWidth) {

+        assert_tolerance(node.scrollWidth, expectedWidth, prefix + &quot;scrollWidth&quot;);

+    }

+

+    var expectedHeight = checkAttribute(output, node, &quot;data-expected-scroll-height&quot;);

+    if (expectedHeight) {

+        assert_tolerance(node.scrollHeight, expectedHeight, prefix + &quot;scrollHeight&quot;);

+    }

+

+    var expectedWidth = checkAttribute(output, node, &quot;data-expected-bounding-client-rect-width&quot;);

+    if (expectedWidth) {

+        assert_tolerance(node.getBoundingClientRect().width, expectedWidth, prefix + &quot;getBoundingClientRect().width&quot;);

+    }

+

+    var expectedOffset = checkAttribute(output, node, &quot;data-total-x&quot;);

+    if (expectedOffset) {

+        var totalLeft = node.clientLeft + node.offsetLeft;

+        assert_tolerance(totalLeft, expectedOffset, prefix +

+                         &quot;clientLeft+offsetLeft (&quot; + node.clientLeft + &quot; + &quot; + node.offsetLeft + &quot;)&quot;);

+    }

+

+    var expectedOffset = checkAttribute(output, node, &quot;data-total-y&quot;);

+    if (expectedOffset) {

+        var totalTop = node.clientTop + node.offsetTop;

+        assert_tolerance(totalTop, expectedOffset, prefix +

+                         &quot;clientTop+offsetTop (&quot; + node.clientTop + &quot; + &quot; + node.offsetTop + &quot;)&quot;);

+    }

+

+    var expectedDisplay = checkAttribute(output, node, &quot;data-expected-display&quot;);

+    if (expectedDisplay) {

+        var actualDisplay = getComputedStyle(node).display;

+        assert_equals(actualDisplay, expectedDisplay, prefix + &quot;display&quot;);

+    }

+

+    var expectedPaddingTop = checkAttribute(output, node, &quot;data-expected-padding-top&quot;);

+    if (expectedPaddingTop) {

+        var actualPaddingTop = getComputedStyle(node).paddingTop;

+        // Trim the unit &quot;px&quot; from the output.

+        actualPaddingTop = actualPaddingTop.slice(0, -2);

+        assert_equals(actualPaddingTop, expectedPaddingTop, prefix + &quot;padding-top&quot;);

+    }

+

+    var expectedPaddingBottom = checkAttribute(output, node, &quot;data-expected-padding-bottom&quot;);

+    if (expectedPaddingBottom) {

+        var actualPaddingBottom = getComputedStyle(node).paddingBottom;

+        // Trim the unit &quot;px&quot; from the output.

+        actualPaddingBottom = actualPaddingBottom.slice(0, -2);

+        assert_equals(actualPaddingBottom, expectedPaddingBottom, prefix + &quot;padding-bottom&quot;);

+    }

+

+    var expectedPaddingLeft = checkAttribute(output, node, &quot;data-expected-padding-left&quot;);

+    if (expectedPaddingLeft) {

+        var actualPaddingLeft = getComputedStyle(node).paddingLeft;

+        // Trim the unit &quot;px&quot; from the output.

+        actualPaddingLeft = actualPaddingLeft.slice(0, -2);

+        assert_equals(actualPaddingLeft, expectedPaddingLeft, prefix + &quot;padding-left&quot;);

+    }

+

+    var expectedPaddingRight = checkAttribute(output, node, &quot;data-expected-padding-right&quot;);

+    if (expectedPaddingRight) {

+        var actualPaddingRight = getComputedStyle(node).paddingRight;

+        // Trim the unit &quot;px&quot; from the output.

+        actualPaddingRight = actualPaddingRight.slice(0, -2);

+        assert_equals(actualPaddingRight, expectedPaddingRight, prefix + &quot;padding-right&quot;);

+    }

+

+    var expectedMarginTop = checkAttribute(output, node, &quot;data-expected-margin-top&quot;);

+    if (expectedMarginTop) {

+        var actualMarginTop = getComputedStyle(node).marginTop;

+        // Trim the unit &quot;px&quot; from the output.

+        actualMarginTop = actualMarginTop.slice(0, -2);

+        assert_equals(actualMarginTop, expectedMarginTop, prefix + &quot;margin-top&quot;);

+    }

+

+    var expectedMarginBottom = checkAttribute(output, node, &quot;data-expected-margin-bottom&quot;);

+    if (expectedMarginBottom) {

+        var actualMarginBottom = getComputedStyle(node).marginBottom;

+        // Trim the unit &quot;px&quot; from the output.

+        actualMarginBottom = actualMarginBottom.slice(0, -2);

+        assert_equals(actualMarginBottom, expectedMarginBottom, prefix + &quot;margin-bottom&quot;);

+    }

+

+    var expectedMarginLeft = checkAttribute(output, node, &quot;data-expected-margin-left&quot;);

+    if (expectedMarginLeft) {

+        var actualMarginLeft = getComputedStyle(node).marginLeft;

+        // Trim the unit &quot;px&quot; from the output.

+        actualMarginLeft = actualMarginLeft.slice(0, -2);

+        assert_equals(actualMarginLeft, expectedMarginLeft, prefix + &quot;margin-left&quot;);

+    }

+

+    var expectedMarginRight = checkAttribute(output, node, &quot;data-expected-margin-right&quot;);

+    if (expectedMarginRight) {

+        var actualMarginRight = getComputedStyle(node).marginRight;

+        // Trim the unit &quot;px&quot; from the output.

+        actualMarginRight = actualMarginRight.slice(0, -2);

+        assert_equals(actualMarginRight, expectedMarginRight, prefix + &quot;margin-right&quot;);

+    }

+

+    return output.checked;

+}

+

+window.checkLayout = function(selectorList, outputContainer)

+{

+    if (!selectorList) {

+        console.error(&quot;You must provide a CSS selector of nodes to check.&quot;);

+        return;

+    }

+    var nodes = document.querySelectorAll(selectorList);

+    var testNumber = 0;

+    nodes = Array.prototype.slice.call(nodes);

+    nodes.reverse();

+    var checkedLayout = false;

+    Array.prototype.forEach.call(nodes, function(node) {

+        test(function(t) {

+            var container = node.parentNode.className == 'container' ? node.parentNode : node;

+            var prefix = &quot;\n&quot; + container.outerHTML + &quot;\n&quot;;

+            var passed = false;

+            try {

+                checkedLayout |= checkExpectedValues(t, node.parentNode, prefix);

+                checkedLayout |= checkSubtreeExpectedValues(t, node, prefix);

+                passed = true;

+            } finally {

+                checkedLayout |= !passed;

+            }

+        }, selectorList + ' ' + String(++testNumber));

+    });

+    if (!checkedLayout) {

+        console.error(&quot;No valid data-* attributes found in selector list : &quot; + selectorList);

+    }

+    done();

+};

+

+})();

</ins></span></pre></div>

<a id="trunkSourceWebCoreCMakeListstxt"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/CMakeLists.txt (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/CMakeLists.txt        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/CMakeLists.txt        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2385,6 +2385,7 @@

</span><span class="cx">     rendering/CounterNode.cpp

</span><span class="cx">     rendering/EllipsisBox.cpp

</span><span class="cx">     rendering/FilterEffectRenderer.cpp

</span><ins>+    rendering/FlexibleBoxAlgorithm.cpp

</ins><span class="cx">     rendering/FixedTableLayout.cpp

</span><span class="cx">     rendering/FloatingObjects.cpp

</span><span class="cx">     rendering/FlowThreadController.cpp

</span></span></pre></div>

<a id="trunkSourceWebCoreChangeLog"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/ChangeLog        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/ChangeLog        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1,3 +1,225 @@

</span><ins>+2017-02-27  Dave Hyatt  &lt;hyatt@apple.com&gt;

+

+        Update flexbox to Blink's tip of tree

+        https://bugs.webkit.org/show_bug.cgi?id=168657

+

+        Reviewed by Zalan Bujtas.

+

+        Added new tests in css3/flexbox.

+

+        * CMakeLists.txt:

+        * WebCore.xcodeproj/project.pbxproj:

+        * css/CSSComputedStyleDeclaration.cpp:

+        (WebCore::ComputedStyleExtractor::propertyValue):

+        * rendering/FlexibleBoxAlgorithm.cpp: Added.

+        (WebCore::FlexItem::FlexItem):

+        (WebCore::FlexLayoutAlgorithm::FlexLayoutAlgorithm):

+        (WebCore::FlexLayoutAlgorithm::computeNextFlexLine):

+        * rendering/FlexibleBoxAlgorithm.h: Added.

+        (WebCore::FlexItem::hypotheticalMainAxisMarginBoxSize):

+        (WebCore::FlexItem::flexBaseMarginBoxSize):

+        (WebCore::FlexItem::flexedMarginBoxSize):

+        (WebCore::FlexLayoutAlgorithm::isMultiline):

+        * rendering/GridTrackSizingAlgorithm.cpp:

+        (WebCore::GridTrackSizingAlgorithm::computeTrackBasedSize):

+        (WebCore::GridTrackSizingAlgorithm::increaseSizesToAccommodateSpanningItems):

+        (WebCore::GridTrackSizingAlgorithm::assumedRowsSizeForOrthogonalChild):

+        (WebCore::GridTrackSizingAlgorithm::gridAreaBreadthForChild):

+        (WebCore::IndefiniteSizeStrategy::recomputeUsedFlexFractionIfNeeded):

+        * rendering/GridTrackSizingAlgorithm.h:

+        * rendering/OrderIterator.cpp:

+        (WebCore::OrderIterator::next):

+        (WebCore::OrderIterator::reset):

+        (WebCore::OrderIteratorPopulator::~OrderIteratorPopulator):

+        (WebCore::OrderIteratorPopulator::collectChild):

+        (WebCore::OrderIteratorPopulator::OrderIteratorPopulator): Deleted.

+        (WebCore::OrderIteratorPopulator::removeDuplicatedOrderValues): Deleted.

+        * rendering/OrderIterator.h:

+        (WebCore::OrderIteratorPopulator::OrderIteratorPopulator):

+        * rendering/RenderBlock.cpp:

+        (WebCore::RenderBlock::updateBlockChildDirtyBitsBeforeLayout):

+        (WebCore::RenderBlock::layoutPositionedObject):

+        (WebCore::RenderBlock::computeBlockPreferredLogicalWidths):

+        (WebCore::RenderBlock::computeChildPreferredLogicalWidths):

+        (WebCore::RenderBlock::hasDefiniteLogicalHeight):

+        (WebCore::RenderBlock::availableLogicalHeightForPercentageComputation):

+        * rendering/RenderBlock.h:

+        (WebCore::RenderBlock::hasPercentHeightDescendants):

+        * rendering/RenderBlockFlow.cpp:

+        (WebCore::RenderBlockFlow::computeInlinePreferredLogicalWidths):

+        * rendering/RenderBox.cpp:

+        (WebCore::RenderBox::columnFlexItemHasStretchAlignment):

+        (WebCore::RenderBox::isStretchingColumnFlexItem):

+        (WebCore::RenderBox::hasStretchedLogicalWidth):

+        (WebCore::RenderBox::sizesLogicalWidthToFitContent):

+        (WebCore::RenderBox::computeInlineDirectionMargins):

+        (WebCore::RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem):

+        (WebCore::RenderBox::updateLogicalHeight):

+        (WebCore::RenderBox::computeLogicalHeightWithoutLayout):

+        (WebCore::RenderBox::skipContainingBlockForPercentHeightCalculation):

+        (WebCore::RenderBox::shouldTreatChildAsReplacedInTableCells):

+        (WebCore::tableCellShouldHaveZeroInitialSize):

+        (WebCore::RenderBox::computePercentageLogicalHeight):

+        (WebCore::RenderBox::computeReplacedLogicalHeightUsing):

+        (WebCore::RenderBox::availableLogicalHeightUsing):

+        (WebCore::RenderBox::percentageLogicalHeightIsResolvable):

+        (WebCore::RenderBox::hasUnsplittableScrollingOverflow):

+        (WebCore::flexItemHasStretchAlignment): Deleted.

+        (WebCore::isStretchingColumnFlexItem): Deleted.

+        (WebCore::logicalWidthIsResolvable): Deleted.

+        (WebCore::RenderBox::hasDefiniteLogicalWidth): Deleted.

+        (WebCore::percentageLogicalHeightIsResolvable): Deleted.

+        (WebCore::RenderBox::percentageLogicalHeightIsResolvableFromBlock): Deleted.

+        (WebCore::RenderBox::hasDefiniteLogicalHeight): Deleted.

+        * rendering/RenderBox.h:

+        (WebCore::RenderBox::isGridItem):

+        (WebCore::RenderBox::isFlexItem):

+        (WebCore::RenderBox::selfAlignmentNormalBehavior):

+        * rendering/RenderBoxModelObject.cpp:

+        (WebCore::isOutOfFlowPositionedWithImplicitHeight):

+        (WebCore::RenderBoxModelObject::containingBlockForAutoHeightDetection):

+        (WebCore::RenderBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight):

+        * rendering/RenderBoxModelObject.h:

+        * rendering/RenderElement.cpp:

+        (WebCore::RenderElement::removeChildInternal):

+        * rendering/RenderFlexibleBox.cpp:

+        (WebCore::RenderFlexibleBox::LineContext::LineContext):

+        (WebCore::RenderFlexibleBox::RenderFlexibleBox):

+        (WebCore::RenderFlexibleBox::computeIntrinsicLogicalWidths):

+        (WebCore::contentAlignmentNormalBehavior):

+        (WebCore::RenderFlexibleBox::styleDidChange):

+        (WebCore::RenderFlexibleBox::layoutBlock):

+        (WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems):

+        (WebCore::RenderFlexibleBox::clientLogicalBottomAfterRepositioning):

+        (WebCore::RenderFlexibleBox::hasOrthogonalFlow):

+        (WebCore::RenderFlexibleBox::flexBasisForChild):

+        (WebCore::RenderFlexibleBox::crossAxisExtentForChild):

+        (WebCore::RenderFlexibleBox::cachedChildIntrinsicContentLogicalHeight):

+        (WebCore::RenderFlexibleBox::setCachedChildIntrinsicContentLogicalHeight):

+        (WebCore::RenderFlexibleBox::clearCachedChildIntrinsicContentLogicalHeight):

+        (WebCore::RenderFlexibleBox::childIntrinsicLogicalHeight):

+        (WebCore::RenderFlexibleBox::childIntrinsicLogicalWidth):

+        (WebCore::RenderFlexibleBox::crossAxisIntrinsicExtentForChild):

+        (WebCore::RenderFlexibleBox::mainAxisExtentForChild):

+        (WebCore::RenderFlexibleBox::mainAxisContentExtentForChildIncludingScrollbar):

+        (WebCore::RenderFlexibleBox::crossAxisExtent):

+        (WebCore::RenderFlexibleBox::mainAxisExtent):

+        (WebCore::RenderFlexibleBox::mainAxisContentExtent):

+        (WebCore::RenderFlexibleBox::computeMainAxisExtentForChild):

+        (WebCore::RenderFlexibleBox::transformedWritingMode):

+        (WebCore::RenderFlexibleBox::flowAwareMarginStartForChild):

+        (WebCore::RenderFlexibleBox::flowAwareMarginEndForChild):

+        (WebCore::RenderFlexibleBox::flowAwareMarginBeforeForChild):

+        (WebCore::RenderFlexibleBox::crossAxisMarginExtentForChild):

+        (WebCore::RenderFlexibleBox::flowAwareLocationForChild):

+        (WebCore::RenderFlexibleBox::useChildAspectRatio):

+        (WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing):

+        (WebCore::RenderFlexibleBox::setFlowAwareLocationForChild):

+        (WebCore::RenderFlexibleBox::mainAxisLengthIsDefinite):

+        (WebCore::RenderFlexibleBox::crossAxisLengthIsDefinite):

+        (WebCore::RenderFlexibleBox::cacheChildMainSize):

+        (WebCore::RenderFlexibleBox::clearCachedMainSizeForChild):

+        (WebCore::RenderFlexibleBox::computeInnerFlexBaseSizeForChild):

+        (WebCore::RenderFlexibleBox::layoutFlexItems):

+        (WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis):

+        (WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis):

+        (WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis):

+        (WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild):

+        (WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis):

+        (WebCore::RenderFlexibleBox::marginBoxAscentForChild):

+        (WebCore::RenderFlexibleBox::computeChildMarginValue):

+        (WebCore::RenderFlexibleBox::adjustChildSizeForMinAndMax):

+        (WebCore::RenderFlexibleBox::crossSizeForPercentageResolution):

+        (WebCore::RenderFlexibleBox::mainSizeForPercentageResolution):

+        (WebCore::RenderFlexibleBox::childLogicalHeightForPercentageResolution):

+        (WebCore::RenderFlexibleBox::adjustChildSizeForAspectRatioCrossAxisMinAndMax):

+        (WebCore::RenderFlexibleBox::constructFlexItem):

+        (WebCore::RenderFlexibleBox::freezeViolations):

+        (WebCore::RenderFlexibleBox::freezeInflexibleItems):

+        (WebCore::RenderFlexibleBox::resolveFlexibleLengths):

+        (WebCore::alignmentOffset):

+        (WebCore::RenderFlexibleBox::setOverrideMainAxisContentSizeForChild):

+        (WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):

+        (WebCore::RenderFlexibleBox::staticCrossAxisPositionForPositionedChild):

+        (WebCore::RenderFlexibleBox::staticInlinePositionForPositionedChild):

+        (WebCore::RenderFlexibleBox::staticBlockPositionForPositionedChild):

+        (WebCore::RenderFlexibleBox::setStaticPositionForPositionedLayout):

+        (WebCore::RenderFlexibleBox::prepareChildForPositionedLayout):

+        (WebCore::RenderFlexibleBox::alignmentForChild):

+        (WebCore::RenderFlexibleBox::resetAutoMarginsAndLogicalTopInCrossAxis):

+        (WebCore::RenderFlexibleBox::needToStretchChildLogicalHeight):

+        (WebCore::RenderFlexibleBox::childHasIntrinsicMainAxisSize):

+        (WebCore::RenderFlexibleBox::crossAxisOverflowForChild):

+        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):

+        (WebCore::RenderFlexibleBox::layoutColumnReverse):

+        (WebCore::initialAlignContentOffset):

+        (WebCore::alignContentSpaceBetweenChildren):

+        (WebCore::RenderFlexibleBox::alignFlexLines):

+        (WebCore::RenderFlexibleBox::adjustAlignmentForChild):

+        (WebCore::RenderFlexibleBox::alignChildren):

+        (WebCore::RenderFlexibleBox::applyStretchAlignmentToChild):

+        (WebCore::RenderFlexibleBox::flipForRightToLeftColumn):

+        (WebCore::RenderFlexibleBox::flipForWrapReverse):

+        (WebCore::RenderFlexibleBox::Violation::Violation): Deleted.

+        (WebCore::RenderFlexibleBox::setCrossAxisExtent): Deleted.

+        (WebCore::RenderFlexibleBox::flowAwareMarginAfterForChild): Deleted.

+        (WebCore::RenderFlexibleBox::mainAxisBorderAndPaddingExtentForChild): Deleted.

+        (WebCore::RenderFlexibleBox::mainAxisScrollbarExtentForChild): Deleted.

+        (WebCore::RenderFlexibleBox::preferredMainAxisContentExtentForChild): Deleted.

+        (WebCore::RenderFlexibleBox::computeNextFlexLine): Deleted.

+        (WebCore::RenderFlexibleBox::setLogicalOverrideSize): Deleted.

+        (WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Deleted.

+        (WebCore::RenderFlexibleBox::needToStretchChild): Deleted.

+        (WebCore::contentAlignmentNormalBehaviorFlexibleBox): Deleted.

+        * rendering/RenderFlexibleBox.h:

+        (WebCore::RenderFlexibleBox::orderIterator):

+        (WebCore::RenderFlexibleBox::isFlexibleBoxImpl):

+        * rendering/RenderFullScreen.h:

+        * rendering/RenderGrid.cpp:

+        (WebCore::selfAlignmentChangedToStretchInRowAxis):

+        (WebCore::selfAlignmentChangedFromStretchInRowAxis):

+        (WebCore::selfAlignmentChangedFromStretchInColumnAxis):

+        (WebCore::RenderGrid::styleDidChange):

+        (WebCore::RenderGrid::computeTrackBasedLogicalHeight):

+        (WebCore::RenderGrid::computeTrackSizesForDefiniteSize):

+        (WebCore::RenderGrid::gridGapForDirection):

+        (WebCore::RenderGrid::guttersSize):

+        (WebCore::RenderGrid::computeTrackSizesForIndefiniteSize):

+        (WebCore::RenderGrid::computeAutoRepeatTracksCount):

+        (WebCore::RenderGrid::trackSizesForComputedStyle):

+        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):

+        (WebCore::RenderGrid::populateGridPositionsForDirection):

+        (WebCore::RenderGrid::alignSelfForChild):

+        (WebCore::RenderGrid::justifySelfForChild):

+        (WebCore::RenderGrid::columnAxisPositionForChild):

+        (WebCore::RenderGrid::rowAxisPositionForChild):

+        (WebCore::RenderGrid::columnAxisOffsetForChild):

+        (WebCore::RenderGrid::rowAxisOffsetForChild):

+        (WebCore::RenderGrid::needToStretchChildLogicalHeight): Deleted.

+        * rendering/RenderGrid.h:

+        * rendering/RenderLayer.cpp:

+        (WebCore::RenderLayer::updateScrollbarsAfterLayout):

+        * rendering/RenderListBox.cpp:

+        (WebCore::RenderListBox::computeLogicalHeight):

+        * rendering/RenderTable.cpp:

+        (WebCore::RenderTable::layout):

+        * rendering/RenderTableCell.cpp:

+        (WebCore::RenderTableCell::layout):

+        * rendering/RenderTableSection.cpp:

+        (WebCore::shouldFlexCellChild):

+        (WebCore::RenderTableSection::relayoutCellIfFlexed):

+        (WebCore::RenderTableSection::layoutRows):

+        * rendering/RenderTableSection.h:

+        * rendering/RenderTextControl.cpp:

+        (WebCore::RenderTextControl::computeLogicalHeight):

+        * rendering/style/RenderStyle.cpp:

+        (WebCore::resolvedSelfAlignment):

+        (WebCore::RenderStyle::resolvedAlignSelf):

+        (WebCore::RenderStyle::resolvedJustifySelf):

+        * rendering/style/RenderStyle.h:

+        * style/RenderTreeUpdater.cpp:

+        (WebCore::textRendererIsNeeded):

+

</ins><span class="cx"> 2017-02-28  Alex Christensen  &lt;achristensen@webkit.org&gt;

</span><span class="cx"> 

</span><span class="cx">         Main resource requests need cachePartition

</span></span></pre></div>

<a id="trunkSourceWebCoreWebCorexcodeprojprojectpbxproj"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -3664,6 +3664,7 @@

</span><span class="cx">                 949C77091D6E498700C0DE4F /* CSSParserObserverWrapper.h in Headers */ = {isa = PBXBuildFile; fileRef = 949C77071D6E48ED00C0DE4F /* CSSParserObserverWrapper.h */; };

</span><span class="cx">                 949C770B1D6E49ED00C0DE4F /* CSSParserObserver.h in Headers */ = {isa = PBXBuildFile; fileRef = 949C770A1D6E49C300C0DE4F /* CSSParserObserver.h */; };

</span><span class="cx">                 94D4AC621DC24C8E0080F02D /* CSSCustomPropertyValue.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 94D4AC611DC24C810080F02D /* CSSCustomPropertyValue.cpp */; };

</span><ins>+                94DD79741E54E3D10058FB80 /* FlexibleBoxAlgorithm.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 94DD79721E54E3A20058FB80 /* FlexibleBoxAlgorithm.cpp */; };

</ins><span class="cx">                 94DE5C7E1D78CB2E00164F2A /* CSSParserIdioms.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 94DE5C7D1D78CB2500164F2A /* CSSParserIdioms.cpp */; };

</span><span class="cx">                 94DE5C811D7F3A1400164F2A /* CSSAtRuleID.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 94DE5C7F1D7F39D000164F2A /* CSSAtRuleID.cpp */; };

</span><span class="cx">                 94DE5C821D7F3A1400164F2A /* CSSAtRuleID.h in Headers */ = {isa = PBXBuildFile; fileRef = 94DE5C801D7F39D000164F2A /* CSSAtRuleID.h */; };

</span><span class="lines">@@ -11438,6 +11439,8 @@

</span><span class="cx">                 949C77071D6E48ED00C0DE4F /* CSSParserObserverWrapper.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = CSSParserObserverWrapper.h; path = parser/CSSParserObserverWrapper.h; sourceTree = &quot;&lt;group&gt;&quot;; };

</span><span class="cx">                 949C770A1D6E49C300C0DE4F /* CSSParserObserver.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = CSSParserObserver.h; path = parser/CSSParserObserver.h; sourceTree = &quot;&lt;group&gt;&quot;; };

</span><span class="cx">                 94D4AC611DC24C810080F02D /* CSSCustomPropertyValue.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = CSSCustomPropertyValue.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };

</span><ins>+                94DD79721E54E3A20058FB80 /* FlexibleBoxAlgorithm.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = FlexibleBoxAlgorithm.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };

+                94DD79731E54E3A20058FB80 /* FlexibleBoxAlgorithm.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = FlexibleBoxAlgorithm.h; sourceTree = &quot;&lt;group&gt;&quot;; };

</ins><span class="cx">                 94DE5C7D1D78CB2500164F2A /* CSSParserIdioms.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; name = CSSParserIdioms.cpp; path = parser/CSSParserIdioms.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };

</span><span class="cx">                 94DE5C7F1D7F39D000164F2A /* CSSAtRuleID.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; name = CSSAtRuleID.cpp; path = parser/CSSAtRuleID.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };

</span><span class="cx">                 94DE5C801D7F39D000164F2A /* CSSAtRuleID.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = CSSAtRuleID.h; path = parser/CSSAtRuleID.h; sourceTree = &quot;&lt;group&gt;&quot;; };

</span><span class="lines">@@ -24215,6 +24218,8 @@

</span><span class="cx">                                 31313F641443B35E006E2A90 /* FilterEffectRenderer.h */,

</span><span class="cx">                                 A8CFF0480A154F09000A4234 /* FixedTableLayout.cpp */,

</span><span class="cx">                                 A8CFF04A0A154F09000A4234 /* FixedTableLayout.h */,

</span><ins>+                                94DD79721E54E3A20058FB80 /* FlexibleBoxAlgorithm.cpp */,

+                                94DD79731E54E3A20058FB80 /* FlexibleBoxAlgorithm.h */,

</ins><span class="cx">                                 9A528E8117D7F52F00AA9518 /* FloatingObjects.cpp */,

</span><span class="cx">                                 9A528E8217D7F52F00AA9518 /* FloatingObjects.h */,

</span><span class="cx">                                 D72F6D77153159A3001EE44E /* FlowThreadController.cpp */,

</span><span class="lines">@@ -29909,6 +29914,7 @@

</span><span class="cx">                                 1C26497A0D7E248A00BD10F2 /* DocumentLoaderMac.cpp in Sources */,

</span><span class="cx">                                 CE057FA51220731100A476D5 /* DocumentMarkerController.cpp in Sources */,

</span><span class="cx">                                 14947FFD12F80CD200A0F631 /* DocumentOrderedMap.cpp in Sources */,

</span><ins>+                                94DD79741E54E3D10058FB80 /* FlexibleBoxAlgorithm.cpp in Sources */,

</ins><span class="cx">                                 A8C2280E11D4A59700D5A7D3 /* DocumentParser.cpp in Sources */,

</span><span class="cx">                                 4A4F48A916B0DFC000EDBB29 /* DocumentRuleSets.cpp in Sources */,

</span><span class="cx">                                 AD6E71AC1668899D00320C13 /* DocumentSharedObjectPool.cpp in Sources */,

</span></span></pre></div>

<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -2854,7 +2854,7 @@

</span><span class="cx">         case CSSPropertyFlex:

</span><span class="cx">             return getCSSPropertyValuesForShorthandProperties(flexShorthand());

</span><span class="cx">         case CSSPropertyFlexBasis:

</span><del>-            return cssValuePool.createValue(style-&gt;flexBasis());

</del><ins>+            return cssValuePool.createValue(style-&gt;flexBasis(), *style);

</ins><span class="cx">         case CSSPropertyFlexDirection:

</span><span class="cx">             return cssValuePool.createValue(style-&gt;flexDirection());

</span><span class="cx">         case CSSPropertyFlexFlow:

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingFlexibleBoxAlgorithmcpp"></a>

<div class="addfile"><h4>Added: trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.cpp (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.cpp                                (rev 0)

+++ trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,82 @@

</span><ins>+/*

+ * Copyright (C) 2011 Google Inc. All rights reserved.

+ *

+ * Redistribution and use in source and binary forms, with or without

+ * modification, are permitted provided that the following conditions are

+ * met:

+ *

+ *     * Redistributions of source code must retain the above copyright

+ * notice, this list of conditions and the following disclaimer.

+ *     * Redistributions in binary form must reproduce the above

+ * copyright notice, this list of conditions and the following disclaimer

+ * in the documentation and/or other materials provided with the

+ * distribution.

+ *     * Neither the name of Google Inc. nor the names of its

+ * contributors may be used to endorse or promote products derived from

+ * this software without specific prior written permission.

+ *

+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

+ * &quot;AS IS&quot; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

+ */

+

+#include &quot;config.h&quot;

+#include &quot;FlexibleBoxAlgorithm.h&quot;

+

+#include &quot;RenderBox.h&quot;

+

+namespace WebCore {

+

+FlexItem::FlexItem(RenderBox&amp; box, LayoutUnit flexBaseContentSize, LayoutUnit hypotheticalMainContentSize, LayoutUnit mainAxisBorderAndPadding, LayoutUnit mainAxisMargin)

+    : box(box)

+    , flexBaseContentSize(flexBaseContentSize)

+    , hypotheticalMainContentSize(hypotheticalMainContentSize)

+    , mainAxisBorderAndPadding(mainAxisBorderAndPadding)

+    , mainAxisMargin(mainAxisMargin)

+    , frozen(false)

+{

+    ASSERT(!box.isOutOfFlowPositioned());

+}

+

+FlexLayoutAlgorithm::FlexLayoutAlgorithm(const RenderStyle&amp; style, LayoutUnit lineBreakLength, const Vector&lt;FlexItem&gt;&amp; allItems)

+    : m_style(style)

+    , m_lineBreakLength(lineBreakLength)

+    , m_allItems(allItems)

+{

+}

+

+bool FlexLayoutAlgorithm::computeNextFlexLine(size_t&amp; nextIndex, Vector&lt;FlexItem&gt;&amp; lineItems, LayoutUnit&amp; sumFlexBaseSize, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink, LayoutUnit&amp; sumHypotheticalMainSize)

+{

+    lineItems.clear();

+    sumFlexBaseSize = LayoutUnit();

+    totalFlexGrow = totalFlexShrink = totalWeightedFlexShrink = 0;

+    sumHypotheticalMainSize = LayoutUnit();

+

+    bool lineHasInFlowItem = false;

+

+    for (; nextIndex &lt; m_allItems.size(); ++nextIndex) {

+        const auto&amp; flexItem = m_allItems[nextIndex];

+        ASSERT(!flexItem.box.isOutOfFlowPositioned());

+        if (isMultiline() &amp;&amp; sumHypotheticalMainSize + flexItem.hypotheticalMainAxisMarginBoxSize() &gt; m_lineBreakLength &amp;&amp; lineHasInFlowItem)

+            break;

+        lineItems.append(flexItem);

+        lineHasInFlowItem = true;

+        sumFlexBaseSize += flexItem.flexBaseMarginBoxSize();

+        totalFlexGrow += flexItem.box.style().flexGrow();

+        totalFlexShrink += flexItem.box.style().flexShrink();

+        totalWeightedFlexShrink += flexItem.box.style().flexShrink() * flexItem.flexBaseContentSize;

+        sumHypotheticalMainSize += flexItem.hypotheticalMainAxisMarginBoxSize();

+    }

+    ASSERT(lineItems.size() &gt; 0 || nextIndex == m_allItems.size());

+    return lineItems.size() &gt; 0;

+}

+

+} // namespace WebCore

</ins></span></pre></div>

<a id="trunkSourceWebCorerenderingFlexibleBoxAlgorithmh"></a>

<div class="addfile"><h4>Added: trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.h (0 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.h                                (rev 0)

+++ trunk/Source/WebCore/rendering/FlexibleBoxAlgorithm.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -0,0 +1,90 @@

</span><ins>+/*

+ * Copyright (C) 2011 Google Inc. All rights reserved.

+ *

+ * Redistribution and use in source and binary forms, with or without

+ * modification, are permitted provided that the following conditions are

+ * met:

+ *

+ *     * Redistributions of source code must retain the above copyright

+ * notice, this list of conditions and the following disclaimer.

+ *     * Redistributions in binary form must reproduce the above

+ * copyright notice, this list of conditions and the following disclaimer

+ * in the documentation and/or other materials provided with the

+ * distribution.

+ *     * Neither the name of Google Inc. nor the names of its

+ * contributors may be used to endorse or promote products derived from

+ * this software without specific prior written permission.

+ *

+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

+ * &quot;AS IS&quot; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

+ */

+

+#pragma once

+

+#include &quot;LayoutUnit.h&quot;

+#include &quot;OrderIterator.h&quot;

+#include &quot;RenderStyle.h&quot;

+#include &lt;wtf/Noncopyable.h&gt;

+#include &lt;wtf/Vector.h&gt;

+

+namespace WebCore {

+

+class RenderBox;

+

+class FlexItem {

+public:

+    FlexItem(RenderBox&amp;, LayoutUnit flexBaseContentSize, LayoutUnit hypotheticalMainContentSize, LayoutUnit mainAxisBorderAndPadding, LayoutUnit mainAxisMargin);

+

+    LayoutUnit hypotheticalMainAxisMarginBoxSize() const

+    {

+        return hypotheticalMainContentSize + mainAxisBorderAndPadding + mainAxisMargin;

+    }

+

+    LayoutUnit flexBaseMarginBoxSize() const

+    {

+        return flexBaseContentSize + mainAxisBorderAndPadding + mainAxisMargin;

+    }

+

+    LayoutUnit flexedMarginBoxSize() const

+    {

+        return flexedContentSize + mainAxisBorderAndPadding + mainAxisMargin;

+    }

+

+    RenderBox&amp; box;

+    const LayoutUnit flexBaseContentSize;

+    const LayoutUnit hypotheticalMainContentSize;

+    const LayoutUnit mainAxisBorderAndPadding;

+    const LayoutUnit mainAxisMargin;

+    LayoutUnit flexedContentSize;

+    bool frozen;

+};

+

+class FlexLayoutAlgorithm {

+    WTF_MAKE_NONCOPYABLE(FlexLayoutAlgorithm);

+

+public:

+    FlexLayoutAlgorithm(const RenderStyle&amp;, LayoutUnit lineBreakLength, const Vector&lt;FlexItem&gt;&amp; allItems);

+

+    // The hypothetical main size of an item is the flex base size clamped

+    // according to its min and max main size properties

+    bool computeNextFlexLine(size_t&amp; nextIndex, Vector&lt;FlexItem&gt;&amp; lineItems, LayoutUnit&amp; sumFlexBaseSize, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink, LayoutUnit&amp; sumHypotheticalMainSize);

+

+private:

+    bool isMultiline() const { return m_style.flexWrap() != FlexNoWrap; }

+

+    const RenderStyle&amp; m_style;

+    LayoutUnit m_lineBreakLength;

+    const Vector&lt;FlexItem&gt;&amp; m_allItems;

+};

+

+} // namespace WebCore

+

</ins></span></pre></div>

<a id="trunkSourceWebCorerenderingGridTrackSizingAlgorithmcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -209,7 +209,7 @@

</span><span class="cx">     for (auto&amp; track : allTracks)

</span><span class="cx">         size += track.baseSize();

</span><span class="cx"> 

</span><del>-    size += m_renderGrid-&gt;guttersSize(m_grid, m_direction, 0, allTracks.size());

</del><ins>+    size += m_renderGrid-&gt;guttersSize(m_grid, m_direction, 0, allTracks.size(), m_sizingOperation);

</ins><span class="cx"> 

</span><span class="cx">     return size;

</span><span class="cx"> }

</span><span class="lines">@@ -460,7 +460,7 @@

</span><span class="cx">         if (filteredTracks.isEmpty())

</span><span class="cx">             continue;

</span><span class="cx"> 

</span><del>-        spanningTracksSize += m_renderGrid-&gt;guttersSize(m_grid, m_direction, itemSpan.startLine(), itemSpan.integerSpan());

</del><ins>+        spanningTracksSize += m_renderGrid-&gt;guttersSize(m_grid, m_direction, itemSpan.startLine(), itemSpan.integerSpan(), m_sizingOperation);

</ins><span class="cx"> 

</span><span class="cx">         LayoutUnit extraSpace = itemSizeForTrackSizeComputationPhase(phase, gridItemWithSpan.gridItem()) - spanningTracksSize;

</span><span class="cx">         extraSpace = std::max&lt;LayoutUnit&gt;(extraSpace, 0);

</span><span class="lines">@@ -569,7 +569,7 @@

</span><span class="cx">             gridAreaSize += valueForLength(maxTrackSize.length(), containingBlockAvailableSize);

</span><span class="cx">     }

</span><span class="cx"> 

</span><del>-    gridAreaSize += m_renderGrid-&gt;guttersSize(m_grid, ForRows, span.startLine(), span.integerSpan());

</del><ins>+    gridAreaSize += m_renderGrid-&gt;guttersSize(m_grid, ForRows, span.startLine(), span.integerSpan(), m_sizingOperation);

</ins><span class="cx"> 

</span><span class="cx">     return gridAreaIsIndefinite ? std::max(child.maxPreferredLogicalWidth(), gridAreaSize) : gridAreaSize;

</span><span class="cx"> }

</span><span class="lines">@@ -588,7 +588,7 @@

</span><span class="cx">     for (auto trackPosition : span)

</span><span class="cx">         gridAreaBreadth += allTracks[trackPosition].baseSize();

</span><span class="cx"> 

</span><del>-    gridAreaBreadth += m_renderGrid-&gt;guttersSize(m_grid, direction, span.startLine(), span.integerSpan());

</del><ins>+    gridAreaBreadth += m_renderGrid-&gt;guttersSize(m_grid, direction, span.startLine(), span.integerSpan(), m_sizingOperation);

</ins><span class="cx"> 

</span><span class="cx">     return gridAreaBreadth;

</span><span class="cx"> }

</span><span class="lines">@@ -906,7 +906,7 @@

</span><span class="cx"> 

</span><span class="cx">     LayoutUnit freeSpace = checkMaxSize ? maxSize.value() : LayoutUnit(-1);

</span><span class="cx">     const Grid&amp; grid = m_algorithm.grid();

</span><del>-    freeSpace = std::max(freeSpace, minSize.value()) - renderGrid-&gt;guttersSize(grid, ForRows, 0, grid.numTracks(ForRows));

</del><ins>+    freeSpace = std::max(freeSpace, minSize.value()) - renderGrid-&gt;guttersSize(grid, ForRows, 0, grid.numTracks(ForRows), m_algorithm.sizingOperation());

</ins><span class="cx"> 

</span><span class="cx">     size_t numberOfTracks = m_algorithm.tracks(ForRows).size();

</span><span class="cx">     flexFraction = findFrUnitSize(GridSpan::translatedDefiniteGridSpan(0, numberOfTracks), freeSpace);

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingGridTrackSizingAlgorithmh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -117,6 +117,8 @@

</span><span class="cx">     bool tracksAreWiderThanMinTrackBreadth() const;

</span><span class="cx"> #endif

</span><span class="cx"> 

</span><ins>+    SizingOperation sizingOperation() const { return m_sizingOperation; }

+

</ins><span class="cx"> private:

</span><span class="cx">     GridTrackSize gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const { return gridTrackSize(direction, translatedIndex, m_sizingOperation); }

</span><span class="cx">     const GridTrackSize&amp; rawGridTrackSize(GridTrackSizingDirection, unsigned translatedIndex) const;

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingOrderIteratorcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/OrderIterator.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/OrderIterator.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/OrderIterator.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -51,22 +51,22 @@

</span><span class="cx"> RenderBox* OrderIterator::next()

</span><span class="cx"> {

</span><span class="cx">     do {

</span><del>-        if (m_currentChild) {

</del><ins>+        if (!m_currentChild) {

+            if (m_orderValuesIterator == m_orderValues.end())

+                return nullptr;

+            

+            if (!m_isReset) {

+                ++m_orderValuesIterator;

+                if (m_orderValuesIterator == m_orderValues.end())

+                    return nullptr;

+            } else

+                m_isReset = false;

+            m_currentChild = m_containerBox.firstChildBox();

+        } else {

</ins><span class="cx">             m_currentChild = m_currentChild-&gt;nextSiblingBox();

</span><del>-            continue;

</del><span class="cx">         }

</span><del>-

-        if (m_orderIndex)

-            ++m_orderIndex.value();

-        else

-            m_orderIndex = 0;

-

-        if (m_orderIndex.value() &gt;= m_orderValues.size())

-            return nullptr;

-

-        m_currentChild = m_containerBox.firstChildBox();

-    } while (!m_currentChild || m_currentChild-&gt;style().order() != m_orderValues[m_orderIndex.value()]);

-

</del><ins>+    } while (!m_currentChild || m_currentChild-&gt;style().order() != *m_orderValuesIterator);

+    

</ins><span class="cx">     return m_currentChild;

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="lines">@@ -73,37 +73,18 @@

</span><span class="cx"> void OrderIterator::reset()

</span><span class="cx"> {

</span><span class="cx">     m_currentChild = nullptr;

</span><del>-    m_orderIndex = std::nullopt;

</del><ins>+    m_orderValuesIterator = m_orderValues.begin();

+    m_isReset = true;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-OrderIteratorPopulator::OrderIteratorPopulator(OrderIterator&amp; iterator)

-    : m_iterator(iterator)

-{

-    // Note that we don't release the memory here, we only invalidate the size

-    // This avoids unneeded reallocation if the size ends up not changing.

-    m_iterator.m_orderValues.shrink(0);

-}

-

</del><span class="cx"> OrderIteratorPopulator::~OrderIteratorPopulator()

</span><span class="cx"> {

</span><span class="cx">     m_iterator.reset();

</span><del>-

-    if (m_iterator.m_orderValues.size() &gt; 1)

-        removeDuplicatedOrderValues();

</del><span class="cx"> }

</span><span class="cx"> 

</span><del>-void OrderIteratorPopulator::removeDuplicatedOrderValues()

-{

-    auto&amp; orderValues = m_iterator.m_orderValues;

-

-    std::sort(orderValues.begin(), orderValues.end());

-    auto nextElement = std::unique(orderValues.begin(), orderValues.end());

-    orderValues.shrinkCapacity(nextElement - orderValues.begin());

-}

-

</del><span class="cx"> void OrderIteratorPopulator::collectChild(const RenderBox&amp; child)

</span><span class="cx"> {

</span><del>-    m_iterator.m_orderValues.append(child.style().order());

</del><ins>+    m_iterator.m_orderValues.insert(child.style().order());

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingOrderIteratorh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/OrderIterator.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/OrderIterator.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/OrderIterator.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -31,14 +31,13 @@

</span><span class="cx"> 

</span><span class="cx"> #pragma once

</span><span class="cx"> 

</span><ins>+#include &lt;set&gt;

</ins><span class="cx"> #include &lt;wtf/Noncopyable.h&gt;

</span><del>-#include &lt;wtf/Optional.h&gt;

-#include &lt;wtf/Vector.h&gt;

</del><span class="cx"> 

</span><span class="cx"> namespace WebCore {

</span><span class="cx"> 

</span><span class="cx"> class RenderBox;

</span><del>-

</del><ins>+    

</ins><span class="cx"> class OrderIterator {

</span><span class="cx"> public:

</span><span class="cx">     friend class OrderIteratorPopulator;

</span><span class="lines">@@ -55,20 +54,24 @@

</span><span class="cx">     RenderBox&amp; m_containerBox;

</span><span class="cx">     RenderBox* m_currentChild;

</span><span class="cx"> 

</span><del>-    Vector&lt;int, 1&gt; m_orderValues;

-    std::optional&lt;size_t&gt; m_orderIndex;

</del><ins>+    typedef std::set&lt;int&gt; OrderValues;

+    OrderValues m_orderValues;

+    OrderValues::const_iterator m_orderValuesIterator;

+    bool m_isReset { false };

</ins><span class="cx"> };

</span><span class="cx"> 

</span><span class="cx"> class OrderIteratorPopulator {

</span><span class="cx"> public:

</span><del>-    OrderIteratorPopulator(OrderIterator&amp;);

</del><ins>+    explicit OrderIteratorPopulator(OrderIterator&amp; iterator)

+        : m_iterator(iterator)

+    {

+        m_iterator.m_orderValues.clear();

+    }

</ins><span class="cx">     ~OrderIteratorPopulator();

</span><span class="cx"> 

</span><span class="cx">     void collectChild(const RenderBox&amp;);

</span><span class="cx"> 

</span><span class="cx"> private:

</span><del>-    void removeDuplicatedOrderValues();

-

</del><span class="cx">     OrderIterator&amp; m_iterator;

</span><span class="cx"> };

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderBlockcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBlock.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderBlock.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderBlock.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -1258,6 +1258,9 @@

</span><span class="cx"> 

</span><span class="cx"> void RenderBlock::updateBlockChildDirtyBitsBeforeLayout(bool relayoutChildren, RenderBox&amp; child)

</span><span class="cx"> {

</span><ins>+    if (child.isOutOfFlowPositioned())

+        return;

+

</ins><span class="cx">     // FIXME: Technically percentage height objects only need a relayout if their percentage isn't going to be turned into

<span class="cx">     // an auto value. Add a method to determine this, so that we can avoid the relayout.

</span><span class="cx">     if (relayoutChildren || (child.hasRelativeLogicalHeight() &amp;&amp; !isRenderView()))

</span><span class="lines">@@ -1471,9 +1474,19 @@

</span><span class="cx">     }

</span><span class="cx"> 

</span><span class="cx">     r.layoutIfNeeded();

</span><ins>+    

+    auto* parent = r.parent();

+    bool layoutChanged = false;

+    if (parent-&gt;isFlexibleBox() &amp;&amp; downcast&lt;RenderFlexibleBox&gt;(parent)-&gt;setStaticPositionForPositionedLayout(r)) {

+        // The static position of an abspos child of a flexbox depends on its size

+        // (for example, they can be centered). So we may have to reposition the

+        // item after layout.

+        // FIXME: We could probably avoid a layout here and just reposition?

+        layoutChanged = true;

+    }

</ins><span class="cx"> 

<span class="cx">     // Lay out again if our estimate was wrong.

</span><del>-    if (needsBlockDirectionLocationSetBeforeLayout &amp;&amp; logicalTopForChild(r) != oldLogicalTop) {

</del><ins>+    if (layoutChanged || (needsBlockDirectionLocationSetBeforeLayout &amp;&amp; logicalTopForChild(r) != oldLogicalTop)) {

</ins><span class="cx">         r.setChildNeedsLayout(MarkOnlyThis);

</span><span class="cx">         r.layoutIfNeeded();

</span><span class="cx">     }

</span><span class="lines">@@ -2789,22 +2802,8 @@

</span><span class="cx">         margin = marginStart + marginEnd;

</span><span class="cx"> 

</span><span class="cx">         LayoutUnit childMinPreferredLogicalWidth, childMaxPreferredLogicalWidth;

</span><del>-        if (is&lt;RenderBox&gt;(*child) &amp;&amp; child-&gt;isHorizontalWritingMode() != isHorizontalWritingMode()) {

-            auto&amp; childBox = downcast&lt;RenderBox&gt;(*child);

-            childMinPreferredLogicalWidth = childMaxPreferredLogicalWidth = childBox.computeLogicalHeight(childBox.borderAndPaddingLogicalHeight(), 0).m_extent;

-        } else {

-            childMinPreferredLogicalWidth = child-&gt;minPreferredLogicalWidth();

-            childMaxPreferredLogicalWidth = child-&gt;maxPreferredLogicalWidth();

</del><ins>+        computeChildPreferredLogicalWidths(*child, childMinPreferredLogicalWidth, childMaxPreferredLogicalWidth);

</ins><span class="cx"> 

</span><del>-            if (is&lt;RenderBlock&gt;(*child)) {

-                const Length&amp; computedInlineSize = child-&gt;style().logicalWidth();

-                if (computedInlineSize.isMaxContent())

-                    childMinPreferredLogicalWidth = childMaxPreferredLogicalWidth;

-                else if (computedInlineSize.isMinContent())

-                    childMaxPreferredLogicalWidth = childMinPreferredLogicalWidth;

-            }

-        }

-

</del><span class="cx">         LayoutUnit w = childMinPreferredLogicalWidth + margin;

</span><span class="cx">         minLogicalWidth = std::max(w, minLogicalWidth);

</span><span class="cx">         

</span><span class="lines">@@ -2850,6 +2849,34 @@

</span><span class="cx">     maxLogicalWidth = std::max(floatLeftWidth + floatRightWidth, maxLogicalWidth);

</span><span class="cx"> }

</span><span class="cx"> 

</span><ins>+void RenderBlock::computeChildPreferredLogicalWidths(RenderObject&amp; child, LayoutUnit&amp; minPreferredLogicalWidth, LayoutUnit&amp; maxPreferredLogicalWidth) const

+{

+    if (child.isBox() &amp;&amp; child.isHorizontalWritingMode() != isHorizontalWritingMode()) {

+        // If the child is an orthogonal flow, child's height determines the width,

+        // but the height is not available until layout.

+        // http://dev.w3.org/csswg/css-writing-modes-3/#orthogonal-shrink-to-fit

+        if (!child.needsLayout()) {

+            minPreferredLogicalWidth = maxPreferredLogicalWidth = downcast&lt;RenderBox&gt;(child).logicalHeight();

+            return;

+        }

+        minPreferredLogicalWidth = maxPreferredLogicalWidth = downcast&lt;RenderBox&gt;(child).computeLogicalHeightWithoutLayout();

+        return;

+    }

+    minPreferredLogicalWidth = child.minPreferredLogicalWidth();

+    maxPreferredLogicalWidth = child.maxPreferredLogicalWidth();

+    

+    // For non-replaced blocks if the inline size is min|max-content or a definite

+    // size the min|max-content contribution is that size plus border, padding and

+    // margin https://drafts.csswg.org/css-sizing/#block-intrinsic

+    if (child.isRenderBlock()) {

+        const Length&amp; computedInlineSize = child.style().logicalWidth();

+        if (computedInlineSize.isMaxContent())

+            minPreferredLogicalWidth = maxPreferredLogicalWidth;

+        else if (computedInlineSize.isMinContent())

+            maxPreferredLogicalWidth = minPreferredLogicalWidth;

+    }

+}

+

</ins><span class="cx"> bool RenderBlock::hasLineIfEmpty() const

</span><span class="cx"> {

</span><span class="cx">     if (!element())

</span><span class="lines">@@ -3822,4 +3849,57 @@

</span><span class="cx"> 

</span><span class="cx"> #endif

</span><span class="cx"> 

</span><ins>+bool RenderBlock::hasDefiniteLogicalHeight() const

+{

+    return (bool)availableLogicalHeightForPercentageComputation();

+}

+

+std::optional&lt;LayoutUnit&gt; RenderBlock::availableLogicalHeightForPercentageComputation() const

+{

+    std::optional&lt;LayoutUnit&gt; availableHeight;

+    

+    // For anonymous blocks that are skipped during percentage height calculation,

+    // we consider them to have an indefinite height.

+    if (skipContainingBlockForPercentHeightCalculation(*this, false))

+        return availableHeight;

+    

+    const auto&amp; styleToUse = style();

+    

+    // A positioned element that specified both top/bottom or that specifies

+    // height should be treated as though it has a height explicitly specified

+    // that can be used for any percentage computations.

+    bool isOutOfFlowPositionedWithSpecifiedHeight = isOutOfFlowPositioned() &amp;&amp; (!styleToUse.logicalHeight().isAuto() || (!styleToUse.logicalTop().isAuto() &amp;&amp; !styleToUse.logicalBottom().isAuto()));

+    

+    std::optional&lt;LayoutUnit&gt; stretchedFlexHeight;

+    if (isFlexItem())

+        stretchedFlexHeight = downcast&lt;RenderFlexibleBox&gt;(parent())-&gt;childLogicalHeightForPercentageResolution(*this);

+    

+    if (stretchedFlexHeight)

+        availableHeight = stretchedFlexHeight;

+    else if (isGridItem() &amp;&amp; hasOverrideLogicalContentHeight())

+        availableHeight = overrideLogicalContentHeight();

+    else if (styleToUse.logicalHeight().isFixed()) {

+        LayoutUnit contentBoxHeight = adjustContentBoxLogicalHeightForBoxSizing((LayoutUnit)styleToUse.logicalHeight().value());

+        availableHeight = std::max(LayoutUnit(), constrainContentBoxLogicalHeightByMinMax(contentBoxHeight - scrollbarLogicalHeight(), std::nullopt));

+    } else if (styleToUse.logicalHeight().isPercentOrCalculated() &amp;&amp; !isOutOfFlowPositionedWithSpecifiedHeight) {

+        std::optional&lt;LayoutUnit&gt; heightWithScrollbar = computePercentageLogicalHeight(styleToUse.logicalHeight());

+        if (heightWithScrollbar) {

+            LayoutUnit contentBoxHeightWithScrollbar = adjustContentBoxLogicalHeightForBoxSizing(heightWithScrollbar.value());

+            // We need to adjust for min/max height because this method does not

+            // handle the min/max of the current block, its caller does. So the

+            // return value from the recursive call will not have been adjusted

+            // yet.

+            LayoutUnit contentBoxHeight = constrainContentBoxLogicalHeightByMinMax(contentBoxHeightWithScrollbar - scrollbarLogicalHeight(), std::nullopt);

+            availableHeight = std::max(LayoutUnit(), contentBoxHeight);

+        }

+    } else if (isOutOfFlowPositionedWithSpecifiedHeight) {

+        // Don't allow this to affect the block' size() member variable, since this

+        // can get called while the block is still laying out its kids.

+        LogicalExtentComputedValues computedValues = computeLogicalHeight(logicalHeight(), LayoutUnit());

+        availableHeight = computedValues.m_extent - borderAndPaddingLogicalHeight() - scrollbarLogicalHeight();

+    } else if (isRenderView())

+        availableHeight = view().pageOrViewLogicalHeight();

+    

+    return availableHeight;

+}

</ins><span class="cx"> } // namespace WebCore

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderBlockh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBlock.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderBlock.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderBlock.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -93,6 +93,11 @@

</span><span class="cx">     void addPercentHeightDescendant(RenderBox&amp;);

</span><span class="cx">     static void removePercentHeightDescendant(RenderBox&amp;);

</span><span class="cx">     TrackedRendererListHashSet* percentHeightDescendants() const;

</span><ins>+    bool hasPercentHeightDescendants() const

+    {

+        TrackedRendererListHashSet* objects = percentHeightDescendants();

+        return objects &amp;&amp; !objects-&gt;isEmpty();

+    }

</ins><span class="cx">     static bool hasPercentHeightContainerMap();

</span><span class="cx">     static bool hasPercentHeightDescendant(RenderBox&amp;);

</span><span class="cx">     static void clearPercentHeightDescendantsFrom(RenderBox&amp;);

</span><span class="lines">@@ -308,6 +313,9 @@

</span><span class="cx">     virtual bool cachedFlowThreadContainingBlockNeedsUpdate() const;

</span><span class="cx">     void resetFlowThreadContainingBlockAndChildInfoIncludingDescendants();

</span><span class="cx"> 

</span><ins>+    std::optional&lt;LayoutUnit&gt; availableLogicalHeightForPercentageComputation() const;

+    bool hasDefiniteLogicalHeight() const;

+    

</ins><span class="cx"> protected:

</span><span class="cx">     RenderFlowThread* locateFlowThreadContainingBlock() const override;

</span><span class="cx">     void willBeDestroyed() override;

</span><span class="lines">@@ -395,6 +403,8 @@

</span><span class="cx"> 

</span><span class="cx">     void preparePaginationBeforeBlockLayout(bool&amp;);

</span><span class="cx"> 

</span><ins>+    void computeChildPreferredLogicalWidths(RenderObject&amp;, LayoutUnit&amp; minPreferredLogicalWidth, LayoutUnit&amp; maxPreferredLogicalWidth) const;

+

</ins><span class="cx"> private:

</span><span class="cx">     static std::unique_ptr&lt;RenderBlock&gt; createAnonymousBlockWithStyleAndDisplay(Document&amp;, const RenderStyle&amp;, EDisplay);

</span><span class="cx"> 

</span><span class="lines">@@ -444,7 +454,7 @@

</span><span class="cx">     virtual bool isPointInOverflowControl(HitTestResult&amp;, const LayoutPoint&amp; locationInContainer, const LayoutPoint&amp; accumulatedOffset);

</span><span class="cx"> 

</span><span class="cx">     void computeBlockPreferredLogicalWidths(LayoutUnit&amp; minLogicalWidth, LayoutUnit&amp; maxLogicalWidth) const;

</span><del>-

</del><ins>+    

</ins><span class="cx">     LayoutRect rectWithOutlineForRepaint(const RenderLayerModelObject* repaintContainer, LayoutUnit outlineWidth) const final;

</span><span class="cx">     const RenderStyle&amp; outlineStyleForRepaint() const final;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderBlockFlowcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBlockFlow.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderBlockFlow.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderBlockFlow.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -4274,8 +4274,10 @@

</span><span class="cx">             if (!is&lt;RenderInline&gt;(*child) &amp;&amp; !is&lt;RenderText&gt;(*child)) {

<span class="cx">                 // Case (2). Inline replaced elements and floats.

<span class="cx">                 // Terminate the current line as far as minwidth is concerned.

</span><del>-                childMin += child-&gt;minPreferredLogicalWidth().ceilToFloat();

-                childMax += child-&gt;maxPreferredLogicalWidth().ceilToFloat();

</del><ins>+                LayoutUnit childMinPreferredLogicalWidth, childMaxPreferredLogicalWidth;

+                computeChildPreferredLogicalWidths(*child, childMinPreferredLogicalWidth, childMaxPreferredLogicalWidth);

+                childMin += childMinPreferredLogicalWidth.ceilToFloat();

+                childMax += childMaxPreferredLogicalWidth.ceilToFloat();

</ins><span class="cx"> 

</span><span class="cx">                 bool clearPreviousFloat;

</span><span class="cx">                 if (child-&gt;isFloating()) {

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderBoxcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderBox.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -38,6 +38,7 @@

</span><span class="cx"> #include &quot;HTMLButtonElement.h&quot;

</span><span class="cx"> #include &quot;HTMLFrameOwnerElement.h&quot;

</span><span class="cx"> #include &quot;HTMLHtmlElement.h&quot;

</span><ins>+#include &quot;HTMLImageElement.h&quot;

</ins><span class="cx"> #include &quot;HTMLInputElement.h&quot;

</span><span class="cx"> #include &quot;HTMLLegendElement.h&quot;

</span><span class="cx"> #include &quot;HTMLNames.h&quot;

</span><span class="lines">@@ -2532,20 +2533,24 @@

</span><span class="cx">     return logicalWidthResult;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-static bool flexItemHasStretchAlignment(const RenderBox&amp; flexitem)

</del><ins>+bool RenderBox::columnFlexItemHasStretchAlignment() const

</ins><span class="cx"> {

</span><del>-    auto parent = flexitem.parent();

-    return flexitem.style().resolvedAlignSelf(parent-&gt;style(), ItemPositionStretch).position() == ItemPositionStretch;

</del><ins>+    // auto margins mean we don't stretch. Note that this function will only be

+    // used for widths, so we don't have to check marginBefore/marginAfter.

+    const auto&amp; parentStyle = parent()-&gt;style();

+    ASSERT(parentStyle.isColumnFlexDirection());

+    if (style().marginStart().isAuto() || style().marginEnd().isAuto())

+        return false;

+    return style().resolvedAlignSelf(isAnonymous() ? &amp;parentStyle : nullptr, containingBlock()-&gt;selfAlignmentNormalBehavior()).position() == ItemPositionStretch;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-static bool isStretchingColumnFlexItem(const RenderBox&amp; flexitem)

</del><ins>+bool RenderBox::isStretchingColumnFlexItem() const

</ins><span class="cx"> {

</span><del>-    auto parent = flexitem.parent();

-    if (parent-&gt;isDeprecatedFlexibleBox() &amp;&amp; parent-&gt;style().boxOrient() == VERTICAL &amp;&amp; parent-&gt;style().boxAlign() == BSTRETCH)

</del><ins>+    if (parent()-&gt;isDeprecatedFlexibleBox() &amp;&amp; parent()-&gt;style().boxOrient() == VERTICAL &amp;&amp; parent()-&gt;style().boxAlign() == BSTRETCH)

</ins><span class="cx">         return true;

</span><span class="cx"> 

<span class="cx">     // We don't stretch multiline flexboxes because they need to apply line spacing (align-content) first.

</span><del>-    if (parent-&gt;isFlexibleBox() &amp;&amp; parent-&gt;style().flexWrap() == FlexNoWrap &amp;&amp; parent-&gt;style().isColumnFlexDirection() &amp;&amp; flexItemHasStretchAlignment(flexitem))

</del><ins>+    if (parent()-&gt;isFlexibleBox() &amp;&amp; parent()-&gt;style().flexWrap() == FlexNoWrap &amp;&amp; parent()-&gt;style().isColumnFlexDirection() &amp;&amp; columnFlexItemHasStretchAlignment())

</ins><span class="cx">         return true;

</span><span class="cx">     return false;

</span><span class="cx"> }

</span><span class="lines">@@ -2563,8 +2568,8 @@

</span><span class="cx">         return false;

</span><span class="cx">     }

</span><span class="cx">     if (containingBlock-&gt;isHorizontalWritingMode() != isHorizontalWritingMode())

</span><del>-        return style.resolvedAlignSelf(containingBlock-&gt;style(), ItemPositionStretch).position() == ItemPositionStretch;

-    return style.resolvedJustifySelf(containingBlock-&gt;style(), ItemPositionStretch).position() == ItemPositionStretch;

</del><ins>+        return style.resolvedAlignSelf(&amp;containingBlock-&gt;style(), ItemPositionStretch).position() == ItemPositionStretch;

+    return style.resolvedJustifySelf(&amp;containingBlock-&gt;style(), ItemPositionStretch).position() == ItemPositionStretch;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const

</span><span class="lines">@@ -2611,7 +2616,7 @@

<span class="cx">         // For multiline columns, we need to apply align-content first, so we can't stretch now.

</span><span class="cx">         if (!parent()-&gt;style().isColumnFlexDirection() || parent()-&gt;style().flexWrap() != FlexNoWrap)

</span><span class="cx">             return true;

</span><del>-        if (!flexItemHasStretchAlignment(*this))

</del><ins>+        if (!columnFlexItemHasStretchAlignment())

</ins><span class="cx">             return true;

</span><span class="cx">     }

</span><span class="cx"> 

</span><span class="lines">@@ -2626,7 +2631,7 @@

<span class="cx">     // stretching column flexbox.

<span class="cx">     // FIXME: Think about block-flow here.

</span><span class="cx">     // https://bugs.webkit.org/show_bug.cgi?id=46473

</span><del>-    if (logicalWidth.type() == Auto &amp;&amp; !isStretchingColumnFlexItem(*this) &amp;&amp; element() &amp;&amp; (is&lt;HTMLInputElement&gt;(*element()) || is&lt;HTMLSelectElement&gt;(*element()) || is&lt;HTMLButtonElement&gt;(*element()) || is&lt;HTMLTextAreaElement&gt;(*element()) || is&lt;HTMLLegendElement&gt;(*element())))

</del><ins>+    if (logicalWidth.type() == Auto &amp;&amp; !isStretchingColumnFlexItem() &amp;&amp; element() &amp;&amp; (is&lt;HTMLInputElement&gt;(*element()) || is&lt;HTMLSelectElement&gt;(*element()) || is&lt;HTMLButtonElement&gt;(*element()) || is&lt;HTMLTextAreaElement&gt;(*element()) || is&lt;HTMLLegendElement&gt;(*element())))

</ins><span class="cx">         return true;

</span><span class="cx"> 

</span><span class="cx">     if (isHorizontalWritingMode() != containingBlock()-&gt;isHorizontalWritingMode())

</span><span class="lines">@@ -2637,6 +2642,7 @@

</span><span class="cx"> 

</span><span class="cx"> void RenderBox::computeInlineDirectionMargins(const RenderBlock&amp; containingBlock, LayoutUnit containerWidth, LayoutUnit childWidth, LayoutUnit&amp; marginStart, LayoutUnit&amp; marginEnd) const

</span><span class="cx"> {

</span><ins>+    

</ins><span class="cx">     const RenderStyle&amp; containingBlockStyle = containingBlock.style();

</span><span class="cx">     Length marginStartLength = style().marginStartUsing(&amp;containingBlockStyle);

</span><span class="cx">     Length marginEndLength = style().marginEndUsing(&amp;containingBlockStyle);

</span><span class="lines">@@ -2648,6 +2654,16 @@

</span><span class="cx">         return;

</span><span class="cx">     }

</span><span class="cx"> 

</span><ins>+    if (containingBlock.isFlexibleBox()) {

+        // We need to let flexbox handle the margin adjustment - otherwise, flexbox

+        // will think we're wider than we actually are and calculate line sizes

+        // wrong. See also http://dev.w3.org/csswg/css-flexbox/#auto-margins

+        if (marginStartLength.isAuto())

+            marginStartLength = Length(0, Fixed);

+        if (marginEndLength.isAuto())

+            marginEndLength = Length(0, Fixed);

+    }

+

</ins><span class="cx">     // Case One: The object is being centered in the containing block's available logical width.

</span><span class="cx">     if ((marginStartLength.isAuto() &amp;&amp; marginEndLength.isAuto() &amp;&amp; childWidth &lt; containerWidth)

</span><span class="cx">         || (!marginStartLength.isAuto() &amp;&amp; !marginEndLength.isAuto() &amp;&amp; containingBlock.style().textAlign() == WEBKIT_CENTER)) {

</span><span class="lines">@@ -2773,8 +2789,16 @@

</span><span class="cx">     return shouldFlip;

</span><span class="cx"> }

</span><span class="cx"> 

</span><ins>+void RenderBox::cacheIntrinsicContentLogicalHeightForFlexItem(LayoutUnit height) const

+{

+    if (isFloatingOrOutOfFlowPositioned() || !parent() || !parent()-&gt;isFlexibleBox())

+        return;

+    downcast&lt;RenderFlexibleBox&gt;(parent())-&gt;setCachedChildIntrinsicContentLogicalHeight(*this, height);

+}

+

</ins><span class="cx"> void RenderBox::updateLogicalHeight()

</span><span class="cx"> {

</span><ins>+    cacheIntrinsicContentLogicalHeightForFlexItem(contentLogicalHeight());

</ins><span class="cx">     auto computedValues = computeLogicalHeight(logicalHeight(), logicalTop());

</span><span class="cx">     setLogicalHeight(computedValues.m_extent);

</span><span class="cx">     setLogicalTop(computedValues.m_position);

</span><span class="lines">@@ -2895,6 +2919,15 @@

</span><span class="cx">     return computedValues;

</span><span class="cx"> }

</span><span class="cx"> 

</span><ins>+LayoutUnit RenderBox::computeLogicalHeightWithoutLayout() const

+{

+    // FIXME:: We should probably return something other than just

+    // border + padding, but for now we have no good way to do anything else

+    // without layout, so we just use that.

+    LogicalExtentComputedValues computedValues = computeLogicalHeight(borderAndPaddingLogicalHeight(), LayoutUnit());

+    return computedValues.m_extent;

+}

+

</ins><span class="cx"> std::optional&lt;LayoutUnit&gt; RenderBox::computeLogicalHeightUsing(SizeType heightType, const Length&amp; height, std::optional&lt;LayoutUnit&gt; intrinsicContentHeight) const

</span><span class="cx"> {

</span><span class="cx">     if (std::optional&lt;LayoutUnit&gt; logicalHeight = computeContentAndScrollbarLogicalHeightUsing(heightType, height, intrinsicContentHeight))

</span><span class="lines">@@ -2948,15 +2981,40 @@

</span><span class="cx">     if (containingBlock.isInFlowRenderFlowThread() &amp;&amp; !isPerpendicularWritingMode)

</span><span class="cx">         return true;

</span><span class="cx"> 

<del>-    // For quirks mode and anonymous blocks, we skip auto-height containingBlocks when computing percentages.

-    // For standards mode, we treat the percentage as auto if it has an auto-height containing block.

-    if (!document().inQuirksMode() &amp;&amp; !containingBlock.isAnonymousBlock())

</del><ins>+    // Render view is not considered auto height.

+    if (is&lt;RenderView&gt;(containingBlock))

</ins><span class="cx">         return false;

</span><del>-    return !containingBlock.isTableCell() &amp;&amp; !containingBlock.isOutOfFlowPositioned() &amp;&amp; containingBlock.style().logicalHeight().isAuto() &amp;&amp; isHorizontalWritingMode() == containingBlock.isHorizontalWritingMode();

</del><ins>+

+    // If the writing mode of the containing block is orthogonal to ours, it means

+    // that we shouldn't skip anything, since we're going to resolve the

+    // percentage height against a containing block *width*.

+    if (isPerpendicularWritingMode)

+        return false;

+    

+    // Anonymous blocks should not impede percentage resolution on a child.

+    // Examples of such anonymous blocks are blocks wrapped around inlines that

+    // have block siblings (from the CSS spec) and multicol flow threads (an

+    // implementation detail). Another implementation detail, ruby runs, create

+    // anonymous inline-blocks, so skip those too. All other types of anonymous

+    // objects, such as table-cells and flexboxes, will be treated as if they were

+    // non-anonymous.

+    if (containingBlock.isAnonymous())

+        return containingBlock.style().display() == BLOCK || containingBlock.style().display() == INLINE_BLOCK;

+    

+    // For quirks mode, we skip most auto-height containing blocks when computing

+    // percentages.

+    return document().inQuirksMode() &amp;&amp; !containingBlock.isTableCell() &amp;&amp; !containingBlock.isOutOfFlowPositioned() &amp;&amp; !containingBlock.isRenderGrid() &amp;&amp; containingBlock.style().logicalHeight().isAuto();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-static bool tableCellShouldHaveZeroInitialSize(const RenderBlock&amp; block, bool scrollsOverflowY)

</del><ins>+bool RenderBox::shouldTreatChildAsReplacedInTableCells() const

</ins><span class="cx"> {

</span><ins>+    if (isReplaced())

+        return true;

+    return element() &amp;&amp; (element()-&gt;isFormControlElement() || is&lt;HTMLImageElement&gt;(element()));

+}

+

+static bool tableCellShouldHaveZeroInitialSize(const RenderBlock&amp; block, const RenderBox&amp; child, bool scrollsOverflowY)

+{

</ins><span class="cx">     // Normally we would let the cell size intrinsically, but scrolling overflow has to be

<span class="cx">     // treated differently, since WinIE lets scrolled overflow regions shrink as needed.

</span><span class="cx">     // While we can't get all cases right, we can at least detect when the cell has a specified

</span><span class="lines">@@ -2965,7 +3023,7 @@

</span><span class="cx">     // to grow to fill the space. This could end up being wrong in some cases, but it is

<span class="cx">     // preferable to the alternative (sizing intrinsically and making the row end up too big).

</span><span class="cx">     const RenderTableCell&amp; cell = downcast&lt;RenderTableCell&gt;(block);

</span><del>-    return scrollsOverflowY &amp;&amp; (!cell.style().logicalHeight().isAuto() || !cell.table()-&gt;style().logicalHeight().isAuto());

</del><ins>+    return scrollsOverflowY &amp;&amp; !child.shouldTreatChildAsReplacedInTableCells() &amp;&amp; (!cell.style().logicalHeight().isAuto() || !cell.table()-&gt;style().logicalHeight().isAuto());

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> std::optional&lt;LayoutUnit&gt; RenderBox::computePercentageLogicalHeight(const Length&amp; height) const

</span><span class="lines">@@ -2983,23 +3041,13 @@

</span><span class="cx">         skippedAutoHeightContainingBlock = true;

</span><span class="cx">         containingBlockChild = cb;

</span><span class="cx">         cb = cb-&gt;containingBlock();

</span><del>-        cb-&gt;addPercentHeightDescendant(const_cast&lt;RenderBox&amp;&gt;(*this));

</del><span class="cx">     }

</span><ins>+    cb-&gt;addPercentHeightDescendant(const_cast&lt;RenderBox&amp;&gt;(*this));

</ins><span class="cx"> 

</span><del>-    const RenderStyle&amp; cbstyle = cb-&gt;style();

-

-    // A positioned element that specified both top/bottom or that specifies height should be treated as though it has a height

-    // explicitly specified that can be used for any percentage computations.

-    bool isOutOfFlowPositionedWithSpecifiedHeight = cb-&gt;isOutOfFlowPositioned() &amp;&amp; (!cbstyle.logicalHeight().isAuto() || (!cbstyle.logicalTop().isAuto() &amp;&amp; !cbstyle.logicalBottom().isAuto()));

-

-    bool includeBorderPadding = isTable();

-

</del><span class="cx">     if (isHorizontal != cb-&gt;isHorizontalWritingMode())

</span><span class="cx">         availableHeight = containingBlockChild-&gt;containingBlockLogicalWidthForContent();

</span><span class="cx">     else if (hasOverrideContainingBlockLogicalHeight())

</span><span class="cx">         availableHeight = overrideContainingBlockContentLogicalHeight();

</span><del>-    else if (cb-&gt;isGridItem() &amp;&amp; cb-&gt;hasOverrideLogicalContentHeight())

-        availableHeight = cb-&gt;overrideLogicalContentHeight();

</del><span class="cx">     else if (is&lt;RenderTableCell&gt;(*cb)) {

</span><span class="cx">         if (!skippedAutoHeightContainingBlock) {

</span><span class="cx">             // Table cells violate what the CSS spec says to do with heights. Basically we

</span><span class="lines">@@ -3006,44 +3054,28 @@

</span><span class="cx">             // don't care if the cell specified a height or not. We just always make ourselves

<span class="cx">             // be a percentage of the cell's current content height.

</span><span class="cx">             if (!cb-&gt;hasOverrideLogicalContentHeight())

</span><del>-                return tableCellShouldHaveZeroInitialSize(*cb, scrollsOverflowY()) ? std::optional&lt;LayoutUnit&gt;(0) : std::nullopt;

</del><ins>+                return tableCellShouldHaveZeroInitialSize(*cb, *this, scrollsOverflowY()) ? std::optional&lt;LayoutUnit&gt;(0) : std::nullopt;

</ins><span class="cx"> 

</span><span class="cx">             availableHeight = cb-&gt;overrideLogicalContentHeight();

</span><del>-            includeBorderPadding = true;

</del><span class="cx">         }

</span><del>-    } else if (cbstyle.logicalHeight().isFixed()) {

-        LayoutUnit contentBoxHeight = cb-&gt;adjustContentBoxLogicalHeightForBoxSizing(LayoutUnit(cbstyle.logicalHeight().value()));

-        availableHeight = std::max&lt;LayoutUnit&gt;(0, cb-&gt;constrainContentBoxLogicalHeightByMinMax(contentBoxHeight - cb-&gt;scrollbarLogicalHeight(), std::nullopt));

-    } else if (cbstyle.logicalHeight().isPercentOrCalculated() &amp;&amp; !isOutOfFlowPositionedWithSpecifiedHeight) {

-        // We need to recur and compute the percentage height for our containing block.

-        if (std::optional&lt;LayoutUnit&gt; heightWithScrollbar = cb-&gt;computePercentageLogicalHeight(cbstyle.logicalHeight())) {

-            LayoutUnit contentBoxHeightWithScrollbar = cb-&gt;adjustContentBoxLogicalHeightForBoxSizing(heightWithScrollbar);

-            // We need to adjust for min/max height because this method does not

-            // handle the min/max of the current block, its caller does. So the

-            // return value from the recursive call will not have been adjusted

-            // yet.

-            LayoutUnit contentBoxHeight = cb-&gt;constrainContentBoxLogicalHeightByMinMax(contentBoxHeightWithScrollbar - cb-&gt;scrollbarLogicalHeight(), std::nullopt);

-            availableHeight = std::max&lt;LayoutUnit&gt;(0, contentBoxHeight);

-        }

-    } else if (isOutOfFlowPositionedWithSpecifiedHeight) {

-        // Don't allow this to affect the block' height() member variable, since this

-        // can get called while the block is still laying out its kids.

-        auto computedValues = cb-&gt;computeLogicalHeight(cb-&gt;logicalHeight(), 0);

-        availableHeight = computedValues.m_extent - cb-&gt;borderAndPaddingLogicalHeight() - cb-&gt;scrollbarLogicalHeight();

-    } else if (cb-&gt;isRenderView())

-        availableHeight = view().pageOrViewLogicalHeight();

-

</del><ins>+    } else

+        availableHeight = cb-&gt;availableLogicalHeightForPercentageComputation();

+    

</ins><span class="cx">     if (!availableHeight)

</span><span class="cx">         return availableHeight;

</span><span class="cx"> 

</span><del>-    LayoutUnit result = valueForLength(height, availableHeight.value() - rootMarginBorderPaddingHeight);

-    if (includeBorderPadding) {

-        // FIXME: Table cells should default to box-sizing: border-box so we can avoid this hack.

-        // It is necessary to use the border-box to match WinIE's broken

-        // box model. This is essential for sizing inside

-        // table cells using percentage heights.

</del><ins>+    LayoutUnit result = valueForLength(height, availableHeight.value() - rootMarginBorderPaddingHeight + (isTable() &amp;&amp; isOutOfFlowPositioned() ? cb-&gt;paddingBefore() + cb-&gt;paddingAfter() : LayoutUnit()));

+    

+    // |overrideLogicalContentHeight| is the maximum height made available by the

+    // cell to its percent height children when we decide they can determine the

+    // height of the cell. If the percent height child is box-sizing:content-box

+    // then we must subtract the border and padding from the cell's

+    // |availableHeight| (given by |overrideLogicalContentHeight|) to arrive

+    // at the child's computed height.

+    bool subtractBorderAndPadding = isTable() || (is&lt;RenderTableCell&gt;(*cb) &amp;&amp; !skippedAutoHeightContainingBlock &amp;&amp; cb-&gt;hasOverrideLogicalContentHeight());

+    if (subtractBorderAndPadding) {

</ins><span class="cx">         result -= borderAndPaddingLogicalHeight();

</span><del>-        return std::max&lt;LayoutUnit&gt;(0, result);

</del><ins>+        return std::max(LayoutUnit(), result);

</ins><span class="cx">     }

</span><span class="cx">     return result;

</span><span class="cx"> }

</span><span class="lines">@@ -3138,8 +3170,16 @@

</span><span class="cx">                 if (is&lt;RenderView&gt;(*container) || is&lt;RenderNamedFlowThread&gt;(*container))

</span><span class="cx">                     break;

</span><span class="cx">                 container = container-&gt;containingBlock();

</span><del>-                downcast&lt;RenderBlock&gt;(*container).addPercentHeightDescendant(const_cast&lt;RenderBox&amp;&gt;(*this));

</del><span class="cx">             }

</span><ins>+            std::optional&lt;LayoutUnit&gt; stretchedHeight;

+            if (is&lt;RenderBlock&gt;(container)) {

+                auto* block = downcast&lt;RenderBlock&gt;(container);

+                block-&gt;addPercentHeightDescendant(*const_cast&lt;RenderBox*&gt;(this));

+                if (block-&gt;isFlexItem())

+                    stretchedHeight = downcast&lt;RenderFlexibleBox&gt;(block-&gt;parent())-&gt;childLogicalHeightForPercentageResolution(*block);

+                else if (block-&gt;isGridItem() &amp;&amp; block-&gt;hasOverrideLogicalContentHeight())

+                    stretchedHeight = block-&gt;overrideLogicalContentHeight();

+            }

</ins><span class="cx"> 

<span class="cx">             // FIXME: This calculation is not patched for block-flow yet.

</span><span class="cx">             // https://bugs.webkit.org/show_bug.cgi?id=46500

</span><span class="lines">@@ -3160,6 +3200,8 @@

</span><span class="cx">             LayoutUnit availableHeight;

</span><span class="cx">             if (isOutOfFlowPositioned())

</span><span class="cx">                 availableHeight = containingBlockLogicalHeightForPositioned(downcast&lt;RenderBoxModelObject&gt;(*container));

</span><ins>+            else if (stretchedHeight)

+                availableHeight = stretchedHeight.value();

</ins><span class="cx">             else {

</span><span class="cx">                 availableHeight = containingBlockLogicalHeightForContent(IncludeMarginBorderPadding);

</span><span class="cx">                 // It is necessary to use the border-box to match WinIE's broken

</span><span class="lines">@@ -3207,6 +3249,13 @@

</span><span class="cx">         return logicalHeight() - borderAndPaddingLogicalHeight();

</span><span class="cx">     }

</span><span class="cx"> 

</span><ins>+    if (isFlexItem()) {

+        auto&amp; flexBox = downcast&lt;RenderFlexibleBox&gt;(*parent());

+        auto stretchedHeight = flexBox.childLogicalHeightForPercentageResolution(*this);

+        if (stretchedHeight)

+            return stretchedHeight.value();

+    }

+

</ins><span class="cx">     if (h.isPercentOrCalculated() &amp;&amp; isOutOfFlowPositioned() &amp;&amp; !isRenderFlowThread()) {

<span class="cx">         // FIXME: This is wrong if the containingBlock has a perpendicular writing mode.

</span><span class="cx">         LayoutUnit availableHeight = containingBlockLogicalHeightForPositioned(*containingBlock());

</span><span class="lines">@@ -4661,108 +4710,15 @@

</span><span class="cx">     if (flowThread)

</span><span class="cx">         flowThread-&gt;clearRegionsOverflow(this);

</span><span class="cx"> }

</span><del>-

-static bool logicalWidthIsResolvable(const RenderBox&amp; renderBox)

</del><ins>+    

+bool RenderBox::percentageLogicalHeightIsResolvable() const

</ins><span class="cx"> {

</span><del>-    const RenderBox* box = &amp;renderBox;

-    while (box &amp;&amp; !is&lt;RenderView&gt;(*box) &amp;&amp; !box-&gt;isOutOfFlowPositioned()

-        &amp;&amp; !box-&gt;hasOverrideContainingBlockLogicalWidth()

-        &amp;&amp; (box-&gt;style().logicalWidth().isAuto() || box-&gt;isAnonymousBlock()))

-        box = box-&gt;containingBlock();

-

-    if (box-&gt;style().logicalWidth().isFixed())

-        return true;

-    if (box-&gt;isRenderView())

-        return true;

-    // The size of the containing block of an absolutely positioned element is always definite with respect to that

-    // element (http://dev.w3.org/csswg/css-sizing-3/#definite).

-    if (box-&gt;isOutOfFlowPositioned())

-        return true;

-    if (box-&gt;hasOverrideContainingBlockLogicalWidth())

-        return static_cast&lt;bool&gt;(box-&gt;overrideContainingBlockContentLogicalWidth());

-    if (box-&gt;style().logicalWidth().isPercentOrCalculated())

-        return logicalWidthIsResolvable(*box-&gt;containingBlock());

-

-    return false;

</del><ins>+    // Do this to avoid duplicating all the logic that already exists when computing

+    // an actual percentage height.

+    Length fakeLength(100, Percent);

+    return computePercentageLogicalHeight(fakeLength) != std::nullopt;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-bool RenderBox::hasDefiniteLogicalWidth() const

-{

-    return logicalWidthIsResolvable(*this);

-}

-

-inline static bool percentageLogicalHeightIsResolvable(const RenderBox&amp; box)

-{

-    return RenderBox::percentageLogicalHeightIsResolvableFromBlock(*box.containingBlock(), box.isOutOfFlowPositioned(), box.scrollsOverflowY());

-}

-

-bool RenderBox::percentageLogicalHeightIsResolvableFromBlock(const RenderBlock&amp; containingBlock, bool isOutOfFlowPositioned, bool scrollsOverflowY)

-{

-    // In quirks mode, blocks with auto height are skipped, and we keep looking for an enclosing

-    // block that may have a specified height and then use it. In strict mode, this violates the

-    // specification, which states that percentage heights just revert to auto if the containing

-    // block has an auto height. We still skip anonymous containing blocks in both modes, though, and look

-    // only at explicit containers.

-    const RenderBlock* cb = &amp;containingBlock;

-    bool inQuirksMode = cb-&gt;document().inQuirksMode();

-    bool skippedAutoHeightContainingBlock = false;

-    while (cb &amp;&amp; !is&lt;RenderView&gt;(*cb) &amp;&amp; !cb-&gt;isBody() &amp;&amp; !cb-&gt;isTableCell() &amp;&amp; !cb-&gt;isOutOfFlowPositioned() &amp;&amp; cb-&gt;style().logicalHeight().isAuto()) {

-        if (!inQuirksMode &amp;&amp; !cb-&gt;isAnonymousBlock())

-            break;

-        if (cb-&gt;hasOverrideContainingBlockLogicalHeight())

-            return static_cast&lt;bool&gt;(cb-&gt;overrideContainingBlockContentLogicalHeight());

-        skippedAutoHeightContainingBlock = true;

-        cb = cb-&gt;containingBlock();

-    }

-

-    // A positioned element that specified both top/bottom or that specifies height should be treated as though it has a height

-    // explicitly specified that can be used for any percentage computations.

-    // FIXME: We can't just check top/bottom here.

-    // https://bugs.webkit.org/show_bug.cgi?id=46500

-    bool isOutOfFlowPositionedWithSpecifiedHeight = cb-&gt;isOutOfFlowPositioned() &amp;&amp; (!cb-&gt;style().logicalHeight().isAuto() || (!cb-&gt;style().top().isAuto() &amp;&amp; !cb-&gt;style().bottom().isAuto()));

-

-    // Table cells violate what the CSS spec says to do with heights.  Basically we

-    // don't care if the cell specified a height or not.  We just always make ourselves

-    // be a percentage of the cell's current content height.

-    if (cb-&gt;isTableCell()) {

-        // Matches computePercentageLogicalHeight().

-        return skippedAutoHeightContainingBlock || cb-&gt;hasOverrideLogicalContentHeight() || tableCellShouldHaveZeroInitialSize(*cb, scrollsOverflowY);

-    }

-

-    // Otherwise we only use our percentage height if our containing block had a specified

-    // height.

-    if (cb-&gt;style().logicalHeight().isFixed())

-        return true;

-    if (cb-&gt;style().logicalHeight().isPercentOrCalculated() &amp;&amp; !isOutOfFlowPositionedWithSpecifiedHeight)

-        return percentageLogicalHeightIsResolvableFromBlock(*cb-&gt;containingBlock(), cb-&gt;isOutOfFlowPositioned(), cb-&gt;scrollsOverflowY());

-    if (cb-&gt;isRenderView() || inQuirksMode || isOutOfFlowPositionedWithSpecifiedHeight)

-        return true;

-    if (cb-&gt;isDocumentElementRenderer() &amp;&amp; isOutOfFlowPositioned) {

-        // Match the positioned objects behavior, which is that positioned objects will fill their viewport

-        // always.  Note we could only hit this case by recurring into computePercentageLogicalHeight on a positioned containing block.

-        return true;

-    }

-

-    return false;

-}

-

-bool RenderBox::hasDefiniteLogicalHeight() const

-{

-    const Length&amp; logicalHeight = style().logicalHeight();

-    if (logicalHeight.isFixed())

-        return true;

-    // The size of the containing block of an absolutely positioned element is always definite with respect to that

-    // element (http://dev.w3.org/csswg/css-sizing-3/#definite).

-    if (isOutOfFlowPositioned())

-        return true;

-    if (hasOverrideContainingBlockLogicalHeight())

-        return static_cast&lt;bool&gt;(overrideContainingBlockContentLogicalHeight());

-    if (logicalHeight.isIntrinsicOrAuto())

-        return false;

-

-    return percentageLogicalHeightIsResolvable(*this);

-}

-

</del><span class="cx"> bool RenderBox::hasUnsplittableScrollingOverflow() const

</span><span class="cx"> {

<span class="cx">     // We will paginate as long as we don't scroll overflow in the pagination direction.

</span><span class="lines">@@ -4776,8 +4732,8 @@

</span><span class="cx">     // conditions, but it should work out to be good enough for common cases. Paginating overflow

<span class="cx">     // with scrollbars present is not the end of the world and is what we used to do in the old model anyway.

</span><span class="cx">     return !style().logicalHeight().isIntrinsicOrAuto()

</span><del>-        || (!style().logicalMaxHeight().isIntrinsicOrAuto() &amp;&amp; !style().logicalMaxHeight().isUndefined() &amp;&amp; (!style().logicalMaxHeight().isPercentOrCalculated() || percentageLogicalHeightIsResolvable(*this)))

-        || (!style().logicalMinHeight().isIntrinsicOrAuto() &amp;&amp; style().logicalMinHeight().isPositive() &amp;&amp; (!style().logicalMinHeight().isPercentOrCalculated() || percentageLogicalHeightIsResolvable(*this)));

</del><ins>+        || (!style().logicalMaxHeight().isIntrinsicOrAuto() &amp;&amp; !style().logicalMaxHeight().isUndefined() &amp;&amp; (!style().logicalMaxHeight().isPercentOrCalculated() || percentageLogicalHeightIsResolvable()))

+        || (!style().logicalMinHeight().isIntrinsicOrAuto() &amp;&amp; style().logicalMinHeight().isPositive() &amp;&amp; (!style().logicalMinHeight().isPercentOrCalculated() || percentageLogicalHeightIsResolvable()));

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> bool RenderBox::isUnsplittableForPagination() const

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderBoxh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBox.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderBox.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderBox.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -386,6 +386,16 @@

</span><span class="cx">     virtual void updateLogicalHeight();

</span><span class="cx">     virtual LogicalExtentComputedValues computeLogicalHeight(LayoutUnit logicalHeight, LayoutUnit logicalTop) const;

</span><span class="cx"> 

</span><ins>+    void cacheIntrinsicContentLogicalHeightForFlexItem(LayoutUnit) const;

+    

+    // This function will compute the logical border-box height, without laying

+    // out the box. This means that the result is only &quot;correct&quot; when the height

+    // is explicitly specified. This function exists so that intrinsic width

+    // calculations have a way to deal with children that have orthogonal writing modes.

+    // When there is no explicit height, this function assumes a content height of

+    // zero (and returns just border + padding).

+    LayoutUnit computeLogicalHeightWithoutLayout() const;

+

</ins><span class="cx">     RenderBoxRegionInfo* renderBoxRegionInfo(RenderRegion*, RenderBoxRegionInfoFlags = CacheRenderBoxRegionInfo) const;

</span><span class="cx">     void computeLogicalWidthInRegion(LogicalExtentComputedValues&amp;, RenderRegion* = nullptr) const;

</span><span class="cx"> 

</span><span class="lines">@@ -403,7 +413,9 @@

</span><span class="cx">     bool sizesLogicalWidthToFitContent(SizeType) const;

</span><span class="cx"> 

</span><span class="cx">     bool hasStretchedLogicalWidth() const;

</span><del>-

</del><ins>+    bool isStretchingColumnFlexItem() const;

+    bool columnFlexItemHasStretchAlignment() const;

+    

</ins><span class="cx">     LayoutUnit shrinkLogicalWidthToAvoidFloats(LayoutUnit childMarginStart, LayoutUnit childMarginEnd, const RenderBlock&amp; cb, RenderRegion*) const;

</span><span class="cx"> 

</span><span class="cx">     LayoutUnit computeLogicalWidthInRegionUsing(SizeType, Length logicalWidth, LayoutUnit availableLogicalWidth, const RenderBlock&amp; containingBlock, RenderRegion*) const;

</span><span class="lines">@@ -418,9 +430,6 @@

</span><span class="cx">     virtual LayoutUnit computeReplacedLogicalWidth(ShouldComputePreferred  = ComputeActual) const;

</span><span class="cx">     virtual LayoutUnit computeReplacedLogicalHeight() const;

</span><span class="cx"> 

</span><del>-    bool hasDefiniteLogicalWidth() const;

-    static bool percentageLogicalHeightIsResolvableFromBlock(const RenderBlock&amp; containingBlock, bool outOfFlowPositioned, bool scrollsOverflowY);

-    bool hasDefiniteLogicalHeight() const;

</del><span class="cx">     std::optional&lt;LayoutUnit&gt; computePercentageLogicalHeight(const Length&amp; height) const;

</span><span class="cx"> 

</span><span class="cx">     virtual LayoutUnit availableLogicalWidth() const { return contentLogicalWidth(); }

</span><span class="lines">@@ -463,9 +472,12 @@

</span><span class="cx"> 

</span><span class="cx">     bool usesCompositedScrolling() const;

</span><span class="cx">     

</span><ins>+    bool percentageLogicalHeightIsResolvable() const;

</ins><span class="cx">     bool hasUnsplittableScrollingOverflow() const;

</span><span class="cx">     bool isUnsplittableForPagination() const;

</span><span class="cx"> 

</span><ins>+    bool shouldTreatChildAsReplacedInTableCells() const;

+    

</ins><span class="cx">     LayoutRect localCaretRect(InlineBox*, unsigned caretOffset, LayoutUnit* extraWidthToEndOfLine = nullptr) override;

</span><span class="cx"> 

</span><span class="cx">     virtual LayoutRect overflowClipRect(const LayoutPoint&amp; location, RenderRegion*, OverlayScrollbarSizeRelevancy = IgnoreOverlayScrollbarSize, PaintPhase = PaintPhaseBlockBackground);

</span><span class="lines">@@ -605,6 +617,9 @@

</span><span class="cx">     virtual bool needsLayoutAfterRegionRangeChange() const { return false; }

</span><span class="cx"> 

</span><span class="cx">     const RenderBox* findEnclosingScrollableContainer() const;

</span><ins>+    

+    bool isGridItem() const { return parent() &amp;&amp; parent()-&gt;isRenderGrid(); }

+    bool isFlexItem() const { return parent() &amp;&amp; parent()-&gt;isFlexibleBox(); }

</ins><span class="cx"> 

</span><span class="cx"> protected:

</span><span class="cx">     RenderBox(Element&amp;, RenderStyle&amp;&amp;, BaseTypeFlags);

</span><span class="lines">@@ -618,6 +633,8 @@

</span><span class="cx"> 

</span><span class="cx">     bool createsNewFormattingContext() const;

</span><span class="cx"> 

</span><ins>+    virtual ItemPosition selfAlignmentNormalBehavior() const { return ItemPositionStretch; }

+

</ins><span class="cx">     // Returns false if it could not cheaply compute the extent (e.g. fixed background), in which case the returned rect may be incorrect.

</span><span class="cx">     bool getBackgroundPaintedExtent(const LayoutPoint&amp; paintOffset, LayoutRect&amp;) const;

</span><span class="cx">     virtual bool foregroundIsKnownToBeOpaqueInRect(const LayoutRect&amp; localRect, unsigned maxDepthToTest) const;

</span><span class="lines">@@ -647,12 +664,13 @@

</span><span class="cx">     void paintRootBoxFillLayers(const PaintInfo&amp;);

</span><span class="cx"> 

</span><span class="cx">     RenderObject* splitAnonymousBoxesAroundChild(RenderObject* beforeChild);

</span><del>- 

</del><ins>+

+    bool skipContainingBlockForPercentHeightCalculation(const RenderBox&amp; containingBlock, bool isPerpendicularWritingMode) const;

+

</ins><span class="cx"> private:

</span><span class="cx">     void updateShapeOutsideInfoAfterStyleChange(const RenderStyle&amp;, const RenderStyle* oldStyle);

</span><span class="cx"> 

</span><span class="cx">     void updateGridPositionAfterStyleChange(const RenderStyle&amp;, const RenderStyle* oldStyle);

</span><del>-    bool isGridItem() const { return parent() &amp;&amp; parent()-&gt;isRenderGrid(); }

</del><span class="cx"> 

</span><span class="cx">     bool scrollLayer(ScrollDirection, ScrollGranularity, float multiplier, Element** stopElement);

</span><span class="cx"> 

</span><span class="lines">@@ -666,13 +684,9 @@

<span class="cx">     // Returns true if we did a full repaint.

</span><span class="cx">     bool repaintLayerRectsForImage(WrappedImagePtr, const FillLayer&amp; layers, bool drawingBackground);

</span><span class="cx"> 

</span><del>-    bool skipContainingBlockForPercentHeightCalculation(const RenderBox&amp; containingBlock, bool isPerpendicularWritingMode) const;

-   

</del><span class="cx">     LayoutUnit containingBlockLogicalWidthForPositioned(const RenderBoxModelObject&amp; containingBlock, RenderRegion* = nullptr, bool checkForPerpendicularWritingMode = true) const;

</span><span class="cx">     LayoutUnit containingBlockLogicalHeightForPositioned(const RenderBoxModelObject&amp; containingBlock, bool checkForPerpendicularWritingMode = true) const;

</span><span class="cx"> 

</span><del>-    LayoutUnit viewLogicalHeightForPercentages() const;

-

</del><span class="cx">     void computePositionedLogicalHeight(LogicalExtentComputedValues&amp;) const;

</span><span class="cx">     void computePositionedLogicalWidthUsing(SizeType, Length logicalWidth, const RenderBoxModelObject&amp; containerBlock, TextDirection containerDirection,

</span><span class="cx">                                             LayoutUnit containerLogicalWidth, LayoutUnit bordersPlusPadding,

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderBoxModelObjectcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -39,6 +39,7 @@

</span><span class="cx"> #include &quot;ImageQualityController.h&quot;

</span><span class="cx"> #include &quot;Path.h&quot;

</span><span class="cx"> #include &quot;RenderBlock.h&quot;

</span><ins>+#include &quot;RenderFlexibleBox.h&quot;

</ins><span class="cx"> #include &quot;RenderInline.h&quot;

</span><span class="cx"> #include &quot;RenderLayer.h&quot;

</span><span class="cx"> #include &quot;RenderLayerBacking.h&quot;

</span><span class="lines">@@ -227,44 +228,78 @@

</span><span class="cx">     }

</span><span class="cx">     return offset;

</span><span class="cx"> }

</span><ins>+    

+static inline bool isOutOfFlowPositionedWithImplicitHeight(const RenderBoxModelObject&amp; child)

+{

+    return child.isOutOfFlowPositioned() &amp;&amp; !child.style().logicalTop().isAuto() &amp;&amp; !child.style().logicalBottom().isAuto();

+}

+    

+RenderBlock* RenderBoxModelObject::containingBlockForAutoHeightDetection(Length logicalHeight) const

+{

+    // For percentage heights: The percentage is calculated with respect to the

+    // height of the generated box's containing block. If the height of the

+    // containing block is not specified explicitly (i.e., it depends on content

+    // height), and this element is not absolutely positioned, the used height is

+    // calculated as if 'auto' was specified.

+    if (!logicalHeight.isPercentOrCalculated() || isOutOfFlowPositioned())

+        return nullptr;

+    

+    // Anonymous block boxes are ignored when resolving percentage values that

+    // would refer to it: the closest non-anonymous ancestor box is used instead.

+    auto* cb = containingBlock();

+    while (cb &amp;&amp; cb-&gt;isAnonymous() &amp;&amp; !is&lt;RenderView&gt;(cb))

+        cb = cb-&gt;containingBlock();

+    if (!cb)

+        return nullptr;

</ins><span class="cx"> 

</span><ins>+    // Matching RenderBox::percentageLogicalHeightIsResolvable() by

+    // ignoring table cell's attribute value, where it says that table cells

+    // violate what the CSS spec says to do with heights. Basically we don't care

+    // if the cell specified a height or not.

+    if (cb-&gt;isTableCell())

+        return nullptr;

+    

+    // Match RenderBox::availableLogicalHeightUsing by special casing the layout

+    // view. The available height is taken from the frame.

+    if (cb-&gt;isRenderView())

+        return nullptr;

+    

+    if (isOutOfFlowPositionedWithImplicitHeight(*cb))

+        return nullptr;

+    

+    return cb;

+}

+    

</ins><span class="cx"> bool RenderBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight() const

</span><span class="cx"> {

</span><ins>+    const auto* thisBox = isBox() ? downcast&lt;RenderBox&gt;(this) : nullptr;

</ins><span class="cx">     Length logicalHeightLength = style().logicalHeight();

</span><del>-    if (logicalHeightLength.isAuto())

-        return true;

</del><ins>+    auto* cb = containingBlockForAutoHeightDetection(logicalHeightLength);

+    

+    if (logicalHeightLength.isPercentOrCalculated() &amp;&amp; cb &amp;&amp; isBox())

+        cb-&gt;addPercentHeightDescendant(*const_cast&lt;RenderBox*&gt;(downcast&lt;RenderBox&gt;(this)));

</ins><span class="cx"> 

</span><del>-    // For percentage heights: The percentage is calculated with respect to the height of the generated box's

-    // containing block. If the height of the containing block is not specified explicitly (i.e., it depends

-    // on content height), and this element is not absolutely positioned, the value computes to 'auto'.

-    if (!logicalHeightLength.isPercentOrCalculated() || isOutOfFlowPositioned() || document().inQuirksMode())

</del><ins>+    if (thisBox &amp;&amp; thisBox-&gt;isFlexItem()) {

+        auto&amp; flexBox = downcast&lt;RenderFlexibleBox&gt;(*parent());

+        if (flexBox.childLogicalHeightForPercentageResolution(*thisBox))

+            return false;

+    }

+    

+    if (thisBox &amp;&amp; thisBox-&gt;isGridItem() &amp;&amp; thisBox-&gt;hasOverrideContainingBlockLogicalHeight())

</ins><span class="cx">         return false;

</span><ins>+    

+    if (logicalHeightLength.isAuto() &amp;&amp; !isOutOfFlowPositionedWithImplicitHeight(*this))

+        return true;

</ins><span class="cx"> 

</span><del>-    // Anonymous block boxes are ignored when resolving percentage values that would refer to it:

-    // the closest non-anonymous ancestor box is used instead.

-    RenderBlock* cb = containingBlock(); 

-    while (cb &amp;&amp; !is&lt;RenderView&gt;(*cb) &amp;&amp; cb-&gt;isAnonymous())

-        cb = cb-&gt;containingBlock();

-

-    // Matching RenderBox::percentageLogicalHeightIsResolvableFromBlock() by

-    // ignoring table cell's attribute value, where it says that table cells violate

-    // what the CSS spec says to do with heights. Basically we

-    // don't care if the cell specified a height or not.

-    if (cb-&gt;isTableCell())

</del><ins>+    if (document().inQuirksMode())

</ins><span class="cx">         return false;

</span><span class="cx"> 

</span><del>-    // Match RenderBox::availableLogicalHeightUsing by special casing

-    // the render view. The available height is taken from the frame.

-    if (cb-&gt;isRenderView())

-        return false;

</del><ins>+    if (cb)

+        return !cb-&gt;hasDefiniteLogicalHeight();

</ins><span class="cx"> 

</span><del>-    if (cb-&gt;isOutOfFlowPositioned() &amp;&amp; !cb-&gt;style().logicalTop().isAuto() &amp;&amp; !cb-&gt;style().logicalBottom().isAuto())

-        return false;

-

-    // If the height of the containing block computes to 'auto', then it hasn't been 'specified explictly'.

-    return cb-&gt;hasAutoHeightOrContainingBlockWithAutoHeight();

</del><ins>+    return false;

</ins><span class="cx"> }

</span><del>-

</del><ins>+    

</ins><span class="cx"> LayoutSize RenderBoxModelObject::relativePositionOffset() const

</span><span class="cx"> {

</span><span class="cx">     // This function has been optimized to avoid calls to containingBlock() in the common case

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderBoxModelObjecth"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderBoxModelObject.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -322,6 +322,8 @@

</span><span class="cx">         float thickness, float drawThickness, BoxSide, const RenderStyle&amp;,

</span><span class="cx">         Color, EBorderStyle, BackgroundBleedAvoidance, bool includeLogicalLeftEdge, bool includeLogicalRightEdge);

</span><span class="cx">     void paintMaskForTextFillBox(ImageBuffer*, const IntRect&amp;, InlineFlowBox*, const LayoutRect&amp;);

</span><ins>+    

+    RenderBlock* containingBlockForAutoHeightDetection(Length logicalHeight) const;

</ins><span class="cx"> };

</span><span class="cx"> 

</span><span class="cx"> } // namespace WebCore

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderElementcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderElement.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderElement.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderElement.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -599,6 +599,9 @@

</span><span class="cx">         downcast&lt;RenderBox&gt;(oldChild).deleteLineBoxWrapper();

</span><span class="cx">     else if (is&lt;RenderLineBreak&gt;(oldChild))

</span><span class="cx">         downcast&lt;RenderLineBreak&gt;(oldChild).deleteInlineBoxWrapper();

</span><ins>+    

+    if (!documentBeingDestroyed() &amp;&amp; is&lt;RenderFlexibleBox&gt;(this) &amp;&amp; !oldChild.isFloatingOrOutOfFlowPositioned() &amp;&amp; oldChild.isBox())

+        downcast&lt;RenderFlexibleBox&gt;(this)-&gt;clearCachedChildIntrinsicContentLogicalHeight(downcast&lt;RenderBox&gt;(oldChild));

</ins><span class="cx"> 

</span><span class="cx">     // If oldChild is the start or end of the selection, then clear the selection to

<span class="cx">     // avoid problems of invalid pointers.

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderFlexibleBoxcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -31,6 +31,7 @@

</span><span class="cx"> #include &quot;config.h&quot;

</span><span class="cx"> #include &quot;RenderFlexibleBox.h&quot;

</span><span class="cx"> 

</span><ins>+#include &quot;FlexibleBoxAlgorithm.h&quot;

</ins><span class="cx"> #include &quot;LayoutRepainter.h&quot;

</span><span class="cx"> #include &quot;RenderLayer.h&quot;

</span><span class="cx"> #include &quot;RenderView.h&quot;

</span><span class="lines">@@ -40,39 +41,23 @@

</span><span class="cx"> 

</span><span class="cx"> namespace WebCore {

</span><span class="cx"> 

</span><del>-static constexpr ItemPosition selfAlignmentNormalBehaviorFlexibleBox = ItemPositionStretch;

-

</del><span class="cx"> struct RenderFlexibleBox::LineContext {

</span><del>-    LineContext(LayoutUnit crossAxisOffset, LayoutUnit crossAxisExtent, size_t numberOfChildren, LayoutUnit maxAscent)

</del><ins>+    LineContext(LayoutUnit crossAxisOffset, LayoutUnit crossAxisExtent, LayoutUnit maxAscent, Vector&lt;FlexItem&gt;&amp;&amp; flexItems)

</ins><span class="cx">         : crossAxisOffset(crossAxisOffset)

</span><span class="cx">         , crossAxisExtent(crossAxisExtent)

</span><del>-        , numberOfChildren(numberOfChildren)

</del><span class="cx">         , maxAscent(maxAscent)

</span><ins>+        , flexItems(flexItems)

</ins><span class="cx">     {

</span><span class="cx">     }

</span><del>-

</del><ins>+    

</ins><span class="cx">     LayoutUnit crossAxisOffset;

</span><span class="cx">     LayoutUnit crossAxisExtent;

</span><del>-    size_t numberOfChildren;

</del><span class="cx">     LayoutUnit maxAscent;

</span><ins>+    Vector&lt;FlexItem&gt; flexItems;

</ins><span class="cx"> };

</span><span class="cx"> 

</span><del>-struct RenderFlexibleBox::Violation {

-    Violation(RenderBox&amp; child, LayoutUnit childSize)

-        : child(child)

-        , childSize(childSize)

-    {

-    }

-

-    RenderBox&amp; child;

-    LayoutUnit childSize;

-};

-

-

</del><span class="cx"> RenderFlexibleBox::RenderFlexibleBox(Element&amp; element, RenderStyle&amp;&amp; style)

</span><span class="cx">     : RenderBlock(element, WTFMove(style), 0)

</span><del>-    , m_orderIterator(*this)

-    , m_numberOfInFlowChildrenOnFirstLine(-1)

</del><span class="cx"> {

<span class="cx">     setChildrenInline(false); // All of our children must be block-level.

</span><span class="cx"> }

</span><span class="lines">@@ -79,8 +64,6 @@

</span><span class="cx"> 

</span><span class="cx"> RenderFlexibleBox::RenderFlexibleBox(Document&amp; document, RenderStyle&amp;&amp; style)

</span><span class="cx">     : RenderBlock(document, WTFMove(style), 0)

</span><del>-    , m_orderIterator(*this)

-    , m_numberOfInFlowChildrenOnFirstLine(-1)

</del><span class="cx"> {

<span class="cx">     setChildrenInline(false); // All of our children must be block-level.

</span><span class="cx"> }

</span><span class="lines">@@ -96,42 +79,45 @@

</span><span class="cx"> 

</span><span class="cx"> void RenderFlexibleBox::computeIntrinsicLogicalWidths(LayoutUnit&amp; minLogicalWidth, LayoutUnit&amp; maxLogicalWidth) const

</span><span class="cx"> {

</span><del>-    // FIXME: We're ignoring flex-basis here and we shouldn't. We can't start honoring it though until

-    // the flex shorthand stops setting it to 0.

-    // See https://bugs.webkit.org/show_bug.cgi?id=116117,

</del><ins>+    // FIXME: We're ignoring flex-basis here and we shouldn't. We can't start

+    // honoring it though until the flex shorthand stops setting it to 0. See

+    // https://bugs.webkit.org/show_bug.cgi?id=116117 and

+    // https://crbug.com/240765.

</ins><span class="cx">     for (RenderBox* child = firstChildBox(); child; child = child-&gt;nextSiblingBox()) {

</span><span class="cx">         if (child-&gt;isOutOfFlowPositioned())

</span><span class="cx">             continue;

</span><del>-

</del><ins>+        

</ins><span class="cx">         LayoutUnit margin = marginIntrinsicLogicalWidthForChild(*child);

</span><del>-        bool hasOrthogonalWritingMode = child-&gt;isHorizontalWritingMode() != isHorizontalWritingMode();

-        LayoutUnit minPreferredLogicalWidth = hasOrthogonalWritingMode ? child-&gt;logicalHeight() : child-&gt;minPreferredLogicalWidth();

-        LayoutUnit maxPreferredLogicalWidth = hasOrthogonalWritingMode ? child-&gt;logicalHeight() : child-&gt;maxPreferredLogicalWidth();

</del><ins>+        

+        LayoutUnit minPreferredLogicalWidth;

+        LayoutUnit maxPreferredLogicalWidth;

+        computeChildPreferredLogicalWidths(*child, minPreferredLogicalWidth, maxPreferredLogicalWidth);

+        

</ins><span class="cx">         minPreferredLogicalWidth += margin;

</span><span class="cx">         maxPreferredLogicalWidth += margin;

</span><ins>+

</ins><span class="cx">         if (!isColumnFlow()) {

</span><span class="cx">             maxLogicalWidth += maxPreferredLogicalWidth;

</span><span class="cx">             if (isMultiline()) {

<del>-                // For multiline, the min preferred width is if you put a break between each item.

</del><ins>+                // For multiline, the min preferred width is if you put a break between

+                // each item.

</ins><span class="cx">                 minLogicalWidth = std::max(minLogicalWidth, minPreferredLogicalWidth);

</span><span class="cx">             } else

</span><span class="cx">                 minLogicalWidth += minPreferredLogicalWidth;

</span><span class="cx">         } else {

</span><span class="cx">             minLogicalWidth = std::max(minPreferredLogicalWidth, minLogicalWidth);

</span><del>-            if (isMultiline()) {

-                // For multiline, the max preferred width is if you never break between items.

-                maxLogicalWidth += maxPreferredLogicalWidth;

-            } else

-                maxLogicalWidth = std::max(maxPreferredLogicalWidth, maxLogicalWidth);

</del><ins>+            maxLogicalWidth = std::max(maxPreferredLogicalWidth, maxLogicalWidth);

</ins><span class="cx">         }

</span><span class="cx">     }

</span><del>-

-    // Due to negative margins, it is possible that we calculated a negative intrinsic width.

-    // Make sure that we never return a negative width.

</del><ins>+    

+    maxLogicalWidth = std::max(minLogicalWidth, maxLogicalWidth);

+    

+    // Due to negative margins, it is possible that we calculated a negative

+    // intrinsic width. Make sure that we never return a negative width.

</ins><span class="cx">     minLogicalWidth = std::max(LayoutUnit(), minLogicalWidth);

</span><del>-    maxLogicalWidth = std::max(minLogicalWidth, maxLogicalWidth);

-

-    LayoutUnit scrollbarWidth = intrinsicScrollbarLogicalWidth();

</del><ins>+    maxLogicalWidth = std::max(LayoutUnit(), maxLogicalWidth);

+    

+    LayoutUnit scrollbarWidth(scrollbarLogicalWidth());

</ins><span class="cx">     maxLogicalWidth += scrollbarWidth;

</span><span class="cx">     minLogicalWidth += scrollbarWidth;

</span><span class="cx"> }

</span><span class="lines">@@ -230,18 +216,28 @@

</span><span class="cx">     return synthesizedBaselineFromContentBox(*this, direction) + marginAscent;

</span><span class="cx"> }

</span><span class="cx"> 

</span><ins>+static const StyleContentAlignmentData&amp; contentAlignmentNormalBehavior()

+{

+    // The justify-content property applies along the main axis, but since

+    // flexing in the main axis is controlled by flex, stretch behaves as

+    // flex-start (ignoring the specified fallback alignment, if any).

+    // https://drafts.csswg.org/css-align/#distribution-flex

+    static const StyleContentAlignmentData normalBehavior = { ContentPositionNormal, ContentDistributionStretch};

+    return normalBehavior;

+}

+

</ins><span class="cx"> void RenderFlexibleBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)

</span><span class="cx"> {

</span><span class="cx">     RenderBlock::styleDidChange(diff, oldStyle);

</span><span class="cx"> 

</span><del>-    if (oldStyle &amp;&amp; oldStyle-&gt;resolvedAlignItems(selfAlignmentNormalBehaviorFlexibleBox).position() == ItemPositionStretch &amp;&amp; diff == StyleDifferenceLayout) {

</del><ins>+    if (oldStyle &amp;&amp; oldStyle-&gt;resolvedAlignItems(selfAlignmentNormalBehavior()).position() == ItemPositionStretch &amp;&amp; diff == StyleDifferenceLayout) {

</ins><span class="cx">         // Flex items that were previously stretching need to be relayed out so we can compute new available cross axis space.

<span class="cx">         // This is only necessary for stretching since other alignment values don't change the size of the box.

</span><span class="cx">         auto&amp; newStyle = style();

</span><span class="cx">         for (RenderBox* child = firstChildBox(); child; child = child-&gt;nextSiblingBox()) {

</span><span class="cx">             auto&amp; childStyle = child-&gt;style();

</span><del>-            auto previousAlignment = childStyle.resolvedAlignSelf(*oldStyle, selfAlignmentNormalBehaviorFlexibleBox).position();

-            if (previousAlignment == ItemPositionStretch &amp;&amp; previousAlignment != childStyle.resolvedAlignSelf(newStyle, selfAlignmentNormalBehaviorFlexibleBox).position())

</del><ins>+            auto previousAlignment = childStyle.resolvedAlignSelf(oldStyle, selfAlignmentNormalBehavior()).position();

+            if (previousAlignment == ItemPositionStretch &amp;&amp; previousAlignment != childStyle.resolvedAlignSelf(&amp;newStyle, selfAlignmentNormalBehavior()).position())

</ins><span class="cx">                 child-&gt;setChildNeedsLayout(MarkOnlyThis);

</span><span class="cx">         }

</span><span class="cx">     }

</span><span class="lines">@@ -256,6 +252,11 @@

</span><span class="cx"> 

</span><span class="cx">     LayoutRepainter repainter(*this, checkForRepaintDuringLayout());

</span><span class="cx"> 

</span><ins>+    m_relaidOutChildren.clear();

+    

+    bool oldInLayout = m_inLayout;

+    m_inLayout = true;

+    

</ins><span class="cx">     if (recomputeLogicalWidth())

</span><span class="cx">         relayoutChildren = true;

</span><span class="cx"> 

</span><span class="lines">@@ -276,12 +277,8 @@

</span><span class="cx"> 

</span><span class="cx">     ChildFrameRects oldChildRects;

</span><span class="cx">     appendChildFrameRects(oldChildRects);

</span><del>-    Vector&lt;LineContext&gt; lineContexts;

-    layoutFlexItems(relayoutChildren, lineContexts);

</del><ins>+    layoutFlexItems(relayoutChildren);

</ins><span class="cx"> 

</span><del>-    updateLogicalHeight();

-    repositionLogicalHeightDependentFlexItems(lineContexts);

-

</del><span class="cx">     endAndCommitUpdateScrollInfoAfterLayoutTransaction();

</span><span class="cx"> 

</span><span class="cx">     if (logicalHeight() != previousHeight)

</span><span class="lines">@@ -295,6 +292,11 @@

</span><span class="cx">     statePusher.pop();

</span><span class="cx"> 

</span><span class="cx">     updateLayerTransform();

</span><ins>+    

+    // We have to reset this, because changes to our ancestors' style can affect

+    // this value. Also, this needs to be before we call updateAfterLayout, as

+    // that function may re-enter this one.

+    m_hasDefiniteHeight = SizeDefiniteness::Unknown;

</ins><span class="cx"> 

</span><span class="cx">     // Update our scroll information if we're overflow:auto/scroll/hidden now that we know if

<span class="cx">     // we overflow or not.

</span><span class="lines">@@ -303,6 +305,8 @@

</span><span class="cx">     repainter.repaintAfterLayout();

</span><span class="cx"> 

</span><span class="cx">     clearNeedsLayout();

</span><ins>+    

+    m_inLayout = oldInLayout;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> void RenderFlexibleBox::appendChildFrameRects(ChildFrameRects&amp; childFrameRects)

</span><span class="lines">@@ -342,23 +346,20 @@

</span><span class="cx"> {

</span><span class="cx">     LayoutUnit crossAxisStartEdge = lineContexts.isEmpty() ? LayoutUnit() : lineContexts[0].crossAxisOffset;

</span><span class="cx">     alignFlexLines(lineContexts);

</span><del>-

-    // If we have a single line flexbox, the line height is all the available space.

-    // For flex-direction: row, this means we need to use the height, so we do this after calling updateLogicalHeight.

-    if (!isMultiline() &amp;&amp; lineContexts.size() == 1)

-        lineContexts[0].crossAxisExtent = crossAxisContentExtent();

</del><ins>+    

</ins><span class="cx">     alignChildren(lineContexts);

</span><del>-

</del><ins>+    

</ins><span class="cx">     if (style().flexWrap() == FlexWrapReverse)

</span><span class="cx">         flipForWrapReverse(lineContexts, crossAxisStartEdge);

</span><del>-

-    // direction:rtl + flex-direction:column means the cross-axis direction is flipped.

-    flipForRightToLeftColumn();

</del><ins>+    

+    // direction:rtl + flex-direction:column means the cross-axis direction is

+    // flipped.

+    flipForRightToLeftColumn(lineContexts);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> LayoutUnit RenderFlexibleBox::clientLogicalBottomAfterRepositioning()

</span><span class="cx"> {

</span><del>-    LayoutUnit maxChildLogicalBottom = 0;

</del><ins>+    LayoutUnit maxChildLogicalBottom;

</ins><span class="cx">     for (RenderBox* child = firstChildBox(); child; child = child-&gt;nextSiblingBox()) {

</span><span class="cx">         if (child-&gt;isOutOfFlowPositioned())

</span><span class="cx">             continue;

</span><span class="lines">@@ -365,12 +366,11 @@

</span><span class="cx">         LayoutUnit childLogicalBottom = logicalTopForChild(*child) + logicalHeightForChild(*child) + marginAfterForChild(*child);

</span><span class="cx">         maxChildLogicalBottom = std::max(maxChildLogicalBottom, childLogicalBottom);

</span><span class="cx">     }

</span><del>-    return std::max(clientLogicalBottom(), maxChildLogicalBottom);

</del><ins>+    return std::max(clientLogicalBottom(), maxChildLogicalBottom + paddingAfter());

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> bool RenderFlexibleBox::hasOrthogonalFlow(const RenderBox&amp; child) const

</span><span class="cx"> {

<del>-    // FIXME: If the child is a flexbox, then we need to check isHorizontalFlow.

</del><span class="cx">     return isHorizontalFlow() != child.isHorizontalWritingMode();

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="lines">@@ -398,7 +398,7 @@

</span><span class="cx">     return style().flexWrap() != FlexNoWrap;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-Length RenderFlexibleBox::flexBasisForChild(RenderBox&amp; child) const

</del><ins>+Length RenderFlexibleBox::flexBasisForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><span class="cx">     Length flexLength = child.style().flexBasis();

</span><span class="cx">     if (flexLength.isAuto())

</span><span class="lines">@@ -406,32 +406,82 @@

</span><span class="cx">     return flexLength;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::setCrossAxisExtent(LayoutUnit extent)

</del><ins>+LayoutUnit RenderFlexibleBox::crossAxisExtentForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><del>-    if (isHorizontalFlow())

-        setHeight(extent);

-    else

-        setWidth(extent);

</del><ins>+    return isHorizontalFlow() ? child.height() : child.width();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::crossAxisExtentForChild(RenderBox&amp; child) const

</del><ins>+LayoutUnit RenderFlexibleBox::cachedChildIntrinsicContentLogicalHeight(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><del>-    return isHorizontalFlow() ? child.height() : child.width();

</del><ins>+    if (child.isRenderReplaced())

+        return downcast&lt;RenderReplaced&gt;(child).intrinsicLogicalHeight();

+    

+    if (m_intrinsicContentLogicalHeights.contains(&amp;child))

+        return m_intrinsicContentLogicalHeights.get(&amp;child);

+    

+    return child.contentLogicalHeight();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::mainAxisExtentForChild(RenderBox&amp; child) const

</del><ins>+void RenderFlexibleBox::setCachedChildIntrinsicContentLogicalHeight(const RenderBox&amp; child, LayoutUnit height)

</ins><span class="cx"> {

</span><del>-    return isHorizontalFlow() ? child.width() : child.height();

</del><ins>+    if (child.isRenderReplaced())

+        return; // Replaced elements know their intrinsic height already, so save space by not caching.

+    m_intrinsicContentLogicalHeights.set(&amp;child, height);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><ins>+void RenderFlexibleBox::clearCachedChildIntrinsicContentLogicalHeight(const RenderBox&amp; child)

+{

+    if (child.isRenderReplaced())

+        return; // Replaced elements know their intrinsic height already, so nothing to do.

+    m_intrinsicContentLogicalHeights.remove(&amp;child);

+}

+

+LayoutUnit RenderFlexibleBox::childIntrinsicLogicalHeight(const RenderBox&amp; child) const

+{

+    // This should only be called if the logical height is the cross size

+    ASSERT(!hasOrthogonalFlow(child));

+    if (needToStretchChildLogicalHeight(child)) {

+        LayoutUnit childContentHeight = cachedChildIntrinsicContentLogicalHeight(child);

+        LayoutUnit childLogicalHeight = childContentHeight + child.scrollbarLogicalHeight() + child.borderAndPaddingLogicalHeight();

+        return child.constrainLogicalHeightByMinMax(childLogicalHeight, childContentHeight);

+    }

+    return child.logicalHeight();

+}

+

+LayoutUnit RenderFlexibleBox::childIntrinsicLogicalWidth(const RenderBox&amp; child) const

+{

+    // This should only be called if the logical width is the cross size

+    ASSERT(hasOrthogonalFlow(child));

+    // If our height is auto, make sure that our returned height is unaffected by

+    // earlier layouts by returning the max preferred logical width

+    if (!crossAxisLengthIsDefinite(child, child.style().logicalWidth()))

+        return child.maxPreferredLogicalWidth();

+    return child.logicalWidth();

+}

+

+LayoutUnit RenderFlexibleBox::crossAxisIntrinsicExtentForChild(const RenderBox&amp; child) const

+{

+    return hasOrthogonalFlow(child) ? childIntrinsicLogicalWidth(child) : childIntrinsicLogicalHeight(child);

+}

+

+LayoutUnit RenderFlexibleBox::mainAxisExtentForChild(const RenderBox&amp; child) const

+{

+    return isHorizontalFlow() ? child.size().width() : child.size().height();

+}

+

+LayoutUnit RenderFlexibleBox::mainAxisContentExtentForChildIncludingScrollbar(const RenderBox&amp; child) const

+{

+    return isHorizontalFlow() ? child.contentWidth() + child.verticalScrollbarWidth() : child.contentHeight() + child.horizontalScrollbarHeight();

+}

+

</ins><span class="cx"> LayoutUnit RenderFlexibleBox::crossAxisExtent() const

</span><span class="cx"> {

</span><del>-    return isHorizontalFlow() ? height() : width();

</del><ins>+    return isHorizontalFlow() ? size().height() : size().width();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> LayoutUnit RenderFlexibleBox::mainAxisExtent() const

</span><span class="cx"> {

</span><del>-    return isHorizontalFlow() ? width() : height();

</del><ins>+    return isHorizontalFlow() ? size().width() : size().height();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> LayoutUnit RenderFlexibleBox::crossAxisContentExtent() const

</span><span class="lines">@@ -443,38 +493,62 @@

</span><span class="cx"> {

</span><span class="cx">     if (isColumnFlow()) {

</span><span class="cx">         LayoutUnit borderPaddingAndScrollbar = borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();

</span><del>-        if (contentLogicalHeight &gt; LayoutUnit::max() - borderPaddingAndScrollbar)

-            contentLogicalHeight -= borderPaddingAndScrollbar;

</del><span class="cx">         LayoutUnit borderBoxLogicalHeight = contentLogicalHeight + borderPaddingAndScrollbar;

</span><span class="cx">         auto computedValues = computeLogicalHeight(borderBoxLogicalHeight, logicalTop());

</span><span class="cx">         if (computedValues.m_extent == LayoutUnit::max())

</span><span class="cx">             return computedValues.m_extent;

</span><del>-        return std::max(LayoutUnit::fromPixel(0), computedValues.m_extent - borderPaddingAndScrollbar);

</del><ins>+        return std::max(LayoutUnit(), computedValues.m_extent - borderPaddingAndScrollbar);

</ins><span class="cx">     }

</span><span class="cx">     return contentLogicalWidth();

</span><span class="cx"> }

</span><span class="cx"> 

</span><ins>+// MERGEPOINT

+

</ins><span class="cx"> std::optional&lt;LayoutUnit&gt; RenderFlexibleBox::computeMainAxisExtentForChild(const RenderBox&amp; child, SizeType sizeType, const Length&amp; size)

</span><span class="cx"> {

</span><del>-    // FIXME: This is wrong for orthogonal flows. It should use the flexbox's writing-mode, not the child's in order

-    // to figure out the logical height/width.

-    if (isColumnFlow()) {

-        // We don't have to check for &quot;auto&quot; here - computeContentLogicalHeight will just return std::nullopt for that case anyway.

-        if (size.isIntrinsic())

-            const_cast&lt;RenderBox&amp;&gt;(child).layoutIfNeeded(); // FIXME: Should not need to do a layout here.

-        return child.computeContentLogicalHeight(sizeType, size, child.logicalHeight() - child.borderAndPaddingLogicalHeight());

</del><ins>+    // If we have a horizontal flow, that means the main size is the width.

+    // That's the logical width for horizontal writing modes, and the logical

+    // height in vertical writing modes. For a vertical flow, main size is the

+    // height, so it's the inverse. So we need the logical width if we have a

+    // horizontal flow and horizontal writing mode, or vertical flow and vertical

+    // writing mode. Otherwise we need the logical height.

+    if (isHorizontalFlow() != child.style().isHorizontalWritingMode()) {

+        // We don't have to check for &quot;auto&quot; here - computeContentLogicalHeight

+        // will just return a null Optional for that case anyway. It's safe to access

+        // scrollbarLogicalHeight here because ComputeNextFlexLine will have

+        // already forced layout on the child. We previously did a layout out the child

+        // if necessary (see ComputeNextFlexLine and the call to

+        // childHasIntrinsicMainAxisSize) so we can be sure that the two height

+        // calls here will return up-to-date data.

+        std::optional&lt;LayoutUnit&gt; height = child.computeContentLogicalHeight(sizeType, size, cachedChildIntrinsicContentLogicalHeight(child));

+        if (!height)

+            return height;

+        return height.value() + child.scrollbarLogicalHeight();

</ins><span class="cx">     }

</span><ins>+

+    // computeLogicalWidth always re-computes the intrinsic widths. However, when

+    // our logical width is auto, we can just use our cached value. So let's do

+    // that here. (Compare code in LayoutBlock::computePreferredLogicalWidths)

+    LayoutUnit borderAndPadding = child.borderAndPaddingLogicalWidth();

+    if (child.style().logicalWidth().isAuto() &amp;&amp; !child.hasAspectRatio()) {

+        if (size.type() == MinContent)

+            return child.minPreferredLogicalWidth() - borderAndPadding;

+        if (size.type() == MaxContent)

+            return child.maxPreferredLogicalWidth() - borderAndPadding;

+    }

+    

</ins><span class="cx">     // FIXME: Figure out how this should work for regions and pass in the appropriate values.

</span><span class="cx">     RenderRegion* region = nullptr;

</span><del>-    return child.computeLogicalWidthInRegionUsing(sizeType, size, contentLogicalWidth(), *this, region) - child.borderAndPaddingLogicalWidth();

</del><ins>+    return child.computeLogicalWidthInRegionUsing(sizeType, size, contentLogicalWidth(), *this, region) - borderAndPadding;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><ins>+    

</ins><span class="cx"> WritingMode RenderFlexibleBox::transformedWritingMode() const

</span><span class="cx"> {

</span><span class="cx">     WritingMode mode = style().writingMode();

</span><span class="cx">     if (!isColumnFlow())

</span><span class="cx">         return mode;

</span><del>-

</del><ins>+    

</ins><span class="cx">     switch (mode) {

</span><span class="cx">     case TopToBottomWritingMode:

</span><span class="cx">     case BottomToTopWritingMode:

</span><span class="lines">@@ -579,7 +653,7 @@

</span><span class="cx">     return paddingTop();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::flowAwareMarginStartForChild(RenderBox&amp; child) const

</del><ins>+LayoutUnit RenderFlexibleBox::flowAwareMarginStartForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><span class="cx">     if (isHorizontalFlow())

</span><span class="cx">         return isLeftToRightFlow() ? child.marginLeft() : child.marginRight();

</span><span class="lines">@@ -586,7 +660,7 @@

</span><span class="cx">     return isLeftToRightFlow() ? child.marginTop() : child.marginBottom();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::flowAwareMarginEndForChild(RenderBox&amp; child) const

</del><ins>+LayoutUnit RenderFlexibleBox::flowAwareMarginEndForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><span class="cx">     if (isHorizontalFlow())

</span><span class="cx">         return isLeftToRightFlow() ? child.marginRight() : child.marginLeft();

</span><span class="lines">@@ -593,7 +667,7 @@

</span><span class="cx">     return isLeftToRightFlow() ? child.marginBottom() : child.marginTop();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::flowAwareMarginBeforeForChild(RenderBox&amp; child) const

</del><ins>+LayoutUnit RenderFlexibleBox::flowAwareMarginBeforeForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><span class="cx">     switch (transformedWritingMode()) {

</span><span class="cx">     case TopToBottomWritingMode:

</span><span class="lines">@@ -609,24 +683,8 @@

</span><span class="cx">     return marginTop();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::flowAwareMarginAfterForChild(RenderBox&amp; child) const

</del><ins>+LayoutUnit RenderFlexibleBox::crossAxisMarginExtentForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><del>-    switch (transformedWritingMode()) {

-    case TopToBottomWritingMode:

-        return child.marginBottom();

-    case BottomToTopWritingMode:

-        return child.marginTop();

-    case LeftToRightWritingMode:

-        return child.marginRight();

-    case RightToLeftWritingMode:

-        return child.marginLeft();

-    }

-    ASSERT_NOT_REACHED();

-    return marginBottom();

-}

-

-LayoutUnit RenderFlexibleBox::crossAxisMarginExtentForChild(RenderBox&amp; child) const

-{

</del><span class="cx">     return isHorizontalFlow() ? child.verticalMarginExtent() : child.horizontalMarginExtent();

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="lines">@@ -635,11 +693,51 @@

</span><span class="cx">     return isHorizontalFlow() ? horizontalScrollbarHeight() : verticalScrollbarWidth();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutPoint RenderFlexibleBox::flowAwareLocationForChild(RenderBox&amp; child) const

</del><ins>+LayoutPoint RenderFlexibleBox::flowAwareLocationForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><span class="cx">     return isHorizontalFlow() ? child.location() : child.location().transposedPoint();

</span><span class="cx"> }

</span><span class="cx"> 

</span><ins>+bool RenderFlexibleBox::useChildAspectRatio(const RenderBox&amp; child) const

+{

+    if (!child.hasAspectRatio())

+        return false;

+    if (!child.intrinsicSize().height()) {

+        // We can't compute a ratio in this case.

+        return false;

+    }

+    Length crossSize;

+    if (isHorizontalFlow())

+        crossSize = child.style().height();

+    else

+        crossSize = child.style().width();

+    return crossAxisLengthIsDefinite(child, crossSize);

+}

+

+    

+LayoutUnit RenderFlexibleBox::computeMainSizeFromAspectRatioUsing(const RenderBox&amp; child, Length crossSizeLength) const

+{

+    ASSERT(child.hasAspectRatio());

+    ASSERT(child.intrinsicSize().height());

+    

+    std::optional&lt;LayoutUnit&gt; crossSize;

+    if (crossSizeLength.isFixed())

+        crossSize = LayoutUnit(crossSizeLength.value());

+    else {

+        ASSERT(crossSizeLength.isPercentOrCalculated());

+        crossSize = hasOrthogonalFlow(child) ? adjustBorderBoxLogicalWidthForBoxSizing(valueForLength(crossSizeLength, contentWidth())) : child.computePercentageLogicalHeight(crossSizeLength);

+        if (!crossSize)

+            return LayoutUnit();

+    }

+    

+    const LayoutSize&amp; childIntrinsicSize = child.intrinsicSize();

+    double ratio = childIntrinsicSize.width().toFloat() /

+    childIntrinsicSize.height().toFloat();

+    if (isHorizontalFlow())

+        return LayoutUnit(crossSize.value() * ratio);

+    return LayoutUnit(crossSize.value() / ratio);

+}

+

</ins><span class="cx"> void RenderFlexibleBox::setFlowAwareLocationForChild(RenderBox&amp; child, const LayoutPoint&amp; location)

</span><span class="cx"> {

</span><span class="cx">     if (isHorizontalFlow())

</span><span class="lines">@@ -647,117 +745,197 @@

</span><span class="cx">     else

</span><span class="cx">         child.setLocation(location.transposedPoint());

</span><span class="cx"> }

</span><del>-

-LayoutUnit RenderFlexibleBox::mainAxisBorderAndPaddingExtentForChild(RenderBox&amp; child) const

-{

-    return isHorizontalFlow() ? child.horizontalBorderAndPaddingExtent() : child.verticalBorderAndPaddingExtent();

-}

</del><span class="cx">     

</span><span class="cx"> bool RenderFlexibleBox::mainAxisLengthIsDefinite(const RenderBox&amp; child, const Length&amp; flexBasis) const

</span><span class="cx"> {

</span><span class="cx">     if (flexBasis.isAuto())

</span><span class="cx">         return false;

</span><del>-    if (flexBasis.isPercentOrCalculated())

-        return isColumnFlow() ? bool(child.computePercentageLogicalHeight(flexBasis)) : hasDefiniteLogicalWidth();

</del><ins>+    if (flexBasis.isPercentOrCalculated()) {

+        if (!isColumnFlow() || m_hasDefiniteHeight == SizeDefiniteness::Definite)

+            return true;

+        if (m_hasDefiniteHeight == SizeDefiniteness::Indefinite)

+            return false;

+        bool definite = child.computePercentageLogicalHeight(flexBasis) != std::nullopt;

+        if (m_inLayout) {

+            // We can reach this code even while we're not laying ourselves out, such

+            // as from mainSizeForPercentageResolution.

+            m_hasDefiniteHeight = definite ? SizeDefiniteness::Definite : SizeDefiniteness::Indefinite;

+        }

+        return definite;

+    }

</ins><span class="cx">     return true;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::mainAxisScrollbarExtentForChild(RenderBox&amp; child) const

</del><ins>+bool RenderFlexibleBox::crossAxisLengthIsDefinite(const RenderBox&amp; child, const Length&amp; length) const

</ins><span class="cx"> {

</span><del>-    return isHorizontalFlow() ? child.verticalScrollbarWidth() : child.horizontalScrollbarHeight();

</del><ins>+    if (length.isAuto())

+        return false;

+    if (length.isPercentOrCalculated()) {

+        if (hasOrthogonalFlow(child) || m_hasDefiniteHeight == SizeDefiniteness::Definite)

+            return true;

+        if (m_hasDefiniteHeight == SizeDefiniteness::Indefinite)

+            return false;

+        bool definite = bool(child.computePercentageLogicalHeight(length));

+        m_hasDefiniteHeight = definite ? SizeDefiniteness::Definite : SizeDefiniteness::Indefinite;

+        return definite;

+    }

+    // FIXME: Eventually we should support other types of sizes here.

+    // Requires updating computeMainSizeFromAspectRatioUsing.

+    return length.isFixed();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::preferredMainAxisContentExtentForChild(RenderBox&amp; child, bool hasInfiniteLineLength)

</del><ins>+void RenderFlexibleBox::cacheChildMainSize(const RenderBox&amp; child)

</ins><span class="cx"> {

</span><del>-    bool hasOverrideSize = child.hasOverrideLogicalContentWidth() || child.hasOverrideLogicalContentHeight();

-    if (hasOverrideSize)

-        child.clearOverrideSize();

</del><ins>+    ASSERT(!child.needsLayout());

+    LayoutUnit mainSize;

+    if (hasOrthogonalFlow(child))

+        mainSize = child.logicalHeight();

+    else

+        mainSize = child.maxPreferredLogicalWidth();

+    m_intrinsicSizeAlongMainAxis.set(&amp;child, mainSize);

+    m_relaidOutChildren.add(&amp;child);

+}

</ins><span class="cx"> 

</span><ins>+void RenderFlexibleBox::clearCachedMainSizeForChild(const RenderBox&amp; child)

+{

+    m_intrinsicSizeAlongMainAxis.remove(&amp;child);

+}

+

+    

+LayoutUnit RenderFlexibleBox::computeInnerFlexBaseSizeForChild(RenderBox&amp; child, LayoutUnit mainAxisBorderAndPadding, bool relayoutChildren)

+{

+    child.clearOverrideSize();

+    

</ins><span class="cx">     Length flexBasis = flexBasisForChild(child);

</span><del>-    if (flexBasis.isAuto() || (flexBasis.isFixed() &amp;&amp; !flexBasis.value() &amp;&amp; hasInfiniteLineLength)) {

-        if (hasOrthogonalFlow(child)) {

-            if (hasOverrideSize)

</del><ins>+    if (mainAxisLengthIsDefinite(child, flexBasis))

+        return std::max(LayoutUnit(), computeMainAxisExtentForChild(child, MainOrPreferredSize, flexBasis).value());

+

+    // The flex basis is indefinite (=auto), so we need to compute the actual

+    // width of the child. For the logical width axis we just use the preferred

+    // width; for the height we need to lay out the child.

+    LayoutUnit mainAxisExtent;

+    if (hasOrthogonalFlow(child)) {

+        updateBlockChildDirtyBitsBeforeLayout(relayoutChildren, child);

+        if (child.needsLayout() || relayoutChildren || !m_intrinsicSizeAlongMainAxis.contains(&amp;child)) {

+            if (!child.needsLayout())

</ins><span class="cx">                 child.setChildNeedsLayout(MarkOnlyThis);

</span><span class="cx">             child.layoutIfNeeded();

</span><ins>+            cacheChildMainSize(child);

</ins><span class="cx">         }

</span><del>-        LayoutUnit mainAxisExtent = hasOrthogonalFlow(child) ? child.logicalHeight() : child.maxPreferredLogicalWidth();

-        ASSERT(mainAxisExtent - mainAxisBorderAndPaddingExtentForChild(child) &gt;= 0);

-        return mainAxisExtent - mainAxisBorderAndPaddingExtentForChild(child);

</del><ins>+        mainAxisExtent = m_intrinsicSizeAlongMainAxis.get(&amp;child);

+    } else {

+        // We don't need to add scrollbarLogicalWidth here because the preferred

+        // width includes the scrollbar, even for overflow: auto.

+        mainAxisExtent = child.maxPreferredLogicalWidth();

</ins><span class="cx">     }

</span><del>-    return computeMainAxisExtentForChild(child, MainOrPreferredSize, flexBasis).value_or(0);

</del><ins>+    return mainAxisExtent - mainAxisBorderAndPadding;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::layoutFlexItems(bool relayoutChildren, Vector&lt;LineContext&gt;&amp; lineContexts)

</del><ins>+void RenderFlexibleBox::layoutFlexItems(bool relayoutChildren)

</ins><span class="cx"> {

</span><del>-    OrderedFlexItemList orderedChildren;

-    LayoutUnit preferredMainAxisExtent;

</del><ins>+    Vector&lt;LineContext&gt; lineContexts;

+    LayoutUnit sumFlexBaseSize;

</ins><span class="cx">     double totalFlexGrow;

</span><ins>+    double totalFlexShrink;

</ins><span class="cx">     double totalWeightedFlexShrink;

</span><del>-    LayoutUnit minMaxAppliedMainAxisExtent;

-

</del><ins>+    LayoutUnit sumHypotheticalMainSize;

+    

+    // Set up our master list of flex items. All of the rest of the algorithm

+    // should work off this list of a subset.

+    // TODO(cbiesinger): That second part is not yet true.

+    Vector&lt;FlexItem&gt; allItems;

</ins><span class="cx">     m_orderIterator.first();

</span><ins>+    for (RenderBox* child = m_orderIterator.currentChild(); child; child = m_orderIterator.next()) {

+        if (child-&gt;isOutOfFlowPositioned()) {

+            // Out-of-flow children are not flex items, so we skip them here.

+            prepareChildForPositionedLayout(*child);

+            continue;

+        }

+        allItems.append(constructFlexItem(*child, relayoutChildren));

+    }

+    

+    const LayoutUnit lineBreakLength = mainAxisContentExtent(LayoutUnit::max());

+    FlexLayoutAlgorithm flexAlgorithm(style(), lineBreakLength, allItems);

</ins><span class="cx">     LayoutUnit crossAxisOffset = flowAwareBorderBefore() + flowAwarePaddingBefore();

</span><del>-    bool hasInfiniteLineLength = false;

-    while (computeNextFlexLine(orderedChildren, preferredMainAxisExtent, totalFlexGrow, totalWeightedFlexShrink, minMaxAppliedMainAxisExtent, hasInfiniteLineLength)) {

-        LayoutUnit availableFreeSpace = mainAxisContentExtent(preferredMainAxisExtent) - preferredMainAxisExtent;

-        FlexSign flexSign = (minMaxAppliedMainAxisExtent &lt; preferredMainAxisExtent + availableFreeSpace) ? PositiveFlexibility : NegativeFlexibility;

-        InflexibleFlexItemSize inflexibleItems;

-        Vector&lt;LayoutUnit&gt; childSizes;

-        while (!resolveFlexibleLengths(flexSign, orderedChildren, availableFreeSpace, totalFlexGrow, totalWeightedFlexShrink, inflexibleItems, childSizes, hasInfiniteLineLength)) {

-            ASSERT(totalFlexGrow &gt;= 0 &amp;&amp; totalWeightedFlexShrink &gt;= 0);

-            ASSERT(inflexibleItems.size() &gt; 0);

</del><ins>+    Vector&lt;FlexItem&gt; lineItems;

+    size_t nextIndex = 0;

+    while (flexAlgorithm.computeNextFlexLine(nextIndex, lineItems, sumFlexBaseSize, totalFlexGrow, totalFlexShrink, totalWeightedFlexShrink, sumHypotheticalMainSize)) {

+        LayoutUnit containerMainInnerSize = mainAxisContentExtent(sumHypotheticalMainSize);

+        // availableFreeSpace is the initial amount of free space in this flexbox.

+        // remainingFreeSpace starts out at the same value but as we place and lay

+        // out flex items we subtract from it. Note that both values can be

+        // negative.

+        LayoutUnit remainingFreeSpace = containerMainInnerSize - sumFlexBaseSize;

+        FlexSign flexSign = (sumHypotheticalMainSize &lt; containerMainInnerSize) ? PositiveFlexibility : NegativeFlexibility;

+        freezeInflexibleItems(flexSign, lineItems, remainingFreeSpace, totalFlexGrow, totalFlexShrink, totalWeightedFlexShrink);

+        // The initial free space gets calculated after freezing inflexible items.

+        // https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths step 3

+        const LayoutUnit initialFreeSpace = remainingFreeSpace;

+        while (!resolveFlexibleLengths(flexSign, lineItems, initialFreeSpace, remainingFreeSpace, totalFlexGrow, totalFlexShrink, totalWeightedFlexShrink)) {

+            ASSERT(totalFlexGrow &gt;= 0);

+            ASSERT(totalWeightedFlexShrink &gt;= 0);

</ins><span class="cx">         }

</span><ins>+        

+        // Recalculate the remaining free space. The adjustment for flex factors

+        // between 0..1 means we can't just use remainingFreeSpace here.

+        remainingFreeSpace = containerMainInnerSize;

+        for (size_t i = 0; i &lt; lineItems.size(); ++i) {

+            FlexItem&amp; flexItem = lineItems[i];

+            ASSERT(!flexItem.box.isOutOfFlowPositioned());

+            remainingFreeSpace -= flexItem.flexedMarginBoxSize();

+        }

+        // This will std::move lineItems into a newly-created LineContext.

+        layoutAndPlaceChildren(crossAxisOffset, lineItems, remainingFreeSpace, relayoutChildren, lineContexts);

+    }

</ins><span class="cx"> 

</span><del>-        layoutAndPlaceChildren(crossAxisOffset, orderedChildren, childSizes, availableFreeSpace, relayoutChildren, lineContexts);

-    }

</del><span class="cx">     if (hasLineIfEmpty()) {

</span><span class="cx">         // Even if computeNextFlexLine returns true, the flexbox might not have

<span class="cx">         // a line because all our children might be out of flow positioned.

</span><span class="cx">         // Instead of just checking if we have a line, make sure the flexbox

<span class="cx">         // has at least a line's worth of height to cover this case.

</span><del>-        LayoutUnit minHeight = borderAndPaddingLogicalHeight()

-            + lineHeight(true, isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes)

-            + scrollbarLogicalHeight();

-        if (height() &lt; minHeight)

</del><ins>+        LayoutUnit minHeight = borderAndPaddingLogicalHeight() + lineHeight(true, isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes) + scrollbarLogicalHeight();

+        if (size().height() &lt; minHeight)

</ins><span class="cx">             setLogicalHeight(minHeight);

</span><span class="cx">     }

</span><ins>+    

+    updateLogicalHeight();

+    repositionLogicalHeightDependentFlexItems(lineContexts);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::autoMarginOffsetInMainAxis(const OrderedFlexItemList&amp; children, LayoutUnit&amp; availableFreeSpace)

</del><ins>+LayoutUnit RenderFlexibleBox::autoMarginOffsetInMainAxis(const Vector&lt;FlexItem&gt;&amp; children, LayoutUnit&amp; availableFreeSpace)

</ins><span class="cx"> {

</span><del>-    if (availableFreeSpace &lt;= 0)

-        return 0;

-

</del><ins>+    if (availableFreeSpace &lt;= LayoutUnit())

+        return LayoutUnit();

+    

</ins><span class="cx">     int numberOfAutoMargins = 0;

</span><span class="cx">     bool isHorizontal = isHorizontalFlow();

</span><span class="cx">     for (size_t i = 0; i &lt; children.size(); ++i) {

</span><del>-        RenderBox* child = children[i];

-        if (child-&gt;isOutOfFlowPositioned())

-            continue;

</del><ins>+        const auto&amp; child = children[i].box;

+        ASSERT(!child.isOutOfFlowPositioned());

</ins><span class="cx">         if (isHorizontal) {

</span><del>-            if (child-&gt;style().marginLeft().isAuto())

</del><ins>+            if (child.style().marginLeft().isAuto())

</ins><span class="cx">                 ++numberOfAutoMargins;

</span><del>-            if (child-&gt;style().marginRight().isAuto())

</del><ins>+            if (child.style().marginRight().isAuto())

</ins><span class="cx">                 ++numberOfAutoMargins;

</span><span class="cx">         } else {

</span><del>-            if (child-&gt;style().marginTop().isAuto())

</del><ins>+            if (child.style().marginTop().isAuto())

</ins><span class="cx">                 ++numberOfAutoMargins;

</span><del>-            if (child-&gt;style().marginBottom().isAuto())

</del><ins>+            if (child.style().marginBottom().isAuto())

</ins><span class="cx">                 ++numberOfAutoMargins;

</span><span class="cx">         }

</span><span class="cx">     }

</span><span class="cx">     if (!numberOfAutoMargins)

</span><del>-        return 0;

-

</del><ins>+        return LayoutUnit();

+    

</ins><span class="cx">     LayoutUnit sizeOfAutoMargin = availableFreeSpace / numberOfAutoMargins;

</span><del>-    availableFreeSpace = 0;

</del><ins>+    availableFreeSpace = LayoutUnit();

</ins><span class="cx">     return sizeOfAutoMargin;

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> void RenderFlexibleBox::updateAutoMarginsInMainAxis(RenderBox&amp; child, LayoutUnit autoMarginOffset)

</span><span class="cx"> {

</span><del>-    ASSERT(autoMarginOffset &gt;= 0);

-

</del><ins>+    ASSERT(autoMarginOffset &gt;= LayoutUnit());

+    

</ins><span class="cx">     if (isHorizontalFlow()) {

</span><span class="cx">         if (child.style().marginLeft().isAuto())

</span><span class="cx">             child.setMarginLeft(autoMarginOffset);

</span><span class="lines">@@ -771,7 +949,7 @@

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(RenderBox&amp; child) const

</del><ins>+bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><span class="cx">     if (isHorizontalFlow())

</span><span class="cx">         return child.style().marginTop().isAuto() || child.style().marginBottom().isAuto();

</span><span class="lines">@@ -778,7 +956,7 @@

</span><span class="cx">     return child.style().marginLeft().isAuto() || child.style().marginRight().isAuto();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox&amp; child)

</del><ins>+LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, const RenderBox&amp; child)

</ins><span class="cx"> {

</span><span class="cx">     ASSERT(!child.isOutOfFlowPositioned());

</span><span class="cx">     LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);

</span><span class="lines">@@ -788,12 +966,12 @@

</span><span class="cx"> bool RenderFlexibleBox::updateAutoMarginsInCrossAxis(RenderBox&amp; child, LayoutUnit availableAlignmentSpace)

</span><span class="cx"> {

</span><span class="cx">     ASSERT(!child.isOutOfFlowPositioned());

</span><del>-    ASSERT(availableAlignmentSpace &gt;= 0);

-

</del><ins>+    ASSERT(availableAlignmentSpace &gt;= LayoutUnit());

+    

</ins><span class="cx">     bool isHorizontal = isHorizontalFlow();

</span><del>-    Length start = isHorizontal ? child.style().marginTop() : child.style().marginLeft();

-    Length end = isHorizontal ? child.style().marginBottom() : child.style().marginRight();

-    if (start.isAuto() &amp;&amp; end.isAuto()) {

</del><ins>+    Length topOrLeft = isHorizontal ? child.style().marginTop() : child.style().marginLeft();

+    Length bottomOrRight = isHorizontal ? child.style().marginBottom() : child.style().marginRight();

+    if (topOrLeft.isAuto() &amp;&amp; bottomOrRight.isAuto()) {

</ins><span class="cx">         adjustAlignmentForChild(child, availableAlignmentSpace / 2);

</span><span class="cx">         if (isHorizontal) {

</span><span class="cx">             child.setMarginTop(availableAlignmentSpace / 2);

</span><span class="lines">@@ -804,8 +982,24 @@

</span><span class="cx">         }

</span><span class="cx">         return true;

</span><span class="cx">     }

</span><del>-    if (start.isAuto()) {

-        adjustAlignmentForChild(child, availableAlignmentSpace);

</del><ins>+    bool shouldAdjustTopOrLeft = true;

+    if (isColumnFlow() &amp;&amp; !child.style().isLeftToRightDirection()) {

+        // For column flows, only make this adjustment if topOrLeft corresponds to

+        // the &quot;before&quot; margin, so that flipForRightToLeftColumn will do the right

+        // thing.

+        shouldAdjustTopOrLeft = false;

+    }

+    if (!isColumnFlow() &amp;&amp; child.style().isFlippedBlocksWritingMode()) {

+        // If we are a flipped writing mode, we need to adjust the opposite side.

+        // This is only needed for row flows because this only affects the

+        // block-direction axis.

+        shouldAdjustTopOrLeft = false;

+    }

+    

+    if (topOrLeft.isAuto()) {

+        if (shouldAdjustTopOrLeft)

+            adjustAlignmentForChild(child, availableAlignmentSpace);

+        

</ins><span class="cx">         if (isHorizontal)

</span><span class="cx">             child.setMarginTop(availableAlignmentSpace);

</span><span class="cx">         else

</span><span class="lines">@@ -812,7 +1006,11 @@

</span><span class="cx">             child.setMarginLeft(availableAlignmentSpace);

</span><span class="cx">         return true;

</span><span class="cx">     }

</span><del>-    if (end.isAuto()) {

</del><ins>+

+    if (bottomOrRight.isAuto()) {

+        if (!shouldAdjustTopOrLeft)

+            adjustAlignmentForChild(child, availableAlignmentSpace);

+        

</ins><span class="cx">         if (isHorizontal)

</span><span class="cx">             child.setMarginBottom(availableAlignmentSpace);

</span><span class="cx">         else

</span><span class="lines">@@ -822,13 +1020,13 @@

</span><span class="cx">     return false;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::marginBoxAscentForChild(RenderBox&amp; child)

</del><ins>+LayoutUnit RenderFlexibleBox::marginBoxAscentForChild(const RenderBox&amp; child)

</ins><span class="cx"> {

</span><span class="cx">     LayoutUnit ascent = child.firstLineBaseline().value_or(crossAxisExtentForChild(child));

</span><span class="cx">     return ascent + flowAwareMarginBeforeForChild(child);

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderFlexibleBox::computeChildMarginValue(const Length&amp; margin)

</del><ins>+LayoutUnit RenderFlexibleBox::computeChildMarginValue(Length margin)

</ins><span class="cx"> {

<span class="cx">     // When resolving the margins, we use the content size for resolving percent and calc (for percents in calc expressions) margins.

<span class="cx">     // Fortunately, percent margins are always computed with respect to the block's width, even for margin-top and margin-bottom.

</span><span class="lines">@@ -858,71 +1056,6 @@

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-bool RenderFlexibleBox::crossAxisLengthIsDefinite(const RenderBox&amp; child, const Length&amp; length) const

-{

-    if (length.isAuto())

-        return false;

-    if (length.isPercentOrCalculated())

-        return hasOrthogonalFlow(child) ? hasDefiniteLogicalWidth() : bool(child.computePercentageLogicalHeight(length));

-    return length.isFixed();

-}

-

-    

-std::optional&lt;LayoutUnit&gt; RenderFlexibleBox::computeMainSizeFromAspectRatioUsing(const RenderBox&amp; child, Length crossSizeLength) const

-{

-    ASSERT(child.hasAspectRatio());

-    ASSERT(child.intrinsicSize().height() &gt; 0);

-    

-    std::optional&lt;LayoutUnit&gt; crossSize;

-    if (crossSizeLength.isFixed())

-        crossSize = LayoutUnit(crossSizeLength.value());

-    else {

-        ASSERT(crossSizeLength.isPercentOrCalculated());

-        crossSize = hasOrthogonalFlow(child) ?

-        adjustBorderBoxLogicalWidthForBoxSizing(valueForLength(crossSizeLength, contentWidth())) :

-        child.computePercentageLogicalHeight(crossSizeLength);

-    }

-    

-    if (!crossSize)

-        return crossSize;

-

-    const LayoutSize&amp; childIntrinsicSize = child.intrinsicSize();

-    double ratio = childIntrinsicSize.width().toFloat() / childIntrinsicSize.height().toFloat();

-    if (isHorizontalFlow())

-        return LayoutUnit(crossSize.value() * ratio);

-    return LayoutUnit(crossSize.value() / ratio);

-}

-

-LayoutUnit RenderFlexibleBox::adjustChildSizeForAspectRatioCrossAxisMinAndMax(const RenderBox&amp; child, LayoutUnit childSize)

-{

-    Length crossMin = isHorizontalFlow() ? child.style().minHeight() : child.style().minWidth();

-    Length crossMax = isHorizontalFlow() ? child.style().maxHeight() : child.style().maxWidth();

-

-    if (crossAxisLengthIsDefinite(child, crossMax)) {

-        std::optional&lt;LayoutUnit&gt; maxValue = computeMainSizeFromAspectRatioUsing(child, crossMax);

-        if (maxValue)

-            childSize = std::min(maxValue.value(), childSize);

-    }

-    

-    if (crossAxisLengthIsDefinite(child, crossMin)) {

-        std::optional&lt;LayoutUnit&gt; minValue = computeMainSizeFromAspectRatioUsing(child, crossMin);

-        if (minValue)

-            childSize = std::max(minValue.value(), childSize);

-    }

-    

-    return childSize;

-}

-

-bool RenderFlexibleBox::useChildAspectRatio(const RenderBox&amp; child) const

-{

-    if (!child.hasAspectRatio())

-        return false;

-    if (!child.intrinsicSize().height())

-        return false;

-    Length crossSize = isHorizontalFlow() ? child.style().height() : child.style().width();

-    return crossAxisLengthIsDefinite(child, crossSize);

-}

-

</del><span class="cx"> LayoutUnit RenderFlexibleBox::adjustChildSizeForMinAndMax(const RenderBox&amp; child, LayoutUnit childSize)

</span><span class="cx"> {

</span><span class="cx">     Length max = isHorizontalFlow() ? child.style().maxWidth() : child.style().maxHeight();

</span><span class="lines">@@ -931,17 +1064,17 @@

</span><span class="cx">         maxExtent = computeMainAxisExtentForChild(child, MaxSize, max);

</span><span class="cx">         childSize = std::min(childSize, maxExtent.value_or(childSize));

</span><span class="cx">     }

</span><del>-    

</del><ins>+

</ins><span class="cx">     Length min = isHorizontalFlow() ? child.style().minWidth() : child.style().minHeight();

</span><span class="cx">     if (min.isSpecifiedOrIntrinsic())

</span><del>-        return std::max(childSize, computeMainAxisExtentForChild(child, MinSize, min).value_or(childSize));

</del><ins>+        return std::max(childSize, std::max(LayoutUnit(), computeMainAxisExtentForChild(child, MinSize, min).value_or(childSize)));

</ins><span class="cx">     

</span><span class="cx">     if (!isFlexibleBoxImpl() &amp;&amp; min.isAuto() &amp;&amp; mainAxisOverflowForChild(child) == OVISIBLE &amp;&amp; !(isColumnFlow() &amp;&amp; is&lt;RenderFlexibleBox&gt;(child))) {

</span><del>-        // This is the implementation of CSS flexbox section 4.5 which defines the minimum size of &quot;pure&quot; flex

-        // items. For any other item the value should be 0, this also includes RenderFlexibleBox's derived clases

-        // (RenderButton, RenderFullScreen...) because that's just an implementation detail.

-        // FIXME: For now we don't handle nested column flexboxes. Need to implement better intrinsic

-        // size handling from the flex box spec first (4.5).

</del><ins>+        // FIXME: For now, we do not handle min-height: auto for nested

+        // column flexboxes. We need to implement

+        // https://drafts.csswg.org/css-flexbox/#intrinsic-sizes before that

+        // produces reasonable results. Tracking bug: https://crbug.com/581553

+        // css-flexbox section 4.5

</ins><span class="cx">         LayoutUnit contentSize = computeMainAxisExtentForChild(child, MinSize, Length(MinContent)).value();

</span><span class="cx">         ASSERT(contentSize &gt;= 0);

</span><span class="cx">         if (child.hasAspectRatio() &amp;&amp; child.intrinsicSize().height() &gt; 0)

</span><span class="lines">@@ -954,7 +1087,9 @@

</span><span class="cx">             ASSERT(resolvedMainSize &gt;= 0);

</span><span class="cx">             LayoutUnit specifiedSize = std::min(resolvedMainSize, maxExtent.value_or(resolvedMainSize));

</span><span class="cx">             return std::max(childSize, std::min(specifiedSize, contentSize));

</span><del>-        } else if (useChildAspectRatio(child)) {

</del><ins>+        }

+

+        if (useChildAspectRatio(child)) {

</ins><span class="cx">             Length crossSizeLength = isHorizontalFlow() ? child.style().height() : child.style().width();

</span><span class="cx">             std::optional&lt;LayoutUnit&gt; transferredSize = computeMainSizeFromAspectRatioUsing(child, crossSizeLength);

</span><span class="cx">             if (transferredSize) {

</span><span class="lines">@@ -962,117 +1097,192 @@

</span><span class="cx">                 return std::max(childSize, std::min(transferredSize.value(), contentSize));

</span><span class="cx">             }

</span><span class="cx">         }

</span><ins>+        

</ins><span class="cx">         return std::max(childSize, contentSize);

</span><span class="cx">     }

</span><del>-    return childSize;

</del><ins>+

+    return std::max(LayoutUnit(), childSize);

</ins><span class="cx"> }

</span><del>-

-bool RenderFlexibleBox::computeNextFlexLine(OrderedFlexItemList&amp; orderedChildren, LayoutUnit&amp; preferredMainAxisExtent, double&amp; totalFlexGrow, double&amp; totalWeightedFlexShrink, LayoutUnit&amp; minMaxAppliedMainAxisExtent, bool&amp; hasInfiniteLineLength)

</del><ins>+    

+std::optional&lt;LayoutUnit&gt; RenderFlexibleBox::crossSizeForPercentageResolution(const RenderBox&amp; child)

</ins><span class="cx"> {

</span><del>-    orderedChildren.clear();

-    preferredMainAxisExtent = 0;

-    totalFlexGrow = totalWeightedFlexShrink = 0;

-    minMaxAppliedMainAxisExtent = 0;

</del><ins>+    if (alignmentForChild(child) != ItemPositionStretch)

+        return std::nullopt;

</ins><span class="cx"> 

</span><del>-    if (!m_orderIterator.currentChild())

-        return false;

</del><ins>+    // Here we implement https://drafts.csswg.org/css-flexbox/#algo-stretch

+    if (hasOrthogonalFlow(child) &amp;&amp; child.hasOverrideLogicalContentWidth())

+        return child.overrideLogicalContentWidth();

+    if (!hasOrthogonalFlow(child) &amp;&amp; child.hasOverrideLogicalContentHeight())

+        return child.overrideLogicalContentHeight();

+    

+    // We don't currently implement the optimization from

+    // https://drafts.csswg.org/css-flexbox/#definite-sizes case 1. While that

+    // could speed up a specialized case, it requires determining if we have a

+    // definite size, which itself is not cheap. We can consider implementing it

+    // at a later time. (The correctness is ensured by redoing layout in

+    // applyStretchAlignmentToChild)

+    return std::nullopt;

+}

</ins><span class="cx"> 

</span><del>-    LayoutUnit lineBreakLength = mainAxisContentExtent(LayoutUnit::max());

-    hasInfiniteLineLength = lineBreakLength == LayoutUnit::max();

</del><ins>+std::optional&lt;LayoutUnit&gt; RenderFlexibleBox::mainSizeForPercentageResolution(const RenderBox&amp; child)

+{

+    // This function implements section 9.8. Definite and Indefinite Sizes, case

+    // 2) of the flexbox spec.

+    // We need to check for the flexbox to have a definite main size, and for the

+    // flex item to have a definite flex basis.

+    const Length&amp; flexBasis = flexBasisForChild(child);

+    if (!mainAxisLengthIsDefinite(child, flexBasis))

+        return std::nullopt;

+    if (!flexBasis.isPercentOrCalculated()) {

+        // If flex basis had a percentage, our size is guaranteed to be definite or

+        // the flex item's size could not be definite. Otherwise, we make up a

+        // percentage to check whether we have a definite size.

+        if (!mainAxisLengthIsDefinite(child, Length(0, Percent)))

+            return std::nullopt;

+    }

+    

+    if (hasOrthogonalFlow(child))

+        return child.hasOverrideLogicalContentHeight() ? std::optional&lt;LayoutUnit&gt;(child.overrideLogicalContentHeight()) : std::nullopt;

+    return child.hasOverrideLogicalContentWidth() ? std::optional&lt;LayoutUnit&gt;(child.overrideLogicalContentWidth()) : std::nullopt;

+}

</ins><span class="cx"> 

</span><del>-    bool lineHasInFlowItem = false;

</del><ins>+std::optional&lt;LayoutUnit&gt; RenderFlexibleBox::childLogicalHeightForPercentageResolution(const RenderBox&amp; child)

+{

+    if (!hasOrthogonalFlow(child))

+        return crossSizeForPercentageResolution(child);

+    return mainSizeForPercentageResolution(child);

+}

</ins><span class="cx"> 

</span><del>-    LayoutUnit preferredMainAxisExtentWithMinWidthConstraint;

-    for (RenderBox* child = m_orderIterator.currentChild(); child; child = m_orderIterator.next()) {

-        if (child-&gt;isOutOfFlowPositioned()) {

-            orderedChildren.append(child);

-            continue;

-        }

-

-        LayoutUnit childMainAxisExtent = preferredMainAxisContentExtentForChild(*child, hasInfiniteLineLength);

-        LayoutUnit borderMarginAndPaddingSpace = mainAxisBorderAndPaddingExtentForChild(*child) + (isHorizontalFlow() ? child-&gt;horizontalMarginExtent() : child-&gt;verticalMarginExtent());

-

-        LayoutUnit childMainAxisExtentWithMinWidthConstraint = childMainAxisExtent;

-        if (child-&gt;style().logicalMinWidth().isSpecifiedOrIntrinsic()) {

-            if (auto minWidthForChild = computeMainAxisExtentForChild(*child, MinSize, child-&gt;style().logicalMinWidth()))

-                childMainAxisExtentWithMinWidthConstraint = std::max(childMainAxisExtent, minWidthForChild.value());

-        }

-        preferredMainAxisExtentWithMinWidthConstraint += childMainAxisExtentWithMinWidthConstraint + borderMarginAndPaddingSpace;

-

-        if (isMultiline() &amp;&amp; preferredMainAxisExtentWithMinWidthConstraint &gt; lineBreakLength &amp;&amp; lineHasInFlowItem)

-            break;

-        orderedChildren.append(child);

-        lineHasInFlowItem  = true;

-

-        preferredMainAxisExtent += childMainAxisExtent + borderMarginAndPaddingSpace;

-        totalFlexGrow += child-&gt;style().flexGrow();

-        totalWeightedFlexShrink += child-&gt;style().flexShrink() * childMainAxisExtent;

-

-        LayoutUnit childMinMaxAppliedMainAxisExtent = adjustChildSizeForMinAndMax(*child, childMainAxisExtent);

-        minMaxAppliedMainAxisExtent += childMinMaxAppliedMainAxisExtent + borderMarginAndPaddingSpace;

</del><ins>+LayoutUnit RenderFlexibleBox::adjustChildSizeForAspectRatioCrossAxisMinAndMax(const RenderBox&amp; child, LayoutUnit childSize)

+{

+    Length crossMin = isHorizontalFlow() ? child.style().minHeight() : child.style().minWidth();

+    Length crossMax = isHorizontalFlow() ? child.style().maxHeight() : child.style().maxWidth();

+    

+    if (crossAxisLengthIsDefinite(child, crossMax)) {

+        LayoutUnit maxValue = computeMainSizeFromAspectRatioUsing(child, crossMax);

+        childSize = std::min(maxValue, childSize);

</ins><span class="cx">     }

</span><del>-    return true;

</del><ins>+    

+    if (crossAxisLengthIsDefinite(child, crossMin)) {

+        LayoutUnit minValue = computeMainSizeFromAspectRatioUsing(child, crossMin);

+        childSize = std::max(minValue, childSize);

+    }

+    

+    return childSize;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::freezeViolations(const Vector&lt;Violation&gt;&amp; violations, LayoutUnit&amp; availableFreeSpace, double&amp; totalFlexGrow, double&amp; totalWeightedFlexShrink, InflexibleFlexItemSize&amp; inflexibleItems, bool hasInfiniteLineLength)

</del><ins>+FlexItem RenderFlexibleBox::constructFlexItem(RenderBox&amp; child, bool relayoutChildren)

</ins><span class="cx"> {

</span><ins>+    // If this condition is true, then computeMainAxisExtentForChild will call

+    // child.intrinsicContentLogicalHeight() and

+    // child.scrollbarLogicalHeight(), so if the child has intrinsic

+    // min/max/preferred size, run layout on it now to make sure its logical

+    // height and scroll bars are up to date.

+    if (childHasIntrinsicMainAxisSize(child) &amp;&amp; child.needsLayout()) {

+        child.clearOverrideSize();

+        child.setChildNeedsLayout(MarkOnlyThis);

+        child.layoutIfNeeded();

+        cacheChildMainSize(child);

+        relayoutChildren = false;

+    }

+    

+    LayoutUnit borderAndPadding = isHorizontalFlow() ? child.horizontalBorderAndPaddingExtent() : child.verticalBorderAndPaddingExtent();

+    LayoutUnit childInnerFlexBaseSize = computeInnerFlexBaseSizeForChild(child, borderAndPadding, relayoutChildren);

+    LayoutUnit childMinMaxAppliedMainAxisExtent = adjustChildSizeForMinAndMax(child, childInnerFlexBaseSize);

+    LayoutUnit margin = isHorizontalFlow() ? child.horizontalMarginExtent() : child.verticalMarginExtent();

+    return FlexItem(child, childInnerFlexBaseSize, childMinMaxAppliedMainAxisExtent, borderAndPadding, margin);

+}

+    

+void RenderFlexibleBox::freezeViolations(Vector&lt;FlexItem*&gt;&amp; violations, LayoutUnit&amp; availableFreeSpace, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink)

+{

</ins><span class="cx">     for (size_t i = 0; i &lt; violations.size(); ++i) {

</span><del>-        RenderBox&amp; child = violations[i].child;

-        LayoutUnit childSize = violations[i].childSize;

-        LayoutUnit preferredChildSize = preferredMainAxisContentExtentForChild(child, hasInfiniteLineLength);

-        availableFreeSpace -= childSize - preferredChildSize;

</del><ins>+        ASSERT(!violations[i]-&gt;frozen);

+        const auto&amp; child = violations[i]-&gt;box;

+        LayoutUnit childSize = violations[i]-&gt;flexedContentSize;

+        availableFreeSpace -= childSize - violations[i]-&gt;flexBaseContentSize;

</ins><span class="cx">         totalFlexGrow -= child.style().flexGrow();

</span><del>-        totalWeightedFlexShrink -= child.style().flexShrink() * preferredChildSize;

-        inflexibleItems.set(&amp;child, childSize);

</del><ins>+        totalFlexShrink -= child.style().flexShrink();

+        totalWeightedFlexShrink -= child.style().flexShrink() * violations[i]-&gt;flexBaseContentSize;

+        // totalWeightedFlexShrink can be negative when we exceed the precision of

+        // a double when we initially calcuate totalWeightedFlexShrink. We then

+        // subtract each child's weighted flex shrink with full precision, now

+        // leading to a negative result. See

+        // css3/flexbox/large-flex-shrink-assert.html

+        totalWeightedFlexShrink = std::max(totalWeightedFlexShrink, 0.0);

+        violations[i]-&gt;frozen = true;

</ins><span class="cx">     }

</span><span class="cx"> }

</span><del>-

-// Returns true if we successfully ran the algorithm and sized the flex items.

-bool RenderFlexibleBox::resolveFlexibleLengths(FlexSign flexSign, const OrderedFlexItemList&amp; children, LayoutUnit&amp; availableFreeSpace, double&amp; totalFlexGrow, double&amp; totalWeightedFlexShrink, InflexibleFlexItemSize&amp; inflexibleItems, Vector&lt;LayoutUnit&gt;&amp; childSizes, bool hasInfiniteLineLength)

</del><ins>+    

+void RenderFlexibleBox::freezeInflexibleItems(FlexSign flexSign, Vector&lt;FlexItem&gt;&amp; children, LayoutUnit&amp; remainingFreeSpace, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink)

</ins><span class="cx"> {

</span><del>-    childSizes.clear();

-    LayoutUnit totalViolation = 0;

-    LayoutUnit usedFreeSpace = 0;

-    Vector&lt;Violation&gt; minViolations;

-    Vector&lt;Violation&gt; maxViolations;

</del><ins>+    // Per https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths step 2,

+    // we freeze all items with a flex factor of 0 as well as those with a min/max

+    // size violation.

+    Vector&lt;FlexItem*&gt; newInflexibleItems;

</ins><span class="cx">     for (size_t i = 0; i &lt; children.size(); ++i) {

</span><del>-        RenderBox&amp; child = *children[i];

-        if (child.isOutOfFlowPositioned()) {

-            childSizes.append(0);

-            continue;

</del><ins>+        FlexItem&amp; flexItem = children[i];

+        const auto&amp; child = flexItem.box;

+        ASSERT(!flexItem.box.isOutOfFlowPositioned());

+        ASSERT(!flexItem.frozen);

+        float flexFactor = (flexSign == PositiveFlexibility) ? child.style().flexGrow() : child.style().flexShrink();

+        if (!flexFactor || (flexSign == PositiveFlexibility &amp;&amp; flexItem.flexBaseContentSize &gt; flexItem.hypotheticalMainContentSize) || (flexSign == NegativeFlexibility &amp;&amp; flexItem.flexBaseContentSize &lt; flexItem.hypotheticalMainContentSize)) {

+            flexItem.flexedContentSize = flexItem.hypotheticalMainContentSize;

+            newInflexibleItems.append(&amp;flexItem);

</ins><span class="cx">         }

</span><ins>+    }

+    freezeViolations(newInflexibleItems, remainingFreeSpace, totalFlexGrow, totalFlexShrink, totalWeightedFlexShrink);

+}

</ins><span class="cx"> 

</span><del>-        if (inflexibleItems.contains(&amp;child))

-            childSizes.append(inflexibleItems.get(&amp;child));

-        else {

-            LayoutUnit preferredChildSize = preferredMainAxisContentExtentForChild(child, hasInfiniteLineLength);

-            LayoutUnit childSize = preferredChildSize;

-            double extraSpace = 0;

-            if (availableFreeSpace &gt; 0 &amp;&amp; totalFlexGrow &gt; 0 &amp;&amp; flexSign == PositiveFlexibility &amp;&amp; std::isfinite(totalFlexGrow))

-                extraSpace = availableFreeSpace * child.style().flexGrow() / totalFlexGrow;

-            else if (availableFreeSpace &lt; 0 &amp;&amp; totalWeightedFlexShrink &gt; 0 &amp;&amp; flexSign == NegativeFlexibility &amp;&amp; std::isfinite(totalWeightedFlexShrink))

-                extraSpace = availableFreeSpace * child.style().flexShrink() * preferredChildSize / totalWeightedFlexShrink;

-            if (std::isfinite(extraSpace))

-                childSize += LayoutUnit::fromFloatRound(extraSpace);

</del><ins>+// Returns true if we successfully ran the algorithm and sized the flex items.

+bool RenderFlexibleBox::resolveFlexibleLengths(FlexSign flexSign, Vector&lt;FlexItem&gt;&amp; children, LayoutUnit initialFreeSpace, LayoutUnit&amp; remainingFreeSpace, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink)

+{

+    LayoutUnit totalViolation;

+    LayoutUnit usedFreeSpace;

+    Vector&lt;FlexItem*&gt; minViolations;

+    Vector&lt;FlexItem*&gt; maxViolations;

</ins><span class="cx"> 

</span><del>-            LayoutUnit adjustedChildSize = adjustChildSizeForMinAndMax(child, childSize);

-            childSizes.append(adjustedChildSize);

-            usedFreeSpace += adjustedChildSize - preferredChildSize;

</del><ins>+    double sumFlexFactors = (flexSign == PositiveFlexibility) ? totalFlexGrow : totalFlexShrink;

+    if (sumFlexFactors &gt; 0 &amp;&amp; sumFlexFactors &lt; 1) {

+        LayoutUnit fractional(initialFreeSpace * sumFlexFactors);

+        if (fractional.abs() &lt; remainingFreeSpace.abs())

+            remainingFreeSpace = fractional;

+    }

</ins><span class="cx"> 

</span><del>-            LayoutUnit violation = adjustedChildSize - childSize;

-            if (violation &gt; 0)

-                minViolations.append(Violation(child, adjustedChildSize));

-            else if (violation &lt; 0)

-                maxViolations.append(Violation(child, adjustedChildSize));

-            totalViolation += violation;

-        }

</del><ins>+    for (size_t i = 0; i &lt; children.size(); ++i) {

+        FlexItem&amp; flexItem = children[i];

+        const auto&amp; child = flexItem.box;

+        

+        // This check also covers out-of-flow children.

+        if (flexItem.frozen)

+            continue;

+        

+        LayoutUnit childSize = flexItem.flexBaseContentSize;

+        double extraSpace = 0;

+        if (remainingFreeSpace &gt; 0 &amp;&amp; totalFlexGrow &gt; 0 &amp;&amp; flexSign == PositiveFlexibility &amp;&amp; std::isfinite(totalFlexGrow))

+            extraSpace = remainingFreeSpace * child.style().flexGrow() / totalFlexGrow;

+        else if (remainingFreeSpace &lt; 0 &amp;&amp; totalWeightedFlexShrink &gt; 0 &amp;&amp; flexSign == NegativeFlexibility &amp;&amp; std::isfinite(totalWeightedFlexShrink) &amp;&amp; child.style().flexShrink())

+            extraSpace = remainingFreeSpace * child.style().flexShrink() * flexItem.flexBaseContentSize / totalWeightedFlexShrink;

+        if (std::isfinite(extraSpace))

+            childSize += LayoutUnit::fromFloatRound(extraSpace);

+        

+        LayoutUnit adjustedChildSize = adjustChildSizeForMinAndMax(child, childSize);

+        ASSERT(adjustedChildSize &gt;= 0);

+        flexItem.flexedContentSize = adjustedChildSize;

+        usedFreeSpace += adjustedChildSize - flexItem.flexBaseContentSize;

+        

+        LayoutUnit violation = adjustedChildSize - childSize;

+        if (violation &gt; 0)

+            minViolations.append(&amp;flexItem);

+        else if (violation &lt; 0)

+            maxViolations.append(&amp;flexItem);

+        totalViolation += violation;

</ins><span class="cx">     }

</span><del>-

</del><ins>+    

</ins><span class="cx">     if (totalViolation)

</span><del>-        freezeViolations(totalViolation &lt; 0 ? maxViolations : minViolations, availableFreeSpace, totalFlexGrow, totalWeightedFlexShrink, inflexibleItems, hasInfiniteLineLength);

</del><ins>+        freezeViolations(totalViolation &lt; 0 ? maxViolations : minViolations, remainingFreeSpace, totalFlexGrow, totalFlexShrink, totalWeightedFlexShrink);

</ins><span class="cx">     else

</span><del>-        availableFreeSpace -= usedFreeSpace;

-

</del><ins>+        remainingFreeSpace -= usedFreeSpace;

+    

</ins><span class="cx">     return !totalViolation;

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="lines">@@ -1102,25 +1312,121 @@

</span><span class="cx">     return 0;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::setLogicalOverrideSize(RenderBox&amp; child, LayoutUnit childPreferredSize)

</del><ins>+

+static LayoutUnit alignmentOffset(LayoutUnit availableFreeSpace, ItemPosition position, LayoutUnit ascent, LayoutUnit maxAscent, bool isWrapReverse)

</ins><span class="cx"> {

</span><ins>+    switch (position) {

+    case ItemPositionAuto:

+    case ItemPositionNormal:

+        ASSERT_NOT_REACHED();

+        break;

+    case ItemPositionStretch:

+        // Actual stretching must be handled by the caller. Since wrap-reverse

+        // flips cross start and cross end, stretch children should be aligned

+        // with the cross end. This matters because applyStretchAlignment

+        // doesn't always stretch or stretch fully (explicit cross size given, or

+        // stretching constrained by max-height/max-width). For flex-start and

+        // flex-end this is handled by alignmentForChild().

+        if (isWrapReverse)

+            return availableFreeSpace;

+        break;

+    case ItemPositionFlexStart:

+        break;

+    case ItemPositionFlexEnd:

+        return availableFreeSpace;

+    case ItemPositionCenter:

+        return availableFreeSpace / 2;

+    case ItemPositionBaseline:

+        // FIXME: If we get here in columns, we want the use the descent, except

+        // we currently can't get the ascent/descent of orthogonal children.

+        // https://bugs.webkit.org/show_bug.cgi?id=98076

+        return maxAscent - ascent;

+    case ItemPositionLastBaseline:

+    case ItemPositionSelfStart:

+    case ItemPositionSelfEnd:

+    case ItemPositionStart:

+    case ItemPositionEnd:

+    case ItemPositionLeft:

+    case ItemPositionRight:

+        // FIXME: Implement these. The extended grammar

+        // is not enabled by default so we shouldn't hit this codepath.

+        // The new grammar is only used when Grid Layout feature is enabled.

+        ASSERT(RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled());

+        break;

+    }

+    return 0;

+}

+

+void RenderFlexibleBox::setOverrideMainAxisContentSizeForChild(RenderBox&amp; child, LayoutUnit childPreferredSize)

+{

</ins><span class="cx">     if (hasOrthogonalFlow(child))

</span><del>-        child.setOverrideLogicalContentHeight(childPreferredSize - child.borderAndPaddingLogicalHeight());

</del><ins>+        child.setOverrideLogicalContentHeight(childPreferredSize);

</ins><span class="cx">     else

</span><del>-        child.setOverrideLogicalContentWidth(childPreferredSize - child.borderAndPaddingLogicalWidth());

</del><ins>+        child.setOverrideLogicalContentWidth(childPreferredSize);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::prepareChildForPositionedLayout(RenderBox&amp; child, LayoutUnit mainAxisOffset, LayoutUnit crossAxisOffset, PositionedLayoutMode layoutMode)

</del><ins>+LayoutUnit RenderFlexibleBox::staticMainAxisPositionForPositionedChild(const RenderBox&amp; child)

</ins><span class="cx"> {

</span><ins>+    const LayoutUnit availableSpace = mainAxisContentExtent(contentLogicalHeight()) - mainAxisExtentForChild(child);

+

+    ContentPosition position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehavior());

+    ContentDistributionType distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());

+    LayoutUnit offset = initialJustifyContentOffset(availableSpace, position, distribution, 1);

+    if (style().flexDirection() == FlowRowReverse || style().flexDirection() == FlowColumnReverse)

+        offset = availableSpace - offset;

+    return offset;

+}

+

+LayoutUnit RenderFlexibleBox::staticCrossAxisPositionForPositionedChild(const RenderBox&amp; child)

+{

+    LayoutUnit availableSpace = crossAxisContentExtent() - crossAxisExtentForChild(child);

+    return alignmentOffset(availableSpace, alignmentForChild(child), LayoutUnit(), LayoutUnit(), style().flexWrap() == FlexWrapReverse);

+}

+

+LayoutUnit RenderFlexibleBox::staticInlinePositionForPositionedChild(const RenderBox&amp; child)

+{

+    return startOffsetForContent() + (isColumnFlow() ? staticCrossAxisPositionForPositionedChild(child) : staticMainAxisPositionForPositionedChild(child));

+}

+

+LayoutUnit RenderFlexibleBox::staticBlockPositionForPositionedChild(const RenderBox&amp; child)

+{

+    return borderAndPaddingBefore() + (isColumnFlow() ? staticMainAxisPositionForPositionedChild(child) : staticCrossAxisPositionForPositionedChild(child));

+}

+

+bool RenderFlexibleBox::setStaticPositionForPositionedLayout(const RenderBox&amp; child)

+{

+    bool positionChanged = false;

+    auto* childLayer = child.layer();

+    if (child.style().hasStaticInlinePosition(style().isHorizontalWritingMode())) {

+        LayoutUnit inlinePosition = staticInlinePositionForPositionedChild(child);

+        if (childLayer-&gt;staticInlinePosition() != inlinePosition) {

+            childLayer-&gt;setStaticInlinePosition(inlinePosition);

+            positionChanged = true;

+        }

+    }

+    if (child.style().hasStaticBlockPosition(style().isHorizontalWritingMode())) {

+        LayoutUnit blockPosition = staticBlockPositionForPositionedChild(child);

+        if (childLayer-&gt;staticBlockPosition() != blockPosition) {

+            childLayer-&gt;setStaticBlockPosition(blockPosition);

+            positionChanged = true;

+        }

+    }

+    return positionChanged;

+}

+

+void RenderFlexibleBox::prepareChildForPositionedLayout(RenderBox&amp; child)

+{

</ins><span class="cx">     ASSERT(child.isOutOfFlowPositioned());

</span><span class="cx">     child.containingBlock()-&gt;insertPositionedObject(child);

</span><del>-    RenderLayer* childLayer = child.layer();

-    LayoutUnit inlinePosition = isColumnFlow() ? crossAxisOffset : mainAxisOffset;

-    if (layoutMode == FlipForRowReverse &amp;&amp; style().flexDirection() == FlowRowReverse)

-        inlinePosition = mainAxisExtent() - mainAxisOffset;

-    childLayer-&gt;setStaticInlinePosition(inlinePosition); // FIXME: Not right for regions.

</del><ins>+    auto* childLayer = child.layer();

+    LayoutUnit staticInlinePosition = flowAwareBorderStart() + flowAwarePaddingStart();

+    if (childLayer-&gt;staticInlinePosition() != staticInlinePosition) {

+        childLayer-&gt;setStaticInlinePosition(staticInlinePosition);

+        if (child.style().hasStaticInlinePosition(style().isHorizontalWritingMode()))

+            child.setChildNeedsLayout(MarkOnlyThis);

+    }

</ins><span class="cx"> 

</span><del>-    LayoutUnit staticBlockPosition = isColumnFlow() ? mainAxisOffset : crossAxisOffset;

</del><ins>+    LayoutUnit staticBlockPosition = flowAwareBorderBefore() + flowAwarePaddingBefore();

</ins><span class="cx">     if (childLayer-&gt;staticBlockPosition() != staticBlockPosition) {

</span><span class="cx">         childLayer-&gt;setStaticBlockPosition(staticBlockPosition);

</span><span class="cx">         if (child.style().hasStaticBlockPosition(style().isHorizontalWritingMode()))

</span><span class="lines">@@ -1128,9 +1434,10 @@

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-ItemPosition RenderFlexibleBox::alignmentForChild(RenderBox&amp; child) const

</del><ins>+ItemPosition RenderFlexibleBox::alignmentForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><del>-    ItemPosition align = child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehaviorFlexibleBox).position();

</del><ins>+    ItemPosition align = child.style().resolvedAlignSelf(&amp;style(), selfAlignmentNormalBehavior()).position();

+    ASSERT(align != ItemPositionAuto &amp;&amp; align != ItemPositionNormal);

</ins><span class="cx"> 

</span><span class="cx">     if (align == ItemPositionBaseline &amp;&amp; hasOrthogonalFlow(child))

</span><span class="cx">         align = ItemPositionFlexStart;

</span><span class="lines">@@ -1145,30 +1452,53 @@

</span><span class="cx">     return align;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-size_t RenderFlexibleBox::numberOfInFlowPositionedChildren(const OrderedFlexItemList&amp; children) const

</del><ins>+void RenderFlexibleBox::resetAutoMarginsAndLogicalTopInCrossAxis(RenderBox&amp; child)

</ins><span class="cx"> {

</span><del>-    size_t count = 0;

-    for (size_t i = 0; i &lt; children.size(); ++i) {

-        RenderBox* child = children[i];

-        if (!child-&gt;isOutOfFlowPositioned())

-            ++count;

</del><ins>+    if (hasAutoMarginsInCrossAxis(child)) {

+        child.updateLogicalHeight();

+        if (isHorizontalFlow()) {

+            if (child.style().marginTop().isAuto())

+                child.setMarginTop(LayoutUnit());

+            if (child.style().marginBottom().isAuto())

+                child.setMarginBottom(LayoutUnit());

+        } else {

+            if (child.style().marginLeft().isAuto())

+                child.setMarginLeft(LayoutUnit());

+            if (child.style().marginRight().isAuto())

+                child.setMarginRight(LayoutUnit());

+        }

</ins><span class="cx">     }

</span><del>-    return count;

</del><span class="cx"> }

</span><span class="cx"> 

</span><del>-bool RenderFlexibleBox::needToStretchChild(RenderBox&amp; child)

</del><ins>+bool RenderFlexibleBox::needToStretchChildLogicalHeight(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><ins>+    // This function is a little bit magical. It relies on the fact that blocks

+    // intrinsically &quot;stretch&quot; themselves in their inline axis, i.e. a &lt;div&gt; has

+    // an implicit width: 100%. So the child will automatically stretch if our

+    // cross axis is the child's inline axis. That's the case if:

+    // - We are horizontal and the child is in vertical writing mode

+    // - We are vertical and the child is in horizontal writing mode

+    // Otherwise, we need to stretch if the cross axis size is auto.

</ins><span class="cx">     if (alignmentForChild(child) != ItemPositionStretch)

</span><span class="cx">         return false;

</span><span class="cx"> 

</span><del>-    Length crossAxisLength = isHorizontalFlow() ? child.style().height() : child.style().width();

-    return crossAxisLength.isAuto();

</del><ins>+    if (isHorizontalFlow() != child.style().isHorizontalWritingMode())

+        return false;

+

+    return child.style().logicalHeight().isAuto();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::resetAutoMarginsAndLogicalTopInCrossAxis(RenderBox&amp; child)

</del><ins>+bool RenderFlexibleBox::childHasIntrinsicMainAxisSize(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><del>-    if (hasAutoMarginsInCrossAxis(child))

-        child.updateLogicalHeight();

</del><ins>+    bool result = false;

+    if (isHorizontalFlow() != child.style().isHorizontalWritingMode()) {

+        Length childFlexBasis = flexBasisForChild(child);

+        Length childMinSize = isHorizontalFlow() ? child.style().minWidth() : child.style().minHeight();

+        Length childMaxSize = isHorizontalFlow() ? child.style().maxWidth() : child.style().maxHeight();

+        if (childFlexBasis.isIntrinsic() || childMinSize.isIntrinsicOrAuto() || childMaxSize.isIntrinsic())

+            result = true;

+    }

+    return result;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> EOverflow RenderFlexibleBox::mainAxisOverflowForChild(const RenderBox&amp; child) const

</span><span class="lines">@@ -1178,52 +1508,60 @@

</span><span class="cx">     return child.style().overflowY();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-static const StyleContentAlignmentData&amp; contentAlignmentNormalBehaviorFlexibleBox()

</del><ins>+EOverflow RenderFlexibleBox::crossAxisOverflowForChild(const RenderBox&amp; child) const

</ins><span class="cx"> {

</span><del>-    // The justify-content property applies along the main axis, but since flexing

-    // in the main axis is controlled by flex, stretch behaves as flex-start (ignoring

-    // the specified fallback alignment, if any).

-    // https://drafts.csswg.org/css-align/#distribution-flex

-    static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};

-    return normalBehavior;

</del><ins>+    if (isHorizontalFlow())

+        return child.style().overflowY();

+    return child.style().overflowX();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit&amp; crossAxisOffset, const OrderedFlexItemList&amp; children, const Vector&lt;LayoutUnit&gt;&amp; childSizes, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector&lt;LineContext&gt;&amp; lineContexts)

</del><ins>+void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit&amp; crossAxisOffset, Vector&lt;FlexItem&gt;&amp; children, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector&lt;LineContext&gt;&amp; lineContexts)

</ins><span class="cx"> {

</span><del>-    ASSERT(childSizes.size() == children.size());

</del><ins>+    ContentPosition position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehavior());

+    ContentDistributionType distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());

</ins><span class="cx"> 

</span><del>-    auto position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehaviorFlexibleBox());

-    auto distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehaviorFlexibleBox());

-

-    size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);

</del><span class="cx">     LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);

</span><span class="cx">     LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();

</span><del>-    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, position, distribution, numberOfChildrenForJustifyContent);

</del><ins>+    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size());

</ins><span class="cx">     if (style().flexDirection() == FlowRowReverse)

</span><span class="cx">         mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();

</span><span class="cx"> 

</span><span class="cx">     LayoutUnit totalMainExtent = mainAxisExtent();

</span><del>-    LayoutUnit maxAscent = 0, maxDescent = 0; // Used when align-items: baseline.

-    LayoutUnit maxChildCrossAxisExtent = 0;

-    size_t seenInFlowPositionedChildren = 0;

</del><ins>+    LayoutUnit maxAscent, maxDescent; // Used when align-items: baseline.

+    LayoutUnit maxChildCrossAxisExtent;

</ins><span class="cx">     bool shouldFlipMainAxis = !isColumnFlow() &amp;&amp; !isLeftToRightFlow();

</span><span class="cx">     for (size_t i = 0; i &lt; children.size(); ++i) {

</span><del>-        RenderBox&amp; child = *children[i];

-        if (child.isOutOfFlowPositioned()) {

-            prepareChildForPositionedLayout(child, mainAxisOffset, crossAxisOffset, FlipForRowReverse);

-            continue;

-        }

</del><ins>+        const auto&amp; flexItem = children[i];

+        auto&amp; child = flexItem.box;

</ins><span class="cx"> 

</span><del>-        LayoutUnit childPreferredSize = childSizes[i] + mainAxisBorderAndPaddingExtentForChild(child);

-        setLogicalOverrideSize(child, childPreferredSize);

-        // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.

-        if (needToStretchChild(child) || childPreferredSize != mainAxisExtentForChild(child))

</del><ins>+        ASSERT(!flexItem.box.isOutOfFlowPositioned());

+

+        setOverrideMainAxisContentSizeForChild(child, flexItem.flexedContentSize);

+        // The flexed content size and the override size include the scrollbar

+        // width, so we need to compare to the size including the scrollbar.

+        // TODO(cbiesinger): Should it include the scrollbar?

+        if (flexItem.flexedContentSize != mainAxisContentExtentForChildIncludingScrollbar(child))

</ins><span class="cx">             child.setChildNeedsLayout(MarkOnlyThis);

</span><span class="cx">         else {

<del>-            // To avoid double applying margin changes in updateAutoMarginsInCrossAxis, we reset the margins here.

</del><ins>+            // To avoid double applying margin changes in

+            // updateAutoMarginsInCrossAxis, we reset the margins here.

</ins><span class="cx">             resetAutoMarginsAndLogicalTopInCrossAxis(child);

</span><span class="cx">         }

</span><del>-        updateBlockChildDirtyBitsBeforeLayout(relayoutChildren, child);

</del><ins>+        // We may have already forced relayout for orthogonal flowing children in

+        // computeInnerFlexBaseSizeForChild.

+        bool forceChildRelayout = relayoutChildren &amp;&amp; !m_relaidOutChildren.contains(&amp;child);

+        if (child.isRenderBlock() &amp;&amp; downcast&lt;RenderBlock&gt;(child).hasPercentHeightDescendants()) {

+            // Have to force another relayout even though the child is sized

+            // correctly, because its descendants are not sized correctly yet. Our

+            // previous layout of the child was done without an override height set.

+            // So, redo it here.

+            forceChildRelayout = true;

+        }

+        updateBlockChildDirtyBitsBeforeLayout(forceChildRelayout, child);

+        if (!child.needsLayout())

+            child.markForPaginationRelayoutIfNeeded();

+        if (child.needsLayout())

+            m_relaidOutChildren.add(&amp;child);

</ins><span class="cx">         child.layoutIfNeeded();

</span><span class="cx"> 

</span><span class="cx">         updateAutoMarginsInMainAxis(child, autoMarginOffset);

</span><span class="lines">@@ -1236,9 +1574,11 @@

</span><span class="cx">             maxAscent = std::max(maxAscent, ascent);

</span><span class="cx">             maxDescent = std::max(maxDescent, descent);

</span><span class="cx"> 

</span><ins>+            // FIXME: Take scrollbar into account

</ins><span class="cx">             childCrossAxisMarginBoxExtent = maxAscent + maxDescent;

</span><span class="cx">         } else

</span><del>-            childCrossAxisMarginBoxExtent = crossAxisExtentForChild(child) + crossAxisMarginExtentForChild(child);

</del><ins>+            childCrossAxisMarginBoxExtent = crossAxisIntrinsicExtentForChild(child) + crossAxisMarginExtentForChild(child);

+

</ins><span class="cx">         if (!isColumnFlow())

</span><span class="cx">             setLogicalHeight(std::max(logicalHeight(), crossAxisOffset + flowAwareBorderAfter() + flowAwarePaddingAfter() + childCrossAxisMarginBoxExtent + crossAxisScrollbarExtent()));

</span><span class="cx">         maxChildCrossAxisExtent = std::max(maxChildCrossAxisExtent, childCrossAxisMarginBoxExtent);

</span><span class="lines">@@ -1246,68 +1586,63 @@

</span><span class="cx">         mainAxisOffset += flowAwareMarginStartForChild(child);

</span><span class="cx"> 

</span><span class="cx">         LayoutUnit childMainExtent = mainAxisExtentForChild(child);

</span><del>-        LayoutPoint childLocation(shouldFlipMainAxis ? totalMainExtent - mainAxisOffset - childMainExtent : mainAxisOffset,

-            crossAxisOffset + flowAwareMarginBeforeForChild(child));

-

-        // FIXME: Supporting layout deltas.

</del><ins>+        // In an RTL column situation, this will apply the margin-right/margin-end

+        // on the left. This will be fixed later in flipForRightToLeftColumn.

+        LayoutPoint childLocation(shouldFlipMainAxis ? totalMainExtent - mainAxisOffset - childMainExtent : mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child));

</ins><span class="cx">         setFlowAwareLocationForChild(child, childLocation);

</span><span class="cx">         mainAxisOffset += childMainExtent + flowAwareMarginEndForChild(child);

</span><span class="cx"> 

</span><del>-        ++seenInFlowPositionedChildren;

-        if (seenInFlowPositionedChildren &lt; numberOfChildrenForJustifyContent)

-            mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, numberOfChildrenForJustifyContent);

</del><ins>+        if (i != children.size() - 1) {

+            // The last item does not get extra space added.

+            mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, children.size());

+        }

+

+        // FIXME: Deal with pagination.

</ins><span class="cx">     }

</span><span class="cx"> 

</span><span class="cx">     if (isColumnFlow())

</span><del>-        setLogicalHeight(mainAxisOffset + flowAwareBorderEnd() + flowAwarePaddingEnd() + scrollbarLogicalHeight());

</del><ins>+        setLogicalHeight(std::max(logicalHeight(), mainAxisOffset + flowAwareBorderEnd() + flowAwarePaddingEnd() + scrollbarLogicalHeight()));

</ins><span class="cx"> 

</span><span class="cx">     if (style().flexDirection() == FlowColumnReverse) {

</span><del>-        // We have to do an extra pass for column-reverse to reposition the flex items since the start depends

-        // on the height of the flexbox, which we only know after we've positioned all the flex items.

</del><ins>+        // We have to do an extra pass for column-reverse to reposition the flex

+        // items since the start depends on the height of the flexbox, which we

+        // only know after we've positioned all the flex items.

</ins><span class="cx">         updateLogicalHeight();

</span><span class="cx">         layoutColumnReverse(children, crossAxisOffset, availableFreeSpace);

</span><span class="cx">     }

</span><span class="cx"> 

</span><span class="cx">     if (m_numberOfInFlowChildrenOnFirstLine == -1)

</span><del>-        m_numberOfInFlowChildrenOnFirstLine = seenInFlowPositionedChildren;

-    lineContexts.append(LineContext(crossAxisOffset, maxChildCrossAxisExtent, children.size(), maxAscent));

</del><ins>+        m_numberOfInFlowChildrenOnFirstLine = children.size();

+    lineContexts.append(LineContext(crossAxisOffset, maxChildCrossAxisExtent, maxAscent, WTFMove(children)));

</ins><span class="cx">     crossAxisOffset += maxChildCrossAxisExtent;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList&amp; children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)

</del><ins>+void RenderFlexibleBox::layoutColumnReverse(const Vector&lt;FlexItem&gt;&amp; children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)

</ins><span class="cx"> {

</span><del>-    auto position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehaviorFlexibleBox());

-    auto distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehaviorFlexibleBox());

-

-    // This is similar to the logic in layoutAndPlaceChildren, except we place the children

-    // starting from the end of the flexbox. We also don't need to layout anything since we're

-    // just moving the children to a new position.

-    size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);

</del><ins>+    ContentPosition position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehavior());

+    ContentDistributionType distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());

+    

+    // This is similar to the logic in layoutAndPlaceChildren, except we place

+    // the children starting from the end of the flexbox. We also don't need to

+    // layout anything since we're just moving the children to a new position.

</ins><span class="cx">     LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();

</span><del>-    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, position, distribution, numberOfChildrenForJustifyContent);

</del><ins>+    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size());

</ins><span class="cx">     mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();

</span><del>-

-    size_t seenInFlowPositionedChildren = 0;

</del><ins>+    

</ins><span class="cx">     for (size_t i = 0; i &lt; children.size(); ++i) {

</span><del>-        RenderBox&amp; child = *children[i];

-        if (child.isOutOfFlowPositioned()) {

-            child.layer()-&gt;setStaticBlockPosition(mainAxisOffset);

-            continue;

-        }

</del><ins>+        auto&amp; child = children[i].box;

+        ASSERT(!child.isOutOfFlowPositioned());

</ins><span class="cx">         mainAxisOffset -= mainAxisExtentForChild(child) + flowAwareMarginEndForChild(child);

</span><del>-

</del><span class="cx">         setFlowAwareLocationForChild(child, LayoutPoint(mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child)));

</span><del>-

</del><span class="cx">         mainAxisOffset -= flowAwareMarginStartForChild(child);

</span><del>-

-        ++seenInFlowPositionedChildren;

-        if (seenInFlowPositionedChildren &lt; numberOfChildrenForJustifyContent)

-            mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, numberOfChildrenForJustifyContent);

</del><ins>+        mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, children.size());

</ins><span class="cx">     }

</span><span class="cx"> }

</span><del>-

</del><ins>+    

</ins><span class="cx"> static LayoutUnit initialAlignContentOffset(LayoutUnit availableFreeSpace, ContentPosition alignContent, ContentDistributionType alignContentDistribution, unsigned numberOfLines)

</span><span class="cx"> {

</span><ins>+    if (numberOfLines &lt;= 1)

+        return LayoutUnit();

</ins><span class="cx">     if (alignContent == ContentPositionFlexEnd)

</span><span class="cx">         return availableFreeSpace;

</span><span class="cx">     if (alignContent == ContentPositionCenter)

</span><span class="lines">@@ -1318,7 +1653,7 @@

</span><span class="cx">         if (availableFreeSpace &lt; 0)

</span><span class="cx">             return availableFreeSpace / 2;

</span><span class="cx">     }

</span><del>-    return 0;

</del><ins>+    return LayoutUnit();

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> static LayoutUnit alignContentSpaceBetweenChildren(LayoutUnit availableFreeSpace, ContentDistributionType alignContentDistribution, unsigned numberOfLines)

</span><span class="lines">@@ -1329,140 +1664,99 @@

</span><span class="cx">         if (alignContentDistribution == ContentDistributionSpaceAround || alignContentDistribution == ContentDistributionStretch)

</span><span class="cx">             return availableFreeSpace / numberOfLines;

</span><span class="cx">     }

</span><del>-    return 0;

</del><ins>+    return LayoutUnit();

</ins><span class="cx"> }

</span><del>-

</del><ins>+    

</ins><span class="cx"> void RenderFlexibleBox::alignFlexLines(Vector&lt;LineContext&gt;&amp; lineContexts)

</span><span class="cx"> {

</span><del>-    ContentPosition position = style().resolvedAlignContentPosition(contentAlignmentNormalBehaviorFlexibleBox());

-    ContentDistributionType distribution = style().resolvedAlignContentDistribution(contentAlignmentNormalBehaviorFlexibleBox());

-

-    if (!isMultiline() || position == ContentPositionFlexStart)

</del><ins>+    ContentPosition position = style().resolvedAlignContentPosition(contentAlignmentNormalBehavior());

+    ContentDistributionType distribution = style().resolvedAlignContentDistribution(contentAlignmentNormalBehavior());

+    

+    // If we have a single line flexbox or a multiline line flexbox with only one

+    // flex line, the line height is all the available space. For

+    // flex-direction: row, this means we need to use the height, so we do this

+    // after calling updateLogicalHeight.

+    if (lineContexts.size() == 1) {

+        lineContexts[0].crossAxisExtent = crossAxisContentExtent();

</ins><span class="cx">         return;

</span><del>-

</del><ins>+    }

+    

+    if (position == ContentPositionFlexStart)

+        return;

+    

</ins><span class="cx">     LayoutUnit availableCrossAxisSpace = crossAxisContentExtent();

</span><span class="cx">     for (size_t i = 0; i &lt; lineContexts.size(); ++i)

</span><span class="cx">         availableCrossAxisSpace -= lineContexts[i].crossAxisExtent;

</span><del>-

-    RenderBox* child = m_orderIterator.first();

</del><ins>+    

</ins><span class="cx">     LayoutUnit lineOffset = initialAlignContentOffset(availableCrossAxisSpace, position, distribution, lineContexts.size());

</span><span class="cx">     for (unsigned lineNumber = 0; lineNumber &lt; lineContexts.size(); ++lineNumber) {

</span><del>-        lineContexts[lineNumber].crossAxisOffset += lineOffset;

-        for (size_t childNumber = 0; childNumber &lt; lineContexts[lineNumber].numberOfChildren; ++childNumber, child = m_orderIterator.next())

-            adjustAlignmentForChild(*child, lineOffset);

-

</del><ins>+        LineContext&amp; lineContext = lineContexts[lineNumber];

+        lineContext.crossAxisOffset += lineOffset;

+        for (size_t childNumber = 0; childNumber &lt; lineContext.flexItems.size(); ++childNumber) {

+            FlexItem&amp; flexItem = lineContext.flexItems[childNumber];

+            adjustAlignmentForChild(flexItem.box, lineOffset);

+        }

+        

</ins><span class="cx">         if (distribution == ContentDistributionStretch &amp;&amp; availableCrossAxisSpace &gt; 0)

</span><span class="cx">             lineContexts[lineNumber].crossAxisExtent += availableCrossAxisSpace / static_cast&lt;unsigned&gt;(lineContexts.size());

</span><del>-

</del><ins>+        

</ins><span class="cx">         lineOffset += alignContentSpaceBetweenChildren(availableCrossAxisSpace, distribution, lineContexts.size());

</span><span class="cx">     }

</span><span class="cx"> }

</span><del>-

</del><ins>+    

</ins><span class="cx"> void RenderFlexibleBox::adjustAlignmentForChild(RenderBox&amp; child, LayoutUnit delta)

</span><span class="cx"> {

</span><del>-    if (child.isOutOfFlowPositioned()) {

-        LayoutUnit staticInlinePosition = child.layer()-&gt;staticInlinePosition();

-        LayoutUnit staticBlockPosition = child.layer()-&gt;staticBlockPosition();

-        LayoutUnit mainAxis = isColumnFlow() ? staticBlockPosition : staticInlinePosition;

-        LayoutUnit crossAxis = isColumnFlow() ? staticInlinePosition : staticBlockPosition;

-        crossAxis += delta;

-        prepareChildForPositionedLayout(child, mainAxis, crossAxis, NoFlipForRowReverse);

-        return;

-    }

-

-    setFlowAwareLocationForChild(child, flowAwareLocationForChild(child) + LayoutSize(0, delta));

</del><ins>+    ASSERT(!child.isOutOfFlowPositioned());

+    setFlowAwareLocationForChild(child, flowAwareLocationForChild(child) + LayoutSize(LayoutUnit(), delta));

</ins><span class="cx"> }

</span><del>-

</del><ins>+    

</ins><span class="cx"> void RenderFlexibleBox::alignChildren(const Vector&lt;LineContext&gt;&amp; lineContexts)

</span><span class="cx"> {

<del>-    // Keep track of the space between the baseline edge and the after edge of the box for each line.

</del><ins>+    // Keep track of the space between the baseline edge and the after edge of

+    // the box for each line.

</ins><span class="cx">     Vector&lt;LayoutUnit&gt; minMarginAfterBaselines;

</span><del>-

-    RenderBox* child = m_orderIterator.first();

</del><ins>+    

</ins><span class="cx">     for (size_t lineNumber = 0; lineNumber &lt; lineContexts.size(); ++lineNumber) {

</span><ins>+        const LineContext&amp; lineContext = lineContexts[lineNumber];

+        

</ins><span class="cx">         LayoutUnit minMarginAfterBaseline = LayoutUnit::max();

</span><del>-        LayoutUnit lineCrossAxisExtent = lineContexts[lineNumber].crossAxisExtent;

-        LayoutUnit maxAscent = lineContexts[lineNumber].maxAscent;

-

-        for (size_t childNumber = 0; childNumber &lt; lineContexts[lineNumber].numberOfChildren; ++childNumber, child = m_orderIterator.next()) {

-            ASSERT(child);

-            if (child-&gt;isOutOfFlowPositioned()) {

-                if (style().flexWrap() == FlexWrapReverse)

-                    adjustAlignmentForChild(*child, lineCrossAxisExtent);

</del><ins>+        LayoutUnit lineCrossAxisExtent = lineContext.crossAxisExtent;

+        LayoutUnit maxAscent = lineContext.maxAscent;

+        

+        for (size_t childNumber = 0; childNumber &lt; lineContext.flexItems.size(); ++childNumber) {

+            const auto&amp; flexItem = lineContext.flexItems[childNumber];

+            ASSERT(!flexItem.box.isOutOfFlowPositioned());

+            

+            if (updateAutoMarginsInCrossAxis(flexItem.box, std::max(LayoutUnit(), availableAlignmentSpaceForChild(lineCrossAxisExtent, flexItem.box))))

</ins><span class="cx">                 continue;

</span><del>-            }

</del><ins>+            

+            ItemPosition position = alignmentForChild(flexItem.box);

+            if (position == ItemPositionStretch)

+                applyStretchAlignmentToChild(flexItem.box, lineCrossAxisExtent);

+            LayoutUnit availableSpace =

+            availableAlignmentSpaceForChild(lineCrossAxisExtent, flexItem.box);

+            LayoutUnit offset = alignmentOffset(availableSpace, position, marginBoxAscentForChild(flexItem.box), maxAscent, style().flexWrap() == FlexWrapReverse);

+            adjustAlignmentForChild(flexItem.box, offset);

+            if (position == ItemPositionBaseline &amp;&amp; style().flexWrap() == FlexWrapReverse)

+                minMarginAfterBaseline = std::min(minMarginAfterBaseline, availableAlignmentSpaceForChild(lineCrossAxisExtent, flexItem.box) - offset);

+        }

</ins><span class="cx"> 

</span><del>-            if (updateAutoMarginsInCrossAxis(*child, std::max(LayoutUnit::fromPixel(0), availableAlignmentSpaceForChild(lineCrossAxisExtent, *child))))

-                continue;

-

-            switch (alignmentForChild(*child)) {

-            case ItemPositionAuto:

-            case ItemPositionNormal:

-                ASSERT_NOT_REACHED();

-                break;

-            case ItemPositionStart:

-                // FIXME: https://webkit.org/b/135460 - The extended grammar is not supported

-                // yet for FlexibleBox.

-                // Defaulting to Stretch for now, as it what most of FlexBox based renders

-                // expect as default.

-                ASSERT(RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled());

-                FALLTHROUGH;

-            case ItemPositionStretch: {

-                applyStretchAlignmentToChild(*child, lineCrossAxisExtent);

-                // Since wrap-reverse flips cross start and cross end, strech children should be aligned with the cross end.

-                if (style().flexWrap() == FlexWrapReverse)

-                    adjustAlignmentForChild(*child, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child));

-                break;

-            }

-            case ItemPositionFlexStart:

-                break;

-            case ItemPositionFlexEnd:

-                adjustAlignmentForChild(*child, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child));

-                break;

-            case ItemPositionCenter:

-                adjustAlignmentForChild(*child, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child) / 2);

-                break;

-            case ItemPositionBaseline: {

-                // FIXME: If we get here in columns, we want the use the descent, except we currently can't get the ascent/descent of orthogonal children.

-                // https://bugs.webkit.org/show_bug.cgi?id=98076

-                LayoutUnit ascent = marginBoxAscentForChild(*child);

-                LayoutUnit startOffset = maxAscent - ascent;

-                adjustAlignmentForChild(*child, startOffset);

-

-                if (style().flexWrap() == FlexWrapReverse)

-                    minMarginAfterBaseline = std::min(minMarginAfterBaseline, availableAlignmentSpaceForChild(lineCrossAxisExtent, *child) - startOffset);

-                break;

-            }

-            case ItemPositionLastBaseline:

-            case ItemPositionSelfStart:

-            case ItemPositionSelfEnd:

-            case ItemPositionEnd:

-            case ItemPositionLeft:

-            case ItemPositionRight:

-                // FIXME: https://webkit.org/b/135460 - The extended grammar is not supported

-                // yet for FlexibleBox.

-                ASSERT(RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled());

-                break;

-            default:

-                ASSERT_NOT_REACHED();

-                break;

-            }

-        }

</del><span class="cx">         minMarginAfterBaselines.append(minMarginAfterBaseline);

</span><span class="cx">     }

</span><del>-

</del><ins>+    

</ins><span class="cx">     if (style().flexWrap() != FlexWrapReverse)

</span><span class="cx">         return;

</span><del>-

-    // wrap-reverse flips the cross axis start and end. For baseline alignment, this means we

-    // need to align the after edge of baseline elements with the after edge of the flex line.

-    child = m_orderIterator.first();

</del><ins>+    

+    // wrap-reverse flips the cross axis start and end. For baseline alignment,

+    // this means we need to align the after edge of baseline elements with the

+    // after edge of the flex line.

</ins><span class="cx">     for (size_t lineNumber = 0; lineNumber &lt; lineContexts.size(); ++lineNumber) {

</span><ins>+        const LineContext&amp; lineContext = lineContexts[lineNumber];

</ins><span class="cx">         LayoutUnit minMarginAfterBaseline = minMarginAfterBaselines[lineNumber];

</span><del>-        for (size_t childNumber = 0; childNumber &lt; lineContexts[lineNumber].numberOfChildren; ++childNumber, child = m_orderIterator.next()) {

-            ASSERT(child);

-            if (alignmentForChild(*child) == ItemPositionBaseline &amp;&amp; !hasAutoMarginsInCrossAxis(*child) &amp;&amp; minMarginAfterBaseline)

-                adjustAlignmentForChild(*child, minMarginAfterBaseline);

</del><ins>+        for (size_t childNumber = 0; childNumber &lt; lineContext.flexItems.size(); ++childNumber) {

+            const auto&amp; flexItem = lineContext.flexItems[childNumber];

+            if (alignmentForChild(flexItem.box) == ItemPositionBaseline &amp;&amp; !hasAutoMarginsInCrossAxis(flexItem.box) &amp;&amp; minMarginAfterBaseline)

+                adjustAlignmentForChild(flexItem.box, minMarginAfterBaseline);

</ins><span class="cx">         }

</span><span class="cx">     }

</span><span class="cx"> }

</span><span class="lines">@@ -1469,48 +1763,70 @@

</span><span class="cx"> 

</span><span class="cx"> void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox&amp; child, LayoutUnit lineCrossAxisExtent)

</span><span class="cx"> {

</span><del>-    if (!isColumnFlow() &amp;&amp; child.style().logicalHeight().isAuto()) {

-        // FIXME: If the child has orthogonal flow, then it already has an override height set, so use it.

-        if (!hasOrthogonalFlow(child)) {

-            LayoutUnit stretchedLogicalHeight = child.logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);

-            ASSERT(!child.needsLayout());

-            LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight, child.logicalHeight() - child.borderAndPaddingLogicalHeight());

-

-            // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.

-            if (desiredLogicalHeight != child.logicalHeight()) {

-                child.setOverrideLogicalContentHeight(desiredLogicalHeight - child.borderAndPaddingLogicalHeight());

-                child.setLogicalHeight(0);

-                child.setChildNeedsLayout(MarkOnlyThis);

-                child.layout();

-            }

</del><ins>+    if (!hasOrthogonalFlow(child) &amp;&amp; child.style().logicalHeight().isAuto()) {

+        LayoutUnit stretchedLogicalHeight = std::max(child.borderAndPaddingLogicalHeight(),

+        lineCrossAxisExtent - crossAxisMarginExtentForChild(child));

+        ASSERT(!child.needsLayout());

+        LayoutUnit desiredLogicalHeight = child.constrainLogicalHeightByMinMax(stretchedLogicalHeight, cachedChildIntrinsicContentLogicalHeight(child));

+        

+        // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.

+        bool childNeedsRelayout = desiredLogicalHeight != child.logicalHeight();

+        if (child.isRenderBlock() &amp;&amp; downcast&lt;RenderBlock&gt;(child).hasPercentHeightDescendants() &amp;&amp; m_relaidOutChildren.contains(&amp;child)) {

+            // Have to force another relayout even though the child is sized

+            // correctly, because its descendants are not sized correctly yet. Our

+            // previous layout of the child was done without an override height set.

+            // So, redo it here.

+            childNeedsRelayout = true;

</ins><span class="cx">         }

</span><del>-    } else if (isColumnFlow() &amp;&amp; child.style().logicalWidth().isAuto()) {

-        // FIXME: If the child doesn't have orthogonal flow, then it already has an override width set, so use it.

-        if (hasOrthogonalFlow(child)) {

-            LayoutUnit childWidth = std::max&lt;LayoutUnit&gt;(0, lineCrossAxisExtent - crossAxisMarginExtentForChild(child));

-            childWidth = child.constrainLogicalWidthInRegionByMinMax(childWidth, childWidth, *this);

</del><ins>+        if (childNeedsRelayout || !child.hasOverrideLogicalContentHeight())

+            child.setOverrideLogicalContentHeight(desiredLogicalHeight - child.borderAndPaddingLogicalHeight());

+        if (childNeedsRelayout) {

+            child.setLogicalHeight(LayoutUnit());

+            // We cache the child's intrinsic content logical height to avoid it being

+            // reset to the stretched height.

+            // FIXME: This is fragile. RendertBoxes should be smart enough to

+            // determine their intrinsic content logical height correctly even when

+            // there's an overrideHeight.

+            LayoutUnit childIntrinsicContentLogicalHeight = cachedChildIntrinsicContentLogicalHeight(child);

+            child.setChildNeedsLayout(MarkOnlyThis);

+            

+            // Don't use layoutChildIfNeeded to avoid setting cross axis cached size twice.

+            child.layoutIfNeeded();

</ins><span class="cx"> 

</span><del>-            if (childWidth != child.logicalWidth()) {

-                child.setOverrideLogicalContentWidth(childWidth - child.borderAndPaddingLogicalWidth());

-                child.setChildNeedsLayout(MarkOnlyThis);

-                child.layout();

-            }

</del><ins>+            setCachedChildIntrinsicContentLogicalHeight(child, childIntrinsicContentLogicalHeight);

</ins><span class="cx">         }

</span><ins>+    } else if (hasOrthogonalFlow(child) &amp;&amp; child.style().logicalWidth().isAuto()) {

+        LayoutUnit childWidth = std::max(LayoutUnit(), lineCrossAxisExtent - crossAxisMarginExtentForChild(child));

+        childWidth = child.constrainLogicalWidthInRegionByMinMax(childWidth, crossAxisContentExtent(), *this, nullptr);

+        

+        if (childWidth != child.logicalWidth()) {

+            child.setOverrideLogicalContentWidth(childWidth - child.borderAndPaddingLogicalWidth());

+            child.setChildNeedsLayout(MarkOnlyThis);

+            child.layoutIfNeeded();

+        }

</ins><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-void RenderFlexibleBox::flipForRightToLeftColumn()

</del><ins>+void RenderFlexibleBox::flipForRightToLeftColumn(const Vector&lt;LineContext&gt;&amp; lineContexts)

</ins><span class="cx"> {

</span><span class="cx">     if (style().isLeftToRightDirection() || !isColumnFlow())

</span><span class="cx">         return;

</span><del>-

</del><ins>+    

</ins><span class="cx">     LayoutUnit crossExtent = crossAxisExtent();

</span><del>-    for (RenderBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {

-        if (child-&gt;isOutOfFlowPositioned())

-            continue;

-        LayoutPoint location = flowAwareLocationForChild(*child);

-        location.setY(crossExtent - crossAxisExtentForChild(*child) - location.y());

-        setFlowAwareLocationForChild(*child, location);

</del><ins>+    for (size_t lineNumber = 0; lineNumber &lt; lineContexts.size(); ++lineNumber) {

+        const LineContext&amp; lineContext = lineContexts[lineNumber];

+        for (size_t childNumber = 0; childNumber &lt; lineContext.flexItems.size(); ++childNumber) {

+            const auto&amp; flexItem = lineContext.flexItems[childNumber];

+            ASSERT(!flexItem.box.isOutOfFlowPositioned());

+            

+            LayoutPoint location = flowAwareLocationForChild(flexItem.box);

+            // For vertical flows, setFlowAwareLocationForChild will transpose x and

+            // y, so using the y axis for a column cross axis extent is correct.

+            location.setY(crossExtent - crossAxisExtentForChild(flexItem.box) - location.y());

+            if (!isHorizontalWritingMode())

+                location.move(LayoutSize(0, -horizontalScrollbarHeight()));

+            setFlowAwareLocationForChild(flexItem.box, location);

+        }

</ins><span class="cx">     }

</span><span class="cx"> }

</span><span class="cx"> 

</span><span class="lines">@@ -1517,14 +1833,14 @@

</span><span class="cx"> void RenderFlexibleBox::flipForWrapReverse(const Vector&lt;LineContext&gt;&amp; lineContexts, LayoutUnit crossAxisStartEdge)

</span><span class="cx"> {

</span><span class="cx">     LayoutUnit contentExtent = crossAxisContentExtent();

</span><del>-    RenderBox* child = m_orderIterator.first();

</del><span class="cx">     for (size_t lineNumber = 0; lineNumber &lt; lineContexts.size(); ++lineNumber) {

</span><del>-        for (size_t childNumber = 0; childNumber &lt; lineContexts[lineNumber].numberOfChildren; ++childNumber, child = m_orderIterator.next()) {

-            ASSERT(child);

</del><ins>+        const LineContext&amp; lineContext = lineContexts[lineNumber];

+        for (size_t childNumber = 0; childNumber &lt; lineContext.flexItems.size(); ++childNumber) {

+            const auto&amp; flexItem = lineContext.flexItems[childNumber];

</ins><span class="cx">             LayoutUnit lineCrossAxisExtent = lineContexts[lineNumber].crossAxisExtent;

</span><span class="cx">             LayoutUnit originalOffset = lineContexts[lineNumber].crossAxisOffset - crossAxisStartEdge;

</span><span class="cx">             LayoutUnit newOffset = contentExtent - originalOffset - lineCrossAxisExtent;

</span><del>-            adjustAlignmentForChild(*child, newOffset - originalOffset);

</del><ins>+            adjustAlignmentForChild(flexItem.box, newOffset - originalOffset);

</ins><span class="cx">         }

</span><span class="cx">     }

</span><span class="cx"> }

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderFlexibleBoxh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -35,6 +35,8 @@

</span><span class="cx"> 

</span><span class="cx"> namespace WebCore {

</span><span class="cx"> 

</span><ins>+class FlexItem;

+    

</ins><span class="cx"> class RenderFlexibleBox : public RenderBlock {

</span><span class="cx"> public:

</span><span class="cx">     RenderFlexibleBox(Element&amp;, RenderStyle&amp;&amp;);

</span><span class="lines">@@ -41,6 +43,8 @@

</span><span class="cx">     RenderFlexibleBox(Document&amp;, RenderStyle&amp;&amp;);

</span><span class="cx">     virtual ~RenderFlexibleBox();

</span><span class="cx"> 

</span><ins>+    bool isFlexibleBox() const override { return true; }

+

</ins><span class="cx">     const char* renderName() const override;

</span><span class="cx"> 

</span><span class="cx">     bool avoidsFloats() const final { return true; }

</span><span class="lines">@@ -55,9 +59,33 @@

</span><span class="cx"> 

</span><span class="cx">     bool isHorizontalFlow() const;

</span><span class="cx"> 

</span><ins>+    const OrderIterator&amp; orderIterator() const { return m_orderIterator; }

+

</ins><span class="cx">     bool isTopLayoutOverflowAllowed() const override;

</span><span class="cx">     bool isLeftLayoutOverflowAllowed() const override;

</span><span class="cx"> 

</span><ins>+    virtual bool isFlexibleBoxImpl() const { return false; };

+    

+    std::optional&lt;LayoutUnit&gt; crossSizeForPercentageResolution(const RenderBox&amp;);

+    std::optional&lt;LayoutUnit&gt; mainSizeForPercentageResolution(const RenderBox&amp;);

+    std::optional&lt;LayoutUnit&gt; childLogicalHeightForPercentageResolution(const RenderBox&amp;);

+    

+    void clearCachedMainSizeForChild(const RenderBox&amp; child);

+    

+    LayoutUnit cachedChildIntrinsicContentLogicalHeight(const RenderBox&amp; child) const;

+    void setCachedChildIntrinsicContentLogicalHeight(const RenderBox&amp; child, LayoutUnit);

+    void clearCachedChildIntrinsicContentLogicalHeight(const RenderBox&amp; child);

+

+    LayoutUnit staticMainAxisPositionForPositionedChild(const RenderBox&amp;);

+    LayoutUnit staticCrossAxisPositionForPositionedChild(const RenderBox&amp;);

+    

+    LayoutUnit staticInlinePositionForPositionedChild(const RenderBox&amp;);

+    LayoutUnit staticBlockPositionForPositionedChild(const RenderBox&amp;);

+    

+    // Returns true if the position changed. In that case, the child will have to

+    // be laid out again.

+    bool setStaticPositionForPositionedLayout(const RenderBox&amp;);

+

</ins><span class="cx"> protected:

</span><span class="cx">     void computeIntrinsicLogicalWidths(LayoutUnit&amp; minLogicalWidth, LayoutUnit&amp; maxLogicalWidth) const override;

</span><span class="cx">     void computePreferredLogicalWidths() override;

</span><span class="lines">@@ -69,30 +97,27 @@

</span><span class="cx">         PositiveFlexibility,

</span><span class="cx">         NegativeFlexibility,

</span><span class="cx">     };

</span><del>-

-    enum PositionedLayoutMode {

-        FlipForRowReverse,

-        NoFlipForRowReverse,

-    };

-

-    typedef HashMap&lt;const RenderBox*, LayoutUnit&gt; InflexibleFlexItemSize;

-    typedef Vector&lt;RenderBox*&gt; OrderedFlexItemList;

-

-    struct LineContext;

-    struct Violation;

-

</del><ins>+    

+    enum ChildLayoutType { LayoutIfNeeded, ForceLayout, NeverLayout };

+    

+    enum class SizeDefiniteness { Definite, Indefinite, Unknown };

+    

</ins><span class="cx">     // Use an inline capacity of 8, since flexbox containers usually have less than 8 children.

</span><span class="cx">     typedef Vector&lt;LayoutRect, 8&gt; ChildFrameRects;

</span><span class="cx"> 

</span><del>-    bool isFlexibleBox() const final { return true; }

</del><ins>+    struct LineContext;

+    

</ins><span class="cx">     bool hasOrthogonalFlow(const RenderBox&amp; child) const;

</span><span class="cx">     bool isColumnFlow() const;

</span><span class="cx">     bool isLeftToRightFlow() const;

</span><span class="cx">     bool isMultiline() const;

</span><del>-    Length flexBasisForChild(RenderBox&amp; child) const;

-    void setCrossAxisExtent(LayoutUnit);

-    LayoutUnit crossAxisExtentForChild(RenderBox&amp; child) const;

-    LayoutUnit mainAxisExtentForChild(RenderBox&amp; child) const;

</del><ins>+    Length flexBasisForChild(const RenderBox&amp; child) const;

+    LayoutUnit crossAxisExtentForChild(const RenderBox&amp; child) const;

+    LayoutUnit crossAxisIntrinsicExtentForChild(const RenderBox&amp; child) const;

+    LayoutUnit childIntrinsicLogicalHeight(const RenderBox&amp; child) const;

+    LayoutUnit childIntrinsicLogicalWidth(const RenderBox&amp; child) const;

+    LayoutUnit mainAxisExtentForChild(const RenderBox&amp; child) const;

+    LayoutUnit mainAxisContentExtentForChildIncludingScrollbar(const RenderBox&amp; child) const;

</ins><span class="cx">     LayoutUnit crossAxisExtent() const;

</span><span class="cx">     LayoutUnit mainAxisExtent() const;

</span><span class="cx">     LayoutUnit crossAxisContentExtent() const;

</span><span class="lines">@@ -107,66 +132,83 @@

</span><span class="cx">     LayoutUnit flowAwarePaddingEnd() const;

</span><span class="cx">     LayoutUnit flowAwarePaddingBefore() const;

</span><span class="cx">     LayoutUnit flowAwarePaddingAfter() const;

</span><del>-    LayoutUnit flowAwareMarginStartForChild(RenderBox&amp; child) const;

-    LayoutUnit flowAwareMarginEndForChild(RenderBox&amp; child) const;

-    LayoutUnit flowAwareMarginBeforeForChild(RenderBox&amp; child) const;

-    LayoutUnit flowAwareMarginAfterForChild(RenderBox&amp; child) const;

-    LayoutUnit crossAxisMarginExtentForChild(RenderBox&amp; child) const;

</del><ins>+    LayoutUnit flowAwareMarginStartForChild(const RenderBox&amp; child) const;

+    LayoutUnit flowAwareMarginEndForChild(const RenderBox&amp; child) const;

+    LayoutUnit flowAwareMarginBeforeForChild(const RenderBox&amp; child) const;

+    LayoutUnit crossAxisMarginExtentForChild(const RenderBox&amp; child) const;

</ins><span class="cx">     LayoutUnit crossAxisScrollbarExtent() const;

</span><del>-    LayoutPoint flowAwareLocationForChild(RenderBox&amp; child) const;

-    // FIXME: Supporting layout deltas.

</del><ins>+    LayoutUnit crossAxisScrollbarExtentForChild(const RenderBox&amp; child) const;

+    LayoutPoint flowAwareLocationForChild(const RenderBox&amp; child) const;

+    bool useChildAspectRatio(const RenderBox&amp; child) const;

+    LayoutUnit computeMainSizeFromAspectRatioUsing(const RenderBox&amp; child, Length crossSizeLength) const;

</ins><span class="cx">     void setFlowAwareLocationForChild(RenderBox&amp; child, const LayoutPoint&amp;);

</span><ins>+    LayoutUnit computeInnerFlexBaseSizeForChild(RenderBox&amp; child, LayoutUnit mainAxisBorderAndPadding, bool relayoutChildren);

</ins><span class="cx">     void adjustAlignmentForChild(RenderBox&amp; child, LayoutUnit);

</span><del>-    ItemPosition alignmentForChild(RenderBox&amp; child) const;

-    LayoutUnit mainAxisBorderAndPaddingExtentForChild(RenderBox&amp; child) const;

-    LayoutUnit mainAxisScrollbarExtentForChild(RenderBox&amp; child) const;

-    LayoutUnit preferredMainAxisContentExtentForChild(RenderBox&amp; child, bool hasInfiniteLineLength);

-    EOverflow mainAxisOverflowForChild(const RenderBox&amp;) const;

-

-    void layoutFlexItems(bool relayoutChildren, Vector&lt;LineContext&gt;&amp;);

-    LayoutUnit autoMarginOffsetInMainAxis(const OrderedFlexItemList&amp;, LayoutUnit&amp; availableFreeSpace);

</del><ins>+    ItemPosition alignmentForChild(const RenderBox&amp; child) const;

+    bool mainAxisLengthIsDefinite(const RenderBox&amp; child, const Length&amp; flexBasis) const;

+    bool crossAxisLengthIsDefinite(const RenderBox&amp; child, const Length&amp; flexBasis) const;

+    bool needToStretchChildLogicalHeight(const RenderBox&amp; child) const;

+    bool childHasIntrinsicMainAxisSize(const RenderBox&amp; child) const;

+    EOverflow mainAxisOverflowForChild(const RenderBox&amp; child) const;

+    EOverflow crossAxisOverflowForChild(const RenderBox&amp; child) const;

+    void cacheChildMainSize(const RenderBox&amp; child);

+    

+    void layoutFlexItems(bool relayoutChildren);

+    LayoutUnit autoMarginOffsetInMainAxis(const Vector&lt;FlexItem&gt;&amp;, LayoutUnit&amp; availableFreeSpace);

</ins><span class="cx">     void updateAutoMarginsInMainAxis(RenderBox&amp; child, LayoutUnit autoMarginOffset);

</span><del>-    bool hasAutoMarginsInCrossAxis(RenderBox&amp; child) const;

</del><ins>+    bool hasAutoMarginsInCrossAxis(const RenderBox&amp; child) const;

</ins><span class="cx">     bool updateAutoMarginsInCrossAxis(RenderBox&amp; child, LayoutUnit availableAlignmentSpace);

</span><span class="cx">     void repositionLogicalHeightDependentFlexItems(Vector&lt;LineContext&gt;&amp;);

</span><span class="cx">     LayoutUnit clientLogicalBottomAfterRepositioning();

</span><del>-    void appendChildFrameRects(ChildFrameRects&amp;);

-    void repaintChildrenDuringLayoutIfMoved(const ChildFrameRects&amp;);

-

-    LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox&amp;);

-    LayoutUnit marginBoxAscentForChild(RenderBox&amp;);

-

-    LayoutUnit computeChildMarginValue(const Length&amp; margin);

</del><ins>+    

+    LayoutUnit availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, const RenderBox&amp; child);

+    LayoutUnit marginBoxAscentForChild(const RenderBox&amp; child);

+    

+    LayoutUnit computeChildMarginValue(Length margin);

</ins><span class="cx">     void prepareOrderIteratorAndMargins();

</span><del>-    LayoutUnit adjustChildSizeForMinAndMax(const RenderBox&amp;, LayoutUnit childSize);

-    LayoutUnit adjustChildSizeForAspectRatioCrossAxisMinAndMax(const RenderBox&amp;, LayoutUnit childSize);

-    bool computeNextFlexLine(OrderedFlexItemList&amp; orderedChildren, LayoutUnit&amp; preferredMainAxisExtent, double&amp; totalFlexGrow, double&amp; totalWeightedFlexShrink, LayoutUnit&amp; minMaxAppliedMainAxisExtent, bool&amp; hasInfiniteLineLength);

-

-    bool resolveFlexibleLengths(FlexSign, const OrderedFlexItemList&amp;, LayoutUnit&amp; availableFreeSpace, double&amp; totalFlexGrow, double&amp; totalWeightedFlexShrink, InflexibleFlexItemSize&amp;, Vector&lt;LayoutUnit&gt;&amp; childSizes, bool hasInfiniteLineLength);

-    void freezeViolations(const Vector&lt;Violation&gt;&amp;, LayoutUnit&amp; availableFreeSpace, double&amp; totalFlexGrow, double&amp; totalWeightedFlexShrink, InflexibleFlexItemSize&amp;, bool hasInfiniteLineLength);

-

-    void resetAutoMarginsAndLogicalTopInCrossAxis(RenderBox&amp;);

-    bool needToStretchChild(RenderBox&amp;);

-    void setLogicalOverrideSize(RenderBox&amp; child, LayoutUnit childPreferredSize);

-    void prepareChildForPositionedLayout(RenderBox&amp; child, LayoutUnit mainAxisOffset, LayoutUnit crossAxisOffset, PositionedLayoutMode);

-    size_t numberOfInFlowPositionedChildren(const OrderedFlexItemList&amp;) const;

-    void layoutAndPlaceChildren(LayoutUnit&amp; crossAxisOffset, const OrderedFlexItemList&amp;, const Vector&lt;LayoutUnit&gt;&amp; childSizes, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector&lt;LineContext&gt;&amp;);

-    void layoutColumnReverse(const OrderedFlexItemList&amp;, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);

</del><ins>+    LayoutUnit adjustChildSizeForMinAndMax(const RenderBox&amp; child, LayoutUnit childSize);

+    LayoutUnit adjustChildSizeForAspectRatioCrossAxisMinAndMax(const RenderBox&amp; child, LayoutUnit childSize);

+    FlexItem constructFlexItem(RenderBox&amp;, bool relayoutChildren);

+    

+    void freezeInflexibleItems(FlexSign, Vector&lt;FlexItem&gt;&amp; children, LayoutUnit&amp; remainingFreeSpace, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink);

+    bool resolveFlexibleLengths(FlexSign, Vector&lt;FlexItem&gt;&amp;, LayoutUnit initialFreeSpace, LayoutUnit&amp; remainingFreeSpace, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink);

+    void freezeViolations(Vector&lt;FlexItem*&gt;&amp;, LayoutUnit&amp; availableFreeSpace, double&amp; totalFlexGrow, double&amp; totalFlexShrink, double&amp; totalWeightedFlexShrink);

+    

+    void resetAutoMarginsAndLogicalTopInCrossAxis(RenderBox&amp; child);

+    void setOverrideMainAxisContentSizeForChild(RenderBox&amp; child, LayoutUnit childPreferredSize);

+    void prepareChildForPositionedLayout(RenderBox&amp; child);

+    void layoutAndPlaceChildren(LayoutUnit&amp; crossAxisOffset, Vector&lt;FlexItem&gt;&amp;, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector&lt;LineContext&gt;&amp;);

+    void layoutColumnReverse(const Vector&lt;FlexItem&gt;&amp;, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);

</ins><span class="cx">     void alignFlexLines(Vector&lt;LineContext&gt;&amp;);

</span><span class="cx">     void alignChildren(const Vector&lt;LineContext&gt;&amp;);

</span><del>-    void applyStretchAlignmentToChild(RenderBox&amp;, LayoutUnit lineCrossAxisExtent);

-    void flipForRightToLeftColumn();

</del><ins>+    void applyStretchAlignmentToChild(RenderBox&amp; child, LayoutUnit lineCrossAxisExtent);

+    void flipForRightToLeftColumn(const Vector&lt;LineContext&gt;&amp; lineContexts);

</ins><span class="cx">     void flipForWrapReverse(const Vector&lt;LineContext&gt;&amp;, LayoutUnit crossAxisStartEdge);

</span><ins>+    

+    void appendChildFrameRects(ChildFrameRects&amp;);

+    void repaintChildrenDuringLayoutIfMoved(const ChildFrameRects&amp;);

</ins><span class="cx"> 

</span><del>-    bool mainAxisLengthIsDefinite(const RenderBox&amp;, const Length&amp;) const;

-    bool crossAxisLengthIsDefinite(const RenderBox&amp;, const Length&amp;) const;

-    bool useChildAspectRatio(const RenderBox&amp;) const;

-    std::optional&lt;LayoutUnit&gt; computeMainSizeFromAspectRatioUsing(const RenderBox&amp; child, Length crossSizeLength) const;

</del><ins>+    // This is used to cache the preferred size for orthogonal flow children so we

+    // don't have to relayout to get it

+    HashMap&lt;const RenderBox*, LayoutUnit&gt; m_intrinsicSizeAlongMainAxis;

</ins><span class="cx">     

</span><del>-    virtual bool isFlexibleBoxImpl() const { return false; };

</del><ins>+    // This is used to cache the intrinsic size on the cross axis to avoid

+    // relayouts when stretching.

+    HashMap&lt;const RenderBox*, LayoutUnit&gt; m_intrinsicContentLogicalHeights;

</ins><span class="cx"> 

</span><del>-    mutable OrderIterator m_orderIterator;

-    int m_numberOfInFlowChildrenOnFirstLine;

</del><ins>+    // This set is used to keep track of which children we laid out in this

+    // current layout iteration. We need it because the ones in this set may

+    // need an additional layout pass for correct stretch alignment handling, as

+    // the first layout likely did not use the correct value for percentage

+    // sizing of children.

+    HashSet&lt;const RenderBox*&gt; m_relaidOutChildren;

+    

+    mutable OrderIterator m_orderIterator { *this };

+    int m_numberOfInFlowChildrenOnFirstLine { -1 };

+    

+    // This is SizeIsUnknown outside of layoutBlock()

+    mutable SizeDefiniteness m_hasDefiniteHeight { SizeDefiniteness::Unknown };

+    bool m_inLayout { false };

</ins><span class="cx"> };

</span><span class="cx"> 

</span><span class="cx"> } // namespace WebCore

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderFullScreenh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFullScreen.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderFullScreen.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderFullScreen.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -44,6 +44,8 @@

</span><span class="cx">     static RenderFullScreen* wrapRenderer(RenderObject*, RenderElement*, Document&amp;);

</span><span class="cx">     void unwrapRenderer(bool&amp; requiresRenderTreeRebuild);

</span><span class="cx"> 

</span><ins>+    ItemPosition selfAlignmentNormalBehavior() const override { return ItemPositionCenter; }

+    

</ins><span class="cx"> private:

</span><span class="cx">     bool isRenderFullScreen() const override { return true; }

</span><span class="cx">     void willBeDestroyed() override;

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderGrid.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -37,8 +37,6 @@

</span><span class="cx"> 

</span><span class="cx"> namespace WebCore {

</span><span class="cx"> 

</span><del>-static constexpr ItemPosition selfAlignmentNormalBehavior = ItemPositionStretch;

-

</del><span class="cx"> enum TrackSizeRestriction {

</span><span class="cx">     AllowInfinity,

</span><span class="cx">     ForbidInfinity,

</span><span class="lines">@@ -87,22 +85,19 @@

</span><span class="cx">     return defaultAlignmentIsStretch(oldStyle.alignItems().position()) &amp;&amp; !defaultAlignmentIsStretch(newStyle.alignItems().position());

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-static inline bool selfAlignmentChangedToStretchInRowAxis(const RenderStyle&amp; oldStyle, const RenderStyle&amp; newStyle, const RenderStyle&amp; childStyle)

</del><ins>+static inline bool selfAlignmentChangedToStretchInRowAxis(const RenderStyle&amp; oldStyle, const RenderStyle&amp; newStyle, const RenderStyle&amp; childStyle, ItemPosition selfAlignNormalBehavior)

</ins><span class="cx"> {

</span><del>-    return childStyle.resolvedJustifySelf(oldStyle, selfAlignmentNormalBehavior).position() != ItemPositionStretch

-        &amp;&amp; childStyle.resolvedJustifySelf(newStyle, selfAlignmentNormalBehavior).position() == ItemPositionStretch;

</del><ins>+    return childStyle.resolvedJustifySelf(&amp;oldStyle, selfAlignNormalBehavior).position() != ItemPositionStretch &amp;&amp; childStyle.resolvedJustifySelf(&amp;newStyle, selfAlignNormalBehavior).position() == ItemPositionStretch;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-static inline bool selfAlignmentChangedFromStretchInRowAxis(const RenderStyle&amp; oldStyle, const RenderStyle&amp; newStyle, const RenderStyle&amp; childStyle)

</del><ins>+static inline bool selfAlignmentChangedFromStretchInRowAxis(const RenderStyle&amp; oldStyle, const RenderStyle&amp; newStyle, const RenderStyle&amp; childStyle, ItemPosition selfAlignNormalBehavior)

</ins><span class="cx"> {

</span><del>-    return childStyle.resolvedJustifySelf(oldStyle, selfAlignmentNormalBehavior).position() == ItemPositionStretch

-        &amp;&amp; childStyle.resolvedJustifySelf(newStyle, selfAlignmentNormalBehavior).position() != ItemPositionStretch;

</del><ins>+    return childStyle.resolvedJustifySelf(&amp;oldStyle, selfAlignNormalBehavior).position() == ItemPositionStretch &amp;&amp; childStyle.resolvedJustifySelf(&amp;newStyle, selfAlignNormalBehavior).position() != ItemPositionStretch;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle&amp; oldStyle, const RenderStyle&amp; newStyle, const RenderStyle&amp; childStyle)

</del><ins>+static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle&amp; oldStyle, const RenderStyle&amp; newStyle, const RenderStyle&amp; childStyle, ItemPosition selfAlignNormalBehavior)

</ins><span class="cx"> {

</span><del>-    return childStyle.resolvedAlignSelf(oldStyle, selfAlignmentNormalBehavior).position() == ItemPositionStretch

-        &amp;&amp; childStyle.resolvedAlignSelf(newStyle, selfAlignmentNormalBehavior).position() != ItemPositionStretch;

</del><ins>+    return childStyle.resolvedAlignSelf(&amp;oldStyle, selfAlignNormalBehavior).position() == ItemPositionStretch &amp;&amp; childStyle.resolvedAlignSelf(&amp;newStyle, selfAlignNormalBehavior).position() != ItemPositionStretch;

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> void RenderGrid::addChild(RenderObject* newChild, RenderObject* beforeChild)

</span><span class="lines">@@ -138,8 +133,8 @@

</span><span class="cx">         for (RenderBox* child = firstChildBox(); child; child = child-&gt;nextSiblingBox()) {

</span><span class="cx">             if (child-&gt;isOutOfFlowPositioned())

</span><span class="cx">                 continue;

</span><del>-            if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child-&gt;style()) || selfAlignmentChangedFromStretchInRowAxis(*oldStyle, newStyle, child-&gt;style())

-                || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child-&gt;style())) {

</del><ins>+            if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child-&gt;style(), selfAlignmentNormalBehavior()) || selfAlignmentChangedFromStretchInRowAxis(*oldStyle, newStyle, child-&gt;style(), selfAlignmentNormalBehavior())

+                || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child-&gt;style(), selfAlignmentNormalBehavior())) {

</ins><span class="cx">                 child-&gt;setChildNeedsLayout(MarkOnlyThis);

</span><span class="cx">             }

</span><span class="cx">         }

</span><span class="lines">@@ -174,7 +169,7 @@

</span><span class="cx">     for (const auto&amp; row : allRows)

</span><span class="cx">         logicalHeight += row.baseSize();

</span><span class="cx"> 

</span><del>-    logicalHeight += guttersSize(m_grid, ForRows, 0, allRows.size());

</del><ins>+    logicalHeight += guttersSize(m_grid, ForRows, 0, allRows.size(), m_trackSizingAlgorithm.sizingOperation());

</ins><span class="cx"> 

</span><span class="cx">     return logicalHeight;

</span><span class="cx"> }

</span><span class="lines">@@ -181,7 +176,7 @@

</span><span class="cx"> 

</span><span class="cx"> void RenderGrid::computeTrackSizesForDefiniteSize(GridTrackSizingDirection direction, LayoutUnit availableSpace)

</span><span class="cx"> {

</span><del>-    LayoutUnit totalGuttersSize = guttersSize(m_grid, direction, 0, m_grid.numTracks(direction));

</del><ins>+    LayoutUnit totalGuttersSize = guttersSize(m_grid, direction, 0, m_grid.numTracks(direction), m_trackSizingAlgorithm.sizingOperation());

</ins><span class="cx">     LayoutUnit freeSpace = availableSpace - totalGuttersSize;

</span><span class="cx"> 

</span><span class="cx">     m_trackSizingAlgorithm.setup(direction, numTracks(direction, m_grid), TrackSizing, availableSpace, freeSpace);

</span><span class="lines">@@ -320,17 +315,27 @@

</span><span class="cx">     clearNeedsLayout();

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderGrid::gridGapForDirection(GridTrackSizingDirection direction) const

</del><ins>+LayoutUnit RenderGrid::gridGapForDirection(GridTrackSizingDirection direction, SizingOperation sizingOperation) const

</ins><span class="cx"> {

</span><del>-    return valueForLength(direction == ForColumns ? style().gridColumnGap() : style().gridRowGap(), LayoutUnit());

</del><ins>+    LayoutUnit availableSize;

+    const Length&amp; gap = direction == ForColumns ? style().gridColumnGap() : style().gridRowGap();

+    

+    // FIXME: Figure out what to do when availableLogicalHeightForPercentageComputation has

+    // no value.

+    if (sizingOperation == TrackSizing &amp;&amp; gap.isPercent())

+        availableSize = direction == ForColumns ? availableLogicalWidth() : availableLogicalHeightForPercentageComputation().value_or(LayoutUnit());

+    

+    // FIXME: Maybe we could cache the computed percentage as a performance

+    // improvement.

+    return valueForLength(gap, availableSize);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><del>-LayoutUnit RenderGrid::guttersSize(const Grid&amp; grid, GridTrackSizingDirection direction, unsigned startLine, unsigned span) const

</del><ins>+LayoutUnit RenderGrid::guttersSize(const Grid&amp; grid, GridTrackSizingDirection direction, unsigned startLine, unsigned span, SizingOperation sizingOperation) const

</ins><span class="cx"> {

</span><span class="cx">     if (span &lt;= 1)

</span><span class="cx">         return { };

</span><span class="cx"> 

</span><del>-    LayoutUnit gap = gridGapForDirection(direction);

</del><ins>+    LayoutUnit gap = gridGapForDirection(direction, sizingOperation);

</ins><span class="cx"> 

<span class="cx">     // Fast path, no collapsing tracks.

</span><span class="cx">     if (!grid.hasAutoRepeatEmptyTracks(direction))

</span><span class="lines">@@ -405,7 +410,7 @@

</span><span class="cx">     algorithm.run();

</span><span class="cx"> 

</span><span class="cx">     size_t numberOfTracks = algorithm.tracks(direction).size();

</span><del>-    LayoutUnit totalGuttersSize = guttersSize(grid, direction, 0, numberOfTracks);

</del><ins>+    LayoutUnit totalGuttersSize = guttersSize(grid, direction, 0, numberOfTracks, algorithm.sizingOperation());

</ins><span class="cx"> 

</span><span class="cx">     minIntrinsicSize = algorithm.minContentSize() + totalGuttersSize;

</span><span class="cx">     maxIntrinsicSize = algorithm.maxContentSize() + totalGuttersSize;

</span><span class="lines">@@ -462,7 +467,7 @@

</span><span class="cx">     std::optional&lt;LayoutUnit&gt; availableSize;

</span><span class="cx">     if (isRowAxis) {

</span><span class="cx">         if (sizingOperation != IntrinsicSizeComputation)

</span><del>-            availableSize =  availableLogicalWidth();

</del><ins>+            availableSize = availableLogicalWidth();

</ins><span class="cx">     } else {

</span><span class="cx">         availableSize = computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), std::nullopt);

</span><span class="cx">         if (!availableSize) {

</span><span class="lines">@@ -509,7 +514,7 @@

</span><span class="cx"> 

</span><span class="cx">     // Add gutters as if there where only 1 auto repeat track. Gaps between auto repeat tracks will be added later when

<span class="cx">     // computing the repetitions.

</span><del>-    LayoutUnit gapSize = gridGapForDirection(direction);

</del><ins>+    LayoutUnit gapSize = gridGapForDirection(direction, sizingOperation);

</ins><span class="cx">     tracksSize += gapSize * trackSizes.size();

</span><span class="cx"> 

</span><span class="cx">     LayoutUnit freeSpace = availableSize.value() - tracksSize;

</span><span class="lines">@@ -810,7 +815,7 @@

</span><span class="cx"> 

</span><span class="cx">     ASSERT(!m_grid.needsItemsPlacement());

</span><span class="cx">     bool hasCollapsedTracks = m_grid.hasAutoRepeatEmptyTracks(direction);

</span><del>-    LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction) : LayoutUnit();

</del><ins>+    LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction, TrackSizing) : LayoutUnit();

</ins><span class="cx">     tracks.reserveCapacity(numPositions - 1);

</span><span class="cx">     for (size_t i = 0; i &lt; numPositions - 2; ++i)

</span><span class="cx">         tracks.append(positions[i + 1] - positions[i] - offsetBetweenTracks - gap);

</span><span class="lines">@@ -821,7 +826,7 @@

</span><span class="cx"> 

</span><span class="cx">     size_t remainingEmptyTracks = m_grid.autoRepeatEmptyTracks(direction)-&gt;size();

</span><span class="cx">     size_t lastLine = tracks.size();

</span><del>-    gap = gridGapForDirection(direction);

</del><ins>+    gap = gridGapForDirection(direction, TrackSizing);

</ins><span class="cx">     for (size_t i = 1; i &lt; lastLine; ++i) {

</span><span class="cx">         if (m_grid.isEmptyAutoRepeatTrack(direction, i - 1))

</span><span class="cx">             --remainingEmptyTracks;

</span><span class="lines">@@ -1014,7 +1019,7 @@

<span class="cx">         // These vectors store line positions including gaps, but we shouldn't consider them for the edges of the grid.

</span><span class="cx">         if (endLine &gt; 0 &amp;&amp; endLine &lt; lastLine) {

</span><span class="cx">             ASSERT(!m_grid.needsItemsPlacement());

</span><del>-            end -= guttersSize(m_grid, direction, endLine - 1, 2);

</del><ins>+            end -= guttersSize(m_grid, direction, endLine - 1, 2, TrackSizing);

</ins><span class="cx">             end -= isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;

</span><span class="cx">         }

</span><span class="cx">     }

</span><span class="lines">@@ -1032,7 +1037,7 @@

</span><span class="cx"> 

</span><span class="cx">             if (endLine &gt; 0 &amp;&amp; endLine &lt; lastLine) {

</span><span class="cx">                 ASSERT(!m_grid.needsItemsPlacement());

</span><del>-                offset += guttersSize(m_grid, direction, endLine - 1, 2);

</del><ins>+                offset += guttersSize(m_grid, direction, endLine - 1, 2, TrackSizing);

</ins><span class="cx">                 offset += isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;

</span><span class="cx">             }

</span><span class="cx">         }

</span><span class="lines">@@ -1078,7 +1083,7 @@

</span><span class="cx">         // If we have collapsed tracks we just ignore gaps here and add them later as we might not

<span class="cx">         // compute the gap between two consecutive tracks without examining the surrounding ones.

</span><span class="cx">         bool hasCollapsedTracks = m_grid.hasAutoRepeatEmptyTracks(direction);

</span><del>-        LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction) : LayoutUnit();

</del><ins>+        LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction, m_trackSizingAlgorithm.sizingOperation()) : LayoutUnit();

</ins><span class="cx">         unsigned nextToLastLine = numberOfLines - 2;

</span><span class="cx">         for (unsigned i = 0; i &lt; nextToLastLine; ++i)

</span><span class="cx">             positions[i + 1] = positions[i] + offset.distributionOffset + tracks[i].baseSize() + gap;

</span><span class="lines">@@ -1087,7 +1092,7 @@

</span><span class="cx">         // Adjust collapsed gaps. Collapsed tracks cause the surrounding gutters to collapse (they

<span class="cx">         // coincide exactly) except on the edges of the grid where they become 0.

</span><span class="cx">         if (hasCollapsedTracks) {

</span><del>-            gap = gridGapForDirection(direction);

</del><ins>+            gap = gridGapForDirection(direction, m_trackSizingAlgorithm.sizingOperation());

</ins><span class="cx">             unsigned remainingEmptyTracks = m_grid.autoRepeatEmptyTracks(direction)-&gt;size();

</span><span class="cx">             LayoutUnit gapAccumulator;

</span><span class="cx">             for (unsigned i = 1; i &lt; lastLine; ++i) {

</span><span class="lines">@@ -1130,15 +1135,6 @@

</span><span class="cx"> }

</span><span class="cx"> 

<span class="cx"> // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.

</span><del>-bool RenderGrid::needToStretchChildLogicalHeight(const RenderBox&amp; child) const

-{

-    if (child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).position() != ItemPositionStretch)

-        return false;

-

-    return isHorizontalWritingMode() &amp;&amp; child.style().height().isAuto();

-}

-

-// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.

</del><span class="cx"> LayoutUnit RenderGrid::marginLogicalHeightForChild(const RenderBox&amp; child) const

</span><span class="cx"> {

</span><span class="cx">     return isHorizontalWritingMode() ? child.verticalMarginExtent() : child.horizontalMarginExtent();

</span><span class="lines">@@ -1169,12 +1165,12 @@

</span><span class="cx"> 

</span><span class="cx"> StyleSelfAlignmentData RenderGrid::alignSelfForChild(const RenderBox&amp; child) const

</span><span class="cx"> {

</span><del>-    return child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior);

</del><ins>+    return child.style().resolvedAlignSelf(&amp;style(), selfAlignmentNormalBehavior());

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> StyleSelfAlignmentData RenderGrid::justifySelfForChild(const RenderBox&amp; child) const

</span><span class="cx"> {

</span><del>-    return child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior);

</del><ins>+    return child.style().resolvedJustifySelf(&amp;style(), selfAlignmentNormalBehavior());

</ins><span class="cx"> }

</span><span class="cx"> 

<span class="cx"> // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.

</span><span class="lines">@@ -1335,7 +1331,7 @@

</span><span class="cx">     bool hasSameWritingMode = child.style().writingMode() == style().writingMode();

</span><span class="cx">     bool childIsLTR = child.style().isLeftToRightDirection();

</span><span class="cx"> 

</span><del>-    switch (child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).position()) {

</del><ins>+    switch (child.style().resolvedAlignSelf(&amp;style(), selfAlignmentNormalBehavior()).position()) {

</ins><span class="cx">     case ItemPositionSelfStart:

<span class="cx">         // FIXME: Should we implement this logic in a generic utility function ?

</span><span class="cx">         // Aligns the alignment subject to be flush with the edge of the alignment container

</span><span class="lines">@@ -1400,7 +1396,7 @@

</span><span class="cx">     bool hasSameDirection = child.style().direction() == style().direction();

</span><span class="cx">     bool gridIsLTR = style().isLeftToRightDirection();

</span><span class="cx"> 

</span><del>-    switch (child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).position()) {

</del><ins>+    switch (child.style().resolvedJustifySelf(&amp;style(), selfAlignmentNormalBehavior()).position()) {

</ins><span class="cx">     case ItemPositionSelfStart:

<span class="cx">         // FIXME: Should we implement this logic in a generic utility function ?

</span><span class="cx">         // Aligns the alignment subject to be flush with the edge of the alignment container

</span><span class="lines">@@ -1480,9 +1476,9 @@

</span><span class="cx">         // so we need to subtract them to get the actual end position for a given row

<span class="cx">         // (this does not have to be done for the last track as there are no more m_rowPositions after it).

</span><span class="cx">         if (childEndLine &lt; m_rowPositions.size() - 1)

</span><del>-            endOfRow -= gridGapForDirection(ForRows) + m_offsetBetweenRows;

</del><ins>+            endOfRow -= gridGapForDirection(ForRows, TrackSizing) + m_offsetBetweenRows;

</ins><span class="cx">         LayoutUnit columnAxisChildSize = isOrthogonalChild(child) ? child.logicalWidth() + child.marginLogicalWidth() : child.logicalHeight() + child.marginLogicalHeight();

</span><del>-        auto overflow = child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).overflow();

</del><ins>+        auto overflow = child.style().resolvedAlignSelf(&amp;style(), selfAlignmentNormalBehavior()).overflow();

</ins><span class="cx">         LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfRow - startOfRow, columnAxisChildSize);

</span><span class="cx">         return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);

</span><span class="cx">     }

</span><span class="lines">@@ -1492,7 +1488,6 @@

</span><span class="cx">     return 0;

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-

</del><span class="cx"> LayoutUnit RenderGrid::rowAxisOffsetForChild(const RenderBox&amp; child) const

</span><span class="cx"> {

</span><span class="cx">     const GridSpan&amp; columnsSpan = m_grid.gridItemSpan(child, ForColumns);

</span><span class="lines">@@ -1513,9 +1508,9 @@

</span><span class="cx">         // so we need to subtract them to get the actual end position for a given column

<span class="cx">         // (this does not have to be done for the last track as there are no more m_columnPositions after it).

</span><span class="cx">         if (childEndLine &lt; m_columnPositions.size() - 1)

</span><del>-            endOfColumn -= gridGapForDirection(ForColumns) + m_offsetBetweenColumns;

</del><ins>+            endOfColumn -= gridGapForDirection(ForColumns, TrackSizing) + m_offsetBetweenColumns;

</ins><span class="cx">         LayoutUnit rowAxisChildSize = isOrthogonalChild(child) ? child.logicalHeight() + child.marginLogicalHeight() : child.logicalWidth() + child.marginLogicalWidth();

</span><del>-        auto overflow = child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).overflow();

</del><ins>+        auto overflow = child.style().resolvedJustifySelf(&amp;style(), selfAlignmentNormalBehavior()).overflow();

</ins><span class="cx">         LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfColumn - startOfColumn, rowAxisChildSize);

</span><span class="cx">         return startPosition + (axisPosition == GridAxisEnd ? offsetFromStartPosition : offsetFromStartPosition / 2);

</span><span class="cx">     }

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderGridh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderGrid.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -62,7 +62,7 @@

</span><span class="cx"> 

<span class="cx">     // Required by GridTrackSizingAlgorithm. Keep them under control.

</span><span class="cx">     bool isOrthogonalChild(const RenderBox&amp;) const;

</span><del>-    LayoutUnit guttersSize(const Grid&amp;, GridTrackSizingDirection, unsigned startLine, unsigned span) const;

</del><ins>+    LayoutUnit guttersSize(const Grid&amp;, GridTrackSizingDirection, unsigned startLine, unsigned span, SizingOperation) const;

</ins><span class="cx"> private:

</span><span class="cx">     const char* renderName() const override;

</span><span class="cx">     bool isRenderGrid() const override { return true; }

</span><span class="lines">@@ -118,7 +118,6 @@

</span><span class="cx">     void applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection);

</span><span class="cx"> 

</span><span class="cx">     void paintChildren(PaintInfo&amp; forSelf, const LayoutPoint&amp; paintOffset, PaintInfo&amp; forChild, bool usePrintRect) override;

</span><del>-    bool needToStretchChildLogicalHeight(const RenderBox&amp;) const;

</del><span class="cx">     LayoutUnit marginLogicalHeightForChild(const RenderBox&amp;) const;

</span><span class="cx">     LayoutUnit computeMarginLogicalSizeForChild(GridTrackSizingDirection, const RenderBox&amp;) const;

</span><span class="cx">     LayoutUnit availableAlignmentSpaceForChildBeforeStretching(LayoutUnit gridAreaBreadthForChild, const RenderBox&amp;) const;

</span><span class="lines">@@ -140,7 +139,7 @@

</span><span class="cx">     std::optional&lt;int&gt; inlineBlockBaseline(LineDirectionMode) const final;

</span><span class="cx">     bool isInlineBaselineAlignedChild(const RenderBox&amp;) const;

</span><span class="cx"> 

</span><del>-    LayoutUnit gridGapForDirection(GridTrackSizingDirection) const;

</del><ins>+    LayoutUnit gridGapForDirection(GridTrackSizingDirection, SizingOperation) const;

</ins><span class="cx"> 

</span><span class="cx">     unsigned numTracks(GridTrackSizingDirection, const Grid&amp;) const;

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderLayercpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderLayer.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -86,6 +86,7 @@

</span><span class="cx"> #include &quot;OverlapTestRequestClient.h&quot;

</span><span class="cx"> #include &quot;Page.h&quot;

</span><span class="cx"> #include &quot;PlatformMouseEvent.h&quot;

</span><ins>+#include &quot;RenderFlexibleBox.h&quot;

</ins><span class="cx"> #include &quot;RenderFlowThread.h&quot;

</span><span class="cx"> #include &quot;RenderGeometryMap.h&quot;

</span><span class="cx"> #include &quot;RenderInline.h&quot;

</span><span class="lines">@@ -3520,6 +3521,10 @@

</span><span class="cx">                 m_inOverflowRelayout = false;

</span><span class="cx">             }

</span><span class="cx">         }

</span><ins>+        

+        RenderObject* parent = renderer().parent();

+        if (parent &amp;&amp; parent-&gt;isFlexibleBox() &amp;&amp; renderer().isBox())

+            downcast&lt;RenderFlexibleBox&gt;(parent)-&gt;clearCachedMainSizeForChild(*renderBox());

</ins><span class="cx">     }

</span><span class="cx"> 

<span class="cx">     // Set up the range (and page step/line step).

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderListBoxcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderListBox.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderListBox.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderListBox.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -260,7 +260,9 @@

</span><span class="cx"> 

</span><span class="cx"> RenderBox::LogicalExtentComputedValues RenderListBox::computeLogicalHeight(LayoutUnit, LayoutUnit logicalTop) const

</span><span class="cx"> {

</span><del>-    LayoutUnit height = itemHeight() * size() - rowSpacing + verticalBorderAndPaddingExtent();

</del><ins>+    LayoutUnit height = itemHeight() * size() - rowSpacing;

+    cacheIntrinsicContentLogicalHeightForFlexItem(height);

+    height += verticalBorderAndPaddingExtent();

</ins><span class="cx">     return RenderBox::computeLogicalHeight(height, logicalTop);

</span><span class="cx"> }

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderTablecpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderTable.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderTable.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderTable.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -593,7 +593,11 @@

</span><span class="cx">         else

</span><span class="cx">             repaintRectangle(LayoutRect(movedSectionLogicalTop, visualOverflowRect().y(), visualOverflowRect().maxX() - movedSectionLogicalTop, visualOverflowRect().height()));

</span><span class="cx">     }

</span><del>-

</del><ins>+    

+    // FIXME: This value isn't the intrinsic content logical height, but we need

+    // to update the value as its used by flexbox layout. crbug.com/367324

+    cacheIntrinsicContentLogicalHeightForFlexItem(contentLogicalHeight());

+    

</ins><span class="cx">     m_columnLogicalWidthChanged = false;

</span><span class="cx">     clearNeedsLayout();

</span><span class="cx"> }

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderTableCellcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderTableCell.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderTableCell.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderTableCell.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -276,6 +276,11 @@

</span><span class="cx">         layoutBlock(cellWidthChanged());

</span><span class="cx">     }

</span><span class="cx">     invalidateHasEmptyCollapsedBorders();

</span><ins>+    

+    // FIXME: This value isn't the intrinsic content logical height, but we need

+    // to update the value as its used by flexbox layout. crbug.com/367324

+    cacheIntrinsicContentLogicalHeightForFlexItem(contentLogicalHeight());

+

</ins><span class="cx">     setCellWidthChanged(false);

</span><span class="cx"> }

</span><span class="cx"> 

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderTableSectioncpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderTableSection.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderTableSection.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderTableSection.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -520,6 +520,72 @@

</span><span class="cx">     return extraLogicalHeight - remainingExtraLogicalHeight;

</span><span class="cx"> }

</span><span class="cx"> 

</span><ins>+static bool shouldFlexCellChild(const RenderTableCell&amp; cell, const RenderBox&amp; cellDescendant)

+{

+    if (!cell.style().logicalHeight().isSpecified())

+        return false;

+    if (cellDescendant.scrollsOverflowY())

+        return true;

+    return cellDescendant.shouldTreatChildAsReplacedInTableCells();

+}

+

+void RenderTableSection::relayoutCellIfFlexed(RenderTableCell&amp; cell, int rowIndex, int rowHeight)

+{

+    // Force percent height children to lay themselves out again.

+    // This will cause these children to grow to fill the cell.

+    // FIXME: There is still more work to do here to fully match WinIE (should

+    // it become necessary to do so). In quirks mode, WinIE behaves like we

+    // do, but it will clip the cells that spill out of the table section. In

+    // strict mode, Mozilla and WinIE both regrow the table to accommodate the

+    // new height of the cell (thus letting the percentages cause growth one

+    // time only). We may also not be handling row-spanning cells correctly.

+    //

+    // Note also the oddity where replaced elements always flex, and yet blocks/tables do

+    // not necessarily flex. WinIE is crazy and inconsistent, and we can't hope to

+    // match the behavior perfectly, but we'll continue to refine it as we discover new

+    // bugs. :)

+    bool cellChildrenFlex = false;

+    bool flexAllChildren = cell.style().logicalHeight().isFixed() || (!table()-&gt;style().logicalHeight().isAuto() &amp;&amp; rowHeight != cell.logicalHeight());

+    

+    for (auto&amp; renderer : childrenOfType&lt;RenderBox&gt;(cell)) {

+        if (renderer.style().logicalHeight().isPercentOrCalculated()

+            &amp;&amp; (flexAllChildren || shouldFlexCellChild(cell, renderer))

+            &amp;&amp; (!is&lt;RenderTable&gt;(renderer) || downcast&lt;RenderTable&gt;(renderer).hasSections())) {

+            cellChildrenFlex = true;

+            break;

+        }

+    }

+

+    if (!cellChildrenFlex) {

+        if (TrackedRendererListHashSet* percentHeightDescendants = cell.percentHeightDescendants()) {

+            for (auto* descendant : *percentHeightDescendants) {

+                if (flexAllChildren || shouldFlexCellChild(cell, *descendant)) {

+                    cellChildrenFlex = true;

+                    break;

+                }

+            }

+        }

+    }

+    

+    if (!cellChildrenFlex)

+        return;

+

+    cell.setChildNeedsLayout(MarkOnlyThis);

+        // Alignment within a cell is based off the calculated

+    // height, which becomes irrelevant once the cell has

+    // been resized based off its percentage.

+    cell.setOverrideLogicalContentHeightFromRowHeight(rowHeight);

+    cell.layoutIfNeeded();

+    

+    if (!cell.isBaselineAligned())

+        return;

+    

+    // If the baseline moved, we may have to update the data for our row. Find out the new baseline.

+    LayoutUnit baseline = cell.cellBaselinePosition();

+    if (baseline &gt; cell.borderAndPaddingBefore())

+        m_grid[rowIndex].baseline = std::max(m_grid[rowIndex].baseline, baseline);

+}

+

</ins><span class="cx"> void RenderTableSection::layoutRows()

</span><span class="cx"> {

</span><span class="cx"> #ifndef NDEBUG

</span><span class="lines">@@ -564,69 +630,8 @@

</span><span class="cx">             int rowIndex = cell-&gt;rowIndex();

</span><span class="cx">             LayoutUnit rHeight = m_rowPos[rowIndex + cell-&gt;rowSpan()] - m_rowPos[rowIndex] - vspacing;

</span><span class="cx"> 

<del>-            // Force percent height children to lay themselves out again.

-            // This will cause these children to grow to fill the cell.

-            // FIXME: There is still more work to do here to fully match WinIE (should

-            // it become necessary to do so).  In quirks mode, WinIE behaves like we

-            // do, but it will clip the cells that spill out of the table section.  In

-            // strict mode, Mozilla and WinIE both regrow the table to accommodate the

-            // new height of the cell (thus letting the percentages cause growth one

-            // time only).  We may also not be handling row-spanning cells correctly.

-            //

-            // Note also the oddity where replaced elements always flex, and yet blocks/tables do

-            // not necessarily flex.  WinIE is crazy and inconsistent, and we can't hope to

-            // match the behavior perfectly, but we'll continue to refine it as we discover new

-            // bugs. :)

-            bool cellChildrenFlex = false;

-            bool flexAllChildren = cell-&gt;style().logicalHeight().isFixed()

-                || (!table()-&gt;style().logicalHeight().isAuto() &amp;&amp; rHeight != cell-&gt;logicalHeight());

</del><ins>+            relayoutCellIfFlexed(*cell, r, rHeight);

</ins><span class="cx"> 

</span><del>-            for (auto&amp; renderer : childrenOfType&lt;RenderObject&gt;(*cell)) {

-                if (!is&lt;RenderText&gt;(renderer) &amp;&amp; renderer.style().logicalHeight().isPercentOrCalculated() &amp;&amp; (flexAllChildren || ((renderer.isReplaced() || (is&lt;RenderBox&gt;(renderer) &amp;&amp; downcast&lt;RenderBox&gt;(renderer).scrollsOverflow())) &amp;&amp; !is&lt;RenderTextControl&gt;(renderer)))) {

-                    // Tables with no sections do not flex.

-                    if (!is&lt;RenderTable&gt;(renderer) || downcast&lt;RenderTable&gt;(renderer).hasSections()) {

-                        renderer.setNeedsLayout(MarkOnlyThis);

-                        cellChildrenFlex = true;

-                    }

-                }

-            }

-

-            if (TrackedRendererListHashSet* percentHeightDescendants = cell-&gt;percentHeightDescendants()) {

-                TrackedRendererListHashSet::iterator end = percentHeightDescendants-&gt;end();

-                for (TrackedRendererListHashSet::iterator it = percentHeightDescendants-&gt;begin(); it != end; ++it) {

-                    RenderBox* box = *it;

-                    if (!box-&gt;isReplaced() &amp;&amp; !box-&gt;scrollsOverflow() &amp;&amp; !flexAllChildren)

-                        continue;

-

-                    while (box != cell) {

-                        if (box-&gt;normalChildNeedsLayout())

-                            break;

-                        box-&gt;setChildNeedsLayout(MarkOnlyThis);

-                        box = box-&gt;containingBlock();

-                        ASSERT(box);

-                        if (!box)

-                            break;

-                    }

-                    cellChildrenFlex = true;

-                }

-            }

-

-            if (cellChildrenFlex) {

-                cell-&gt;setChildNeedsLayout(MarkOnlyThis);

-                // Alignment within a cell is based off the calculated

-                // height, which becomes irrelevant once the cell has

-                // been resized based off its percentage.

-                cell-&gt;setOverrideLogicalContentHeightFromRowHeight(rHeight);

-                cell-&gt;layoutIfNeeded();

-

-                // If the baseline moved, we may have to update the data for our row. Find out the new baseline.

-                if (cell-&gt;isBaselineAligned()) {

-                    LayoutUnit baseline = cell-&gt;cellBaselinePosition();

-                    if (baseline &gt; cell-&gt;borderAndPaddingBefore())

-                        m_grid[r].baseline = std::max(m_grid[r].baseline, baseline);

-                }

-            }

-

</del><span class="cx">             cell-&gt;computeIntrinsicPadding(rHeight);

</span><span class="cx"> 

</span><span class="cx">             LayoutRect oldCellRect = cell-&gt;frameRect();

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderTableSectionh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderTableSection.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderTableSection.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderTableSection.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -184,6 +184,8 @@

</span><span class="cx"> 

</span><span class="cx">     void ensureRows(unsigned);

</span><span class="cx"> 

</span><ins>+    void relayoutCellIfFlexed(RenderTableCell&amp;, int rowIndex, int rowHeight);

+    

</ins><span class="cx">     void distributeExtraLogicalHeightToPercentRows(LayoutUnit&amp; extraLogicalHeight, int totalPercent);

</span><span class="cx">     void distributeExtraLogicalHeightToAutoRows(LayoutUnit&amp; extraLogicalHeight, unsigned autoRowsCount);

</span><span class="cx">     void distributeRemainingExtraLogicalHeight(LayoutUnit&amp; extraLogicalHeight);

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingRenderTextControlcpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderTextControl.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/RenderTextControl.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/RenderTextControl.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -101,12 +101,18 @@

</span><span class="cx">     ASSERT(innerText);

</span><span class="cx">     if (RenderBox* innerTextBox = innerText-&gt;renderBox()) {

</span><span class="cx">         LayoutUnit nonContentHeight = innerTextBox-&gt;verticalBorderAndPaddingExtent() + innerTextBox-&gt;verticalMarginExtent();

</span><del>-        logicalHeight = computeControlLogicalHeight(innerTextBox-&gt;lineHeight(true, HorizontalLine, PositionOfInteriorLineBoxes), nonContentHeight) + verticalBorderAndPaddingExtent();

</del><ins>+        logicalHeight = computeControlLogicalHeight(innerTextBox-&gt;lineHeight(true, HorizontalLine, PositionOfInteriorLineBoxes), nonContentHeight);

</ins><span class="cx"> 

<span class="cx">         // We are able to have a horizontal scrollbar if the overflow style is scroll, or if its auto and there's no word wrap.

</span><span class="cx">         if ((isHorizontalWritingMode() &amp;&amp; (style().overflowX() == OSCROLL ||  (style().overflowX() == OAUTO &amp;&amp; innerText-&gt;renderer()-&gt;style().overflowWrap() == NormalOverflowWrap)))

</span><span class="cx">             || (!isHorizontalWritingMode() &amp;&amp; (style().overflowY() == OSCROLL ||  (style().overflowY() == OAUTO &amp;&amp; innerText-&gt;renderer()-&gt;style().overflowWrap() == NormalOverflowWrap))))

</span><span class="cx">             logicalHeight += scrollbarThickness();

</span><ins>+        

+        // FIXME: The logical height of the inner text box should have been added

+        // before calling computeLogicalHeight to avoid this hack.

+        cacheIntrinsicContentLogicalHeightForFlexItem(logicalHeight);

+        

+        logicalHeight += verticalBorderAndPaddingExtent();

</ins><span class="cx">     }

</span><span class="cx"> 

</span><span class="cx">     return RenderBox::computeLogicalHeight(logicalHeight, logicalTop);

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingstyleRenderStylecpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -213,8 +213,7 @@

</span><span class="cx"> 

</span><span class="cx"> static StyleSelfAlignmentData resolvedSelfAlignment(const StyleSelfAlignmentData&amp; value, ItemPosition normalValueBehavior)

</span><span class="cx"> {

</span><del>-    ASSERT(value.position() != ItemPositionAuto);

-    if (value.position() == ItemPositionNormal)

</del><ins>+    if (value.position() == ItemPositionNormal || value.position() == ItemPositionAuto)

</ins><span class="cx">         return { normalValueBehavior, OverflowAlignmentDefault };

</span><span class="cx">     return value;

</span><span class="cx"> }

</span><span class="lines">@@ -224,13 +223,13 @@

</span><span class="cx">     return resolvedSelfAlignment(alignItems(), normalValueBehaviour);

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-StyleSelfAlignmentData RenderStyle::resolvedAlignSelf(const RenderStyle&amp; parentStyle, ItemPosition normalValueBehaviour) const

</del><ins>+StyleSelfAlignmentData RenderStyle::resolvedAlignSelf(const RenderStyle* parentStyle, ItemPosition normalValueBehaviour) const

</ins><span class="cx"> {

<span class="cx">     // The auto keyword computes to the parent's align-items computed value.

<span class="cx">     // We will return the behaviour of 'normal' value if needed, which is specific of each layout model.

</span><del>-    if (alignSelf().position() == ItemPositionAuto)

-        return parentStyle.resolvedAlignItems(normalValueBehaviour);

-    return resolvedSelfAlignment(alignSelf(), normalValueBehaviour);

</del><ins>+    if (!parentStyle || alignSelf().position() != ItemPositionAuto)

+        return resolvedSelfAlignment(alignSelf(), normalValueBehaviour);

+    return parentStyle-&gt;resolvedAlignItems(normalValueBehaviour);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> StyleSelfAlignmentData RenderStyle::resolvedJustifyItems(ItemPosition normalValueBehaviour) const

</span><span class="lines">@@ -243,13 +242,13 @@

</span><span class="cx">     return resolvedSelfAlignment(justifyItems(), normalValueBehaviour);

</span><span class="cx"> }

</span><span class="cx"> 

</span><del>-StyleSelfAlignmentData RenderStyle::resolvedJustifySelf(const RenderStyle&amp; parentStyle, ItemPosition normalValueBehaviour) const

</del><ins>+StyleSelfAlignmentData RenderStyle::resolvedJustifySelf(const RenderStyle* parentStyle, ItemPosition normalValueBehaviour) const

</ins><span class="cx"> {

<span class="cx">     // The auto keyword computes to the parent's justify-items computed value.

<span class="cx">     // We will return the behaviour of 'normal' value if needed, which is specific of each layout model.

</span><del>-    if (justifySelf().position() == ItemPositionAuto)

-        return parentStyle.resolvedJustifyItems(normalValueBehaviour);

-    return resolvedSelfAlignment(justifySelf(), normalValueBehaviour);

</del><ins>+    if (!parentStyle || justifySelf().position() != ItemPositionAuto)

+        return resolvedSelfAlignment(justifySelf(), normalValueBehaviour);

+    return parentStyle-&gt;resolvedJustifyItems(normalValueBehaviour);

</ins><span class="cx"> }

</span><span class="cx"> 

</span><span class="cx"> static inline ContentPosition resolvedContentAlignmentPosition(const StyleContentAlignmentData&amp; value, const StyleContentAlignmentData&amp; normalValueBehavior)

</span></span></pre></div>

<a id="trunkSourceWebCorerenderingstyleRenderStyleh"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.h        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/rendering/style/RenderStyle.h        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -164,9 +164,9 @@

</span><span class="cx">     ContentPosition resolvedAlignContentPosition(const StyleContentAlignmentData&amp; normalValueBehavior) const;

</span><span class="cx">     ContentDistributionType resolvedAlignContentDistribution(const StyleContentAlignmentData&amp; normalValueBehavior) const;

</span><span class="cx">     StyleSelfAlignmentData resolvedAlignItems(ItemPosition normalValueBehaviour) const;

</span><del>-    StyleSelfAlignmentData resolvedAlignSelf(const RenderStyle&amp; parentStyle, ItemPosition normalValueBehaviour) const;

</del><ins>+    StyleSelfAlignmentData resolvedAlignSelf(const RenderStyle* parentStyle, ItemPosition normalValueBehaviour) const;

</ins><span class="cx">     StyleSelfAlignmentData resolvedJustifyItems(ItemPosition normalValueBehaviour) const;

</span><del>-    StyleSelfAlignmentData resolvedJustifySelf(const RenderStyle&amp; parentStyle, ItemPosition normalValueBehaviour) const;

</del><ins>+    StyleSelfAlignmentData resolvedJustifySelf(const RenderStyle* parentStyle, ItemPosition normalValueBehaviour) const;

</ins><span class="cx"> 

</span><span class="cx">     PseudoId styleType() const { return m_nonInheritedFlags.styleType(); }

</span><span class="cx">     void setStyleType(PseudoId styleType) { m_nonInheritedFlags.setStyleType(styleType); }

</span></span></pre></div>

<a id="trunkSourceWebCorestyleRenderTreeUpdatercpp"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebCore/style/RenderTreeUpdater.cpp (213148 => 213149)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebCore/style/RenderTreeUpdater.cpp        2017-02-28 15:48:20 UTC (rev 213148)

+++ trunk/Source/WebCore/style/RenderTreeUpdater.cpp        2017-02-28 16:23:15 UTC (rev 213149)

</span><span class="lines">@@ -377,7 +377,7 @@

</span><span class="cx">     if (!textNode.containsOnlyWhitespace())

</span><span class="cx">         return true;

<span class="cx">     // This text node has nothing but white space. We may still need a renderer in some cases.

</span><del>-    if (parentRenderer.isTable() || parentRenderer.isTableRow() || parentRenderer.isTableSection() || parentRenderer.isRenderTableCol() || parentRenderer.isFrameSet())

</del><ins>+    if (parentRenderer.isTable() || parentRenderer.isTableRow() || parentRenderer.isTableSection() || parentRenderer.isRenderTableCol() || parentRenderer.isFrameSet() || (parentRenderer.isFlexibleBox() &amp;&amp; !parentRenderer.isRenderButton()))

</ins><span class="cx">         return false;

<span class="cx">     if (parentRenderer.style().preserveNewline()) // pre/pre-wrap/pre-line always make renderers.

</span><span class="cx">         return true;

</span></span></pre>

</div>

</div>

</body>

</html>