diff options
Diffstat (limited to 'layout')
29 files changed, 122 insertions, 2620 deletions
diff --git a/layout/generic/ReflowInput.cpp b/layout/generic/ReflowInput.cpp index 994e2cfbb6..1af7e798ef 100644 --- a/layout/generic/ReflowInput.cpp +++ b/layout/generic/ReflowInput.cpp @@ -225,7 +225,7 @@ ReflowInput::ReflowInput( CheckNextInFlowParenthood(aFrame, aParentReflowInput.mFrame); mFlags.mAssumingHScrollbar = mFlags.mAssumingVScrollbar = false; mFlags.mIsColumnBalancing = false; - mFlags.mIsFlexContainerMeasuringBSize = false; + mFlags.mIsFlexContainerMeasuringHeight = false; mFlags.mDummyParentReflowInput = false; mFlags.mShrinkWrap = !!(aFlags & COMPUTE_SIZE_SHRINK_WRAP); mFlags.mUseAutoBSize = !!(aFlags & COMPUTE_SIZE_USE_AUTO_BSIZE); @@ -2403,15 +2403,15 @@ ReflowInput::InitConstraints(nsPresContext* aPresContext, ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eShrinkWrap); // If we're inside of a flex container that needs to measure our - // auto BSize, pass that information along to ComputeSize(). - if (mFlags.mIsFlexContainerMeasuringBSize) { + // auto height, pass that information along to ComputeSize(). + if (mFlags.mIsFlexContainerMeasuringHeight) { computeSizeFlags = ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eUseAutoBSize); } } else { - MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringBSize, + MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringHeight, "We're not in a flex container, so the flag " - "'mIsFlexContainerMeasuringBSize' shouldn't be set"); + "'mIsFlexContainerMeasuringHeight' shouldn't be set"); } } @@ -2993,7 +2993,7 @@ ReflowInput::ComputeMinMaxValues(const LogicalSize&aCBSize) minBSize.HasPercent()) || (mFrameType == NS_CSS_FRAME_TYPE_INTERNAL_TABLE && minBSize.IsCalcUnit() && minBSize.CalcHasPercent()) || - mFlags.mIsFlexContainerMeasuringBSize) { + mFlags.mIsFlexContainerMeasuringHeight) { ComputedMinBSize() = 0; } else { ComputedMinBSize() = ComputeBSizeValue(aCBSize.BSize(wm), @@ -3015,7 +3015,7 @@ ReflowInput::ComputeMinMaxValues(const LogicalSize&aCBSize) maxBSize.HasPercent()) || (mFrameType == NS_CSS_FRAME_TYPE_INTERNAL_TABLE && maxBSize.IsCalcUnit() && maxBSize.CalcHasPercent()) || - mFlags.mIsFlexContainerMeasuringBSize) { + mFlags.mIsFlexContainerMeasuringHeight) { ComputedMaxBSize() = NS_UNCONSTRAINEDSIZE; } else { ComputedMaxBSize() = ComputeBSizeValue(aCBSize.BSize(wm), diff --git a/layout/generic/ReflowInput.h b/layout/generic/ReflowInput.h index e84d386a82..a70549d8eb 100644 --- a/layout/generic/ReflowInput.h +++ b/layout/generic/ReflowInput.h @@ -203,9 +203,9 @@ public: uint32_t mHeightDependsOnAncestorCell:1; // Does frame height depend on // an ancestor table-cell? uint32_t mIsColumnBalancing:1; // nsColumnSetFrame is balancing columns - uint32_t mIsFlexContainerMeasuringBSize:1; // nsFlexContainerFrame is - // reflowing this child to - // measure its intrinsic BSize. + uint32_t mIsFlexContainerMeasuringHeight:1; // nsFlexContainerFrame is + // reflowing this child to + // measure its intrinsic height. uint32_t mDummyParentReflowInput:1; // a "fake" reflow state made // in order to be the parent // of a real one diff --git a/layout/generic/nsFlexContainerFrame.cpp b/layout/generic/nsFlexContainerFrame.cpp index b4907a4862..18a0643f14 100644 --- a/layout/generic/nsFlexContainerFrame.cpp +++ b/layout/generic/nsFlexContainerFrame.cpp @@ -511,15 +511,6 @@ public: // visibility:collapse. bool IsStrut() const { return mIsStrut; } - // Returns true if this item's inline axis is parallel (or antiparallel) - // to the container's main axis. Otherwise (i.e. if this item's inline axis - // is orthogonal to the container's main axis), this function returns false. - bool IsInlineAxisMainAxis() const { return mIsInlineAxisMainAxis; } - - // Same as above, but for cross axis. Equivalent to !IsInlineAxisMainAxis(). - // This just exists for convenience/readability at callsites. - bool IsInlineAxisCrossAxis() const { return !mIsInlineAxisMainAxis; } - WritingMode GetWritingMode() const { return mWM; } uint8_t GetAlignSelf() const { return mAlignSelf; } @@ -758,8 +749,10 @@ protected: void CheckForMinSizeAuto(const ReflowInput& aFlexItemReflowInput, const FlexboxAxisTracker& aAxisTracker); - // Values that we already know in constructor (and are hence mostly 'const'): - nsIFrame* const mFrame; // The flex item's frame. + // Our frame: + nsIFrame* const mFrame; + + // Values that we already know in constructor: (and are hence mostly 'const') const float mFlexGrow; const float mFlexShrink; @@ -792,7 +785,6 @@ protected: // until after main-size has been resolved. In particular, these could share // memory with mMainPosn through mAscent, and mIsStretched. float mShareOfWeightSoFar; - const WritingMode mWM; // The flex item's writing mode. bool mIsFrozen; bool mHadMinViolation; bool mHadMaxViolation; @@ -803,11 +795,11 @@ protected: bool mIsStretched; // See IsStretched() documentation bool mIsStrut; // Is this item a "strut" left behind by an element // with visibility:collapse? - const bool mIsInlineAxisMainAxis; // See IsInlineAxisMainAxis() documentation // Does this item need to resolve a min-[width|height]:auto (in main-axis). bool mNeedsMinSizeAutoResolution; + const WritingMode mWM; // The flex item's writing mode. uint8_t mAlignSelf; // My "align-self" computed value (with "auto" // swapped out for parent"s "align-items" value, // in our constructor). @@ -1500,26 +1492,21 @@ nsFlexContainerFrame::GenerateFlexItemForChild( // Static helper-functions for ResolveAutoFlexBasisAndMinSize(): // ------------------------------------------------------------- -// Indicates whether the cross-size property is set to something definite, -// for the purpose of intrinsic ratio calculations. -// The logic here should be similar to the logic for isAutoISize/isAutoBSize +// Indicates whether the cross-size property is set to something definite. +// The logic here should be similar to the logic for isAutoWidth/isAutoHeight // in nsFrame::ComputeSizeWithIntrinsicDimensions(). static bool IsCrossSizeDefinite(const ReflowInput& aItemReflowInput, const FlexboxAxisTracker& aAxisTracker) { const nsStylePosition* pos = aItemReflowInput.mStylePosition; - const WritingMode containerWM = aAxisTracker.GetWritingMode(); - - if (aAxisTracker.IsColumnOriented()) { - // Column-oriented means cross axis is container's inline axis. - return pos->ISize(containerWM).GetUnit() != eStyleUnit_Auto; - } - // Else, we're row-oriented, which means cross axis is container's block - // axis. We need to use IsAutoBSize() to catch e.g. %-BSize applied to - // indefinite container BSize, which counts as auto. - nscoord cbBSize = aItemReflowInput.mCBReflowInput->ComputedBSize(); - return !nsLayoutUtils::IsAutoBSize(pos->BSize(containerWM), cbBSize); + if (aAxisTracker.IsCrossAxisHorizontal()) { + return pos->mWidth.GetUnit() != eStyleUnit_Auto; + } + // else, vertical. (We need to use IsAutoHeight() to catch e.g. %-height + // applied to indefinite-height containing block, which counts as auto.) + nscoord cbHeight = aItemReflowInput.mCBReflowInput->ComputedHeight(); + return !nsLayoutUtils::IsAutoHeight(pos->mHeight, cbHeight); } // If aFlexItem has a definite cross size, this function returns it, for usage @@ -1689,10 +1676,9 @@ nsFlexContainerFrame:: const ReflowInput& aItemReflowInput, const FlexboxAxisTracker& aAxisTracker) { - // (Note: We can guarantee that the flex-basis will have already been - // resolved if the main axis is the same is the same as the item's inline - // axis. Inline-axis values should always be resolvable without reflow.) - const bool isMainSizeAuto = (!aFlexItem.IsInlineAxisMainAxis() && + // (Note: We should never have a used flex-basis of "auto" if our main axis + // is horizontal; width values should always be resolvable without reflow.) + const bool isMainSizeAuto = (!aAxisTracker.IsMainAxisHorizontal() && NS_AUTOHEIGHT == aFlexItem.GetFlexBaseSize()); const bool isMainMinSizeAuto = aFlexItem.NeedsMinSizeAutoResolution(); @@ -1723,14 +1709,10 @@ nsFlexContainerFrame:: flexContainerRI->ComputedISize(), flexContainerRI->ComputedBSize()); // Is container's cross size "definite"? - // - If it's column-oriented, then "yes", because its cross size is its - // inline-size which is always definite from its descendants' perspective. - // - Otherwise (if it's row-oriented), then we check the actual size - // and call it definite if it's not NS_AUTOHEIGHT. - if (aAxisTracker.IsColumnOriented() || + // (Container's cross size is definite if cross-axis is horizontal, or if + // cross-axis is vertical and the cross-size is not NS_AUTOHEIGHT.) + if (aAxisTracker.IsCrossAxisHorizontal() || containerCrossSize != NS_AUTOHEIGHT) { - // Container's cross size is "definite", so we can resolve the item's - // stretched cross size using that. aFlexItem.ResolveStretchedCrossSize(containerCrossSize, aAxisTracker); } } @@ -1762,7 +1744,7 @@ nsFlexContainerFrame:: // Measure content, if needed (w/ intrinsic-width method or a reflow) if (minSizeNeedsToMeasureContent || flexBasisNeedsToMeasureContent) { - if (aFlexItem.IsInlineAxisMainAxis()) { + if (aAxisTracker.IsMainAxisHorizontal()) { if (minSizeNeedsToMeasureContent) { nscoord frameMinISize = aFlexItem.Frame()->GetMinISize(aItemReflowInput.mRenderingContext); @@ -1773,32 +1755,30 @@ nsFlexContainerFrame:: "reflow state, for horizontal flexbox. It shouldn't need " "special handling here"); } else { - // If this item is flexible (in its block axis)... - // OR if we're measuring its 'auto' min-BSize, with its main-size (in its - // block axis) being something non-"auto"... - // THEN: we assume that the computed BSize that we're reflowing with now - // could be different from the one we'll use for this flex item's - // "actual" reflow later on. In that case, we need to be sure the flex - // item treats this as a block-axis resize (regardless of whether there - // are actually any ancestors being resized in that axis). - // (Note: We don't have to do this for the inline axis, because - // InitResizeFlags will always turn on mIsIResize on when it sees that - // the computed ISize is different from current ISize, and that's all we - // need.) - bool forceBResizeForMeasuringReflow = + // If this item is flexible (vertically), or if we're measuring the + // 'auto' min-height and our main-size is something else, then we assume + // that the computed-height we're reflowing with now could be different + // from the one we'll use for this flex item's "actual" reflow later on. + // In that case, we need to be sure the flex item treats this as a + // vertical resize, even though none of its ancestors are necessarily + // being vertically resized. + // (Note: We don't have to do this for width, because InitResizeFlags + // will always turn on mHResize on when it sees that the computed width + // is different from current width, and that's all we need.) + bool forceVerticalResizeForMeasuringReflow = !aFlexItem.IsFrozen() || // Is the item flexible? !flexBasisNeedsToMeasureContent; // Are we *only* measuring it for - // 'min-block-size:auto'? + // 'min-height:auto'? - nscoord contentBSize = - MeasureFlexItemContentBSize(aPresContext, aFlexItem, - forceBResizeForMeasuringReflow, - *flexContainerRI); + nscoord contentHeight = + MeasureFlexItemContentHeight(aPresContext, aFlexItem, + forceVerticalResizeForMeasuringReflow, + *flexContainerRI); if (minSizeNeedsToMeasureContent) { - resolvedMinSize = std::min(resolvedMinSize, contentBSize); + resolvedMinSize = std::min(resolvedMinSize, contentHeight); } if (flexBasisNeedsToMeasureContent) { - aFlexItem.SetFlexBaseSizeAndMainSize(contentBSize); + aFlexItem.SetFlexBaseSizeAndMainSize(contentHeight); } } } @@ -1820,7 +1800,7 @@ nsFlexContainerFrame:: * intrinsic size is marked as dirty (due to a style or DOM change). * * In particular the computed height may change between measuring reflows due to - * how the mIsFlexContainerMeasuringBSize flag affects size computation (see + * how the mIsFlexContainerMeasuringReflow flag affects size computation (see * bug 1336708). * * Caching it prevents us from doing exponential reflows in cases of deeply @@ -1832,27 +1812,27 @@ class nsFlexContainerFrame::CachedMeasuringReflowResult { // Members that are part of the cache key: const LogicalSize mAvailableSize; - const nscoord mComputedBSize; + const nscoord mComputedHeight; // Members that are part of the cache value: - const nscoord mBSize; + const nscoord mHeight; const nscoord mAscent; public: CachedMeasuringReflowResult(const ReflowInput& aReflowInput, const ReflowOutput& aDesiredSize) : mAvailableSize(aReflowInput.AvailableSize()) - , mComputedBSize(aReflowInput.ComputedBSize()) - , mBSize(aDesiredSize.BSize(aReflowInput.GetWritingMode())) + , mComputedHeight(aReflowInput.ComputedHeight()) + , mHeight(aDesiredSize.Height()) , mAscent(aDesiredSize.BlockStartAscent()) {} bool IsValidFor(const ReflowInput& aReflowInput) const { return mAvailableSize == aReflowInput.AvailableSize() && - mComputedBSize == aReflowInput.ComputedBSize(); + mComputedHeight == aReflowInput.ComputedHeight(); } - nscoord BSize() const { return mBSize; } + nscoord Height() const { return mHeight; } nscoord Ascent() const { return mAscent; } }; @@ -1861,7 +1841,7 @@ NS_DECLARE_FRAME_PROPERTY_DELETABLE(CachedFlexMeasuringReflow, CachedMeasuringReflowResult); const CachedMeasuringReflowResult& -nsFlexContainerFrame::MeasureAscentAndBSizeForFlexItem( +nsFlexContainerFrame::MeasureAscentAndHeightForFlexItem( FlexItem& aItem, nsPresContext* aPresContext, ReflowInput& aChildReflowInput) @@ -1912,44 +1892,43 @@ nsFlexContainerFrame::MarkIntrinsicISizesDirty() nscoord nsFlexContainerFrame:: - MeasureFlexItemContentBSize(nsPresContext* aPresContext, - FlexItem& aFlexItem, - bool aForceBResizeForMeasuringReflow, - const ReflowInput& aParentReflowInput) + MeasureFlexItemContentHeight(nsPresContext* aPresContext, + FlexItem& aFlexItem, + bool aForceVerticalResizeForMeasuringReflow, + const ReflowInput& aParentReflowInput) { // Set up a reflow state for measuring the flex item's auto-height: WritingMode wm = aFlexItem.Frame()->GetWritingMode(); LogicalSize availSize = aParentReflowInput.ComputedSize(wm); availSize.BSize(wm) = NS_UNCONSTRAINEDSIZE; ReflowInput - childRIForMeasuringBSize(aPresContext, aParentReflowInput, - aFlexItem.Frame(), availSize, - nullptr, ReflowInput::CALLER_WILL_INIT); - childRIForMeasuringBSize.mFlags.mIsFlexContainerMeasuringBSize = true; - childRIForMeasuringBSize.Init(aPresContext); + childRIForMeasuringHeight(aPresContext, aParentReflowInput, + aFlexItem.Frame(), availSize, + nullptr, ReflowInput::CALLER_WILL_INIT); + childRIForMeasuringHeight.mFlags.mIsFlexContainerMeasuringHeight = true; + childRIForMeasuringHeight.Init(aPresContext); if (aFlexItem.IsStretched()) { - childRIForMeasuringBSize.SetComputedISize(aFlexItem.GetCrossSize()); - childRIForMeasuringBSize.SetIResize(true); + childRIForMeasuringHeight.SetComputedWidth(aFlexItem.GetCrossSize()); + childRIForMeasuringHeight.SetHResize(true); } - if (aForceBResizeForMeasuringReflow) { - childRIForMeasuringBSize.SetBResize(true); + if (aForceVerticalResizeForMeasuringReflow) { + childRIForMeasuringHeight.SetVResize(true); } const CachedMeasuringReflowResult& reflowResult = - MeasureAscentAndBSizeForFlexItem(aFlexItem, aPresContext, - childRIForMeasuringBSize); + MeasureAscentAndHeightForFlexItem(aFlexItem, aPresContext, + childRIForMeasuringHeight); aFlexItem.SetAscent(reflowResult.Ascent()); + // Subtract border/padding in vertical axis, to get _just_ + // the effective computed value of the "height" property. + nscoord childDesiredHeight = reflowResult.Height() - + childRIForMeasuringHeight.ComputedPhysicalBorderPadding().TopBottom(); - // Subtract border/padding in block axis, to get _just_ - // the effective computed value of the BSize property. - nscoord childDesiredBSize = reflowResult.BSize() - - childRIForMeasuringBSize.ComputedLogicalBorderPadding().BStartEnd(wm); - - return std::max(0, childDesiredBSize); + return std::max(0, childDesiredHeight); } FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput, @@ -1973,16 +1952,14 @@ FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput, mCrossPosn(0), mAscent(0), mShareOfWeightSoFar(0.0f), - mWM(aFlexItemReflowInput.GetWritingMode()), mIsFrozen(false), mHadMinViolation(false), mHadMaxViolation(false), mHadMeasuringReflow(false), mIsStretched(false), mIsStrut(false), - mIsInlineAxisMainAxis(aAxisTracker.IsRowOriented() != - aAxisTracker.GetWritingMode().IsOrthogonalTo(mWM)) // mNeedsMinSizeAutoResolution is initialized in CheckForMinSizeAuto() + mWM(aFlexItemReflowInput.GetWritingMode()) // mAlignSelf, see below { MOZ_ASSERT(mFrame, "expecting a non-null child frame"); @@ -1990,10 +1967,6 @@ FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput, "placeholder frames should not be treated as flex items"); MOZ_ASSERT(!(mFrame->GetStateBits() & NS_FRAME_OUT_OF_FLOW), "out-of-flow frames should not be treated as flex items"); - MOZ_ASSERT(mIsInlineAxisMainAxis == - nsFlexContainerFrame::IsItemInlineAxisMainAxis(mFrame), - "public API should be consistent with internal state (about " - "whether flex item's inline axis is flex container's main axis)"); const ReflowInput* containerRS = aFlexItemReflowInput.mParentReflowInput; if (IsLegacyBox(containerRS->mFrame)) { @@ -2074,17 +2047,14 @@ FlexItem::FlexItem(nsIFrame* aChildFrame, nscoord aCrossSize, mCrossPosn(0), mAscent(0), mShareOfWeightSoFar(0.0f), - // Struts don't do layout, so its WM doesn't matter at this point. So, we - // just share container's WM for simplicity: - mWM(aContainerWM), mIsFrozen(true), mHadMinViolation(false), mHadMaxViolation(false), mHadMeasuringReflow(false), mIsStretched(false), mIsStrut(true), // (this is the constructor for making struts, after all) - mIsInlineAxisMainAxis(true), // (doesn't matter b/c we're not doing layout) mNeedsMinSizeAutoResolution(false), + mWM(aContainerWM), mAlignSelf(NS_STYLE_ALIGN_FLEX_START) { MOZ_ASSERT(mFrame, "expecting a non-null child frame"); @@ -2201,28 +2171,15 @@ FlexItem::CanMainSizeInfluenceCrossSize( return true; } - if (IsInlineAxisCrossAxis()) { - // If we get here, this function is really asking: "can changes to this - // item's block size have an influence on its inline size"? For blocks and - // tables, the answer is "no". - if (mFrame->GetType() == nsGkAtoms::blockFrame || - mFrame->GetType() == nsGkAtoms::tableWrapperFrame) { - // XXXdholbert (Maybe use an IsFrameOfType query or something more - // general to test this across all frame types? For now, I'm just - // optimizing for block and table, since those are common containers that - // can contain arbitrarily-large subtrees (and that reliably have ISize - // being unaffected by BSize, per CSS2). So optimizing away needless - // relayout is possible & especially valuable for these containers.) - return false; - } - // Other opt-outs can go here, as they're identified as being useful - // (particularly for containers where an extra reflow is expensive). But in - // general, we have to assume that a flexed BSize *could* influence the - // ISize. Some examples where this can definitely happen: - // * Intrinsically-sized multicol with fixed-ISize columns, which adds - // columns (i.e. grows in inline axis) depending on its block size. - // * Intrinsically-sized multi-line column-oriented flex container, which - // adds flex lines (i.e. grows in inline axis) depending on its block size. + if (aAxisTracker.IsCrossAxisHorizontal()) { + // If the cross axis is horizontal, then changes to the item's main size + // (height) can't influence its cross size (width), if the item is a block + // with a horizontal writing-mode. + // XXXdholbert This doesn't account for vertical writing-modes, items with + // aspect ratios, items that are multicol elements, & items that are + // multi-line vertical flex containers. In all of those cases, a change to + // the height could influence the width. + return false; } // Default assumption, if we haven't proven otherwise: the resolved main size @@ -4126,10 +4083,19 @@ nsFlexContainerFrame::SizeItemInCrossAxis( ReflowInput& aChildReflowInput, FlexItem& aItem) { - // If cross axis is the item's inline axis, just use ISize from reflow state, - // and don't bother with a full reflow. - if (aItem.IsInlineAxisCrossAxis()) { - aItem.SetCrossSize(aChildReflowInput.ComputedISize()); + if (aAxisTracker.IsCrossAxisHorizontal()) { + MOZ_ASSERT(aItem.HasIntrinsicRatio(), + "For now, caller's CanMainSizeInfluenceCrossSize check should " + "only allow us to get here for items with intrinsic ratio"); + // XXXdholbert When we finish support for vertical writing-modes, + // (in bug 1079155 or a dependency), we'll relax the horizontal check in + // CanMainSizeInfluenceCrossSize, and this function will need to be able + // to measure the baseline & width (given our resolved height) + // of vertical-writing-mode flex items here. + // For now, we only expect to get here for items with an intrinsic aspect + // ratio; and for those items, we can just read the size off of the reflow + // state, without performing reflow. + aItem.SetCrossSize(aChildReflowInput.ComputedWidth()); return; } @@ -4138,18 +4104,16 @@ nsFlexContainerFrame::SizeItemInCrossAxis( if (aItem.GetAlignSelf() == NS_STYLE_ALIGN_STRETCH) { // This item's got "align-self: stretch", so we probably imposed a - // stretched computed cross-size on it during its previous - // reflow. We're not imposing that BSize for *this* "measuring" reflow, so - // we need to tell it to treat this reflow as a resize in its block axis - // (regardless of whether any of its ancestors are actually being resized). - // (Note: we know that the cross axis is the item's *block* axis -- if it - // weren't, then we would've taken the early-return above.) - aChildReflowInput.SetBResize(true); + // stretched computed height on it during its previous reflow. We're + // not imposing that height for *this* measuring reflow, so we need to + // tell it to treat this reflow as a vertical resize (regardless of + // whether any of its ancestors are being resized). + aChildReflowInput.SetVResize(true); } // Potentially reflow the item, and get the sizing info. const CachedMeasuringReflowResult& reflowResult = - MeasureAscentAndBSizeForFlexItem(aItem, aPresContext, aChildReflowInput); + MeasureAscentAndHeightForFlexItem(aItem, aPresContext, aChildReflowInput); // Save the sizing info that we learned from this reflow // ----------------------------------------------------- @@ -4161,7 +4125,7 @@ nsFlexContainerFrame::SizeItemInCrossAxis( // so we don't bother with making aAxisTracker pick the cross-axis component // for us.) nscoord crossAxisBorderPadding = aItem.GetBorderPadding().TopBottom(); - if (reflowResult.BSize() < crossAxisBorderPadding) { + if (reflowResult.Height() < crossAxisBorderPadding) { // Child's requested size isn't large enough for its border/padding! // This is OK for the trivial nsFrame::Reflow() impl, but other frame // classes should know better. So, if we get here, the child had better be @@ -4174,7 +4138,7 @@ nsFlexContainerFrame::SizeItemInCrossAxis( aItem.SetCrossSize(0); } else { // (normal case) - aItem.SetCrossSize(reflowResult.BSize() - crossAxisBorderPadding); + aItem.SetCrossSize(reflowResult.Height() - crossAxisBorderPadding); } aItem.SetAscent(reflowResult.Ascent()); @@ -4425,41 +4389,6 @@ nsFlexContainerFrame::CalculatePackingSpace(uint32_t aNumThingsToPack, *aPackingSpaceRemaining -= totalEdgePackingSpace; } -/* static */ -bool -nsFlexContainerFrame::IsItemInlineAxisMainAxis(nsIFrame* aFrame) -{ - MOZ_ASSERT(aFrame && aFrame->IsFlexItem(), "expecting arg to be a flex item"); - const WritingMode flexItemWM = aFrame->GetWritingMode(); - const nsIFrame* flexContainer = aFrame->GetParent(); - - if (IsLegacyBox(flexContainer)) { - // For legacy boxes, the main axis is determined by "box-orient", and we can - // just directly check if that's vertical, and compare that to whether the - // item's WM is also vertical: - bool boxOrientIsVertical = - (flexContainer->StyleXUL()->mBoxOrient == StyleBoxOrient::Vertical); - return flexItemWM.IsVertical() == boxOrientIsVertical; - } - - // For modern CSS flexbox, we get our return value by asking two questions - // and comparing their answers. - // Question 1: does aFrame have the same inline axis as its flex container? - bool itemInlineAxisIsParallelToParent = - !flexItemWM.IsOrthogonalTo(flexContainer->GetWritingMode()); - - // Question 2: is aFrame's flex container row-oriented? (This tells us - // whether the flex container's main axis is its inline axis.) - auto flexDirection = flexContainer->StylePosition()->mFlexDirection; - bool flexContainerIsRowOriented = - flexDirection == NS_STYLE_FLEX_DIRECTION_ROW || - flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE; - - // aFrame's inline axis is its flex container's main axis IFF the above - // questions have the same answer. - return flexContainerIsRowOriented == itemInlineAxisIsParallelToParent; -} - void nsFlexContainerFrame::DoFlexLayout(nsPresContext* aPresContext, ReflowOutput& aDesiredSize, diff --git a/layout/generic/nsFlexContainerFrame.h b/layout/generic/nsFlexContainerFrame.h index e349709876..39de79b577 100644 --- a/layout/generic/nsFlexContainerFrame.h +++ b/layout/generic/nsFlexContainerFrame.h @@ -133,21 +133,6 @@ public: uint32_t* aNumPackingSpacesRemaining, nscoord* aPackingSpaceRemaining); - /** - * Given a frame for a flex item, this method returns true IFF that flex - * item's inline axis is the same as (i.e. not orthogonal to) its flex - * container's main axis. - * - * (This method is only intended to be used from external - * callers. Inside of flex reflow code, FlexItem::IsInlineAxisMainAxis() is - * equivalent & more optimal.) - * - * @param aFrame a flex item (must return true from IsFlexItem) - * @return true iff aFrame's inline axis is the same as (i.e. not orthogonal - * to) its flex container's main axis. Otherwise, false. - */ - static bool IsItemInlineAxisMainAxis(nsIFrame* aFrame); - protected: // Protected constructor & destructor explicit nsFlexContainerFrame(nsStyleContext* aContext) @@ -222,20 +207,20 @@ protected: * This avoids exponential reflows, see the comment on * CachedMeasuringReflowResult. */ - const CachedMeasuringReflowResult& MeasureAscentAndBSizeForFlexItem( + const CachedMeasuringReflowResult& MeasureAscentAndHeightForFlexItem( FlexItem& aItem, nsPresContext* aPresContext, ReflowInput& aChildReflowInput); /** - * This method performs a "measuring" reflow to get the content BSize of - * aFlexItem.Frame() (treating it as if it had a computed BSize of "auto"), - * and returns the resulting BSize measurement. + * This method performs a "measuring" reflow to get the content height of + * aFlexItem.Frame() (treating it as if it had auto-height), & returns the + * resulting height. * (Helper for ResolveAutoFlexBasisAndMinSize().) */ - nscoord MeasureFlexItemContentBSize(nsPresContext* aPresContext, + nscoord MeasureFlexItemContentHeight(nsPresContext* aPresContext, FlexItem& aFlexItem, - bool aForceBSizeForMeasuringReflow, + bool aForceVerticalResizeForMeasuringReflow, const ReflowInput& aParentReflowInput); /** diff --git a/layout/generic/nsFrame.cpp b/layout/generic/nsFrame.cpp index 9bc4941e0b..43ad970890 100644 --- a/layout/generic/nsFrame.cpp +++ b/layout/generic/nsFrame.cpp @@ -39,7 +39,6 @@ #include "mozilla/Logging.h" #include "mozilla/Sprintf.h" #include "nsFrameManager.h" -#include "nsFlexContainerFrame.h" #include "nsLayoutUtils.h" #include "LayoutLogging.h" #include "mozilla/RestyleManager.h" @@ -4753,11 +4752,12 @@ nsFrame::ComputeSize(nsRenderingContext* aRenderingContext, } bool isFlexItem = (parentFrameType == nsGkAtoms::flexContainerFrame && !(GetStateBits() & NS_FRAME_OUT_OF_FLOW)); - bool isInlineFlexItem = false; if (isFlexItem) { + uint32_t flexDirection = GetParent()->StylePosition()->mFlexDirection; isInlineFlexItem = - nsFlexContainerFrame::IsItemInlineAxisMainAxis(this); + flexDirection == NS_STYLE_FLEX_DIRECTION_ROW || + flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE; const nsStyleCoord* flexBasis = &(stylePos->mFlexBasis); SetCoordToFlexBasis(isInlineFlexItem, false, flexBasis, @@ -4973,8 +4973,11 @@ nsFrame::ComputeSizeWithIntrinsicDimensions(nsRenderingContext* aRenderingConte // from our style struct. (Otherwise, we'll be using an irrelevant value in // the aspect-ratio calculations below.) if (isFlexItem) { + uint32_t flexDirection = + GetParent()->StylePosition()->mFlexDirection; isInlineFlexItem = - nsFlexContainerFrame::IsItemInlineAxisMainAxis(this); + flexDirection == NS_STYLE_FLEX_DIRECTION_ROW || + flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE; // If FlexItemMainSizeOverride frame-property is set, then that means the // flex container is imposing a main-size on this flex item for it to use diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml deleted file mode 100644 index f1dfdfdb86..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml +++ /dev/null @@ -1,73 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<!-- Testcase with blocks as flex items in a horizontal flex container, with - various "flex" values and various combinations of the items - and with various writing-modes on the items. --> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title> - CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container - (with various writing-modes on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> - <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> - <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/> - <style> - div { height: 100px; } - div.flexbox { - border: 1px dashed blue; - width: 200px; - font-size: 10px; - display: flex; - } - div.a { - flex: 1 0 30px; - background: lightgreen; - writing-mode: vertical-lr; - } - div.b { - flex: 2 0 20px; - background: yellow; - writing-mode: vertical-rl; - } - div.c { - flex: 3 0 40px; - background: orange; - writing-mode: sideways-lr; - } - div.flexNone { - flex: none; - background: pink; - writing-mode: vertical-lr; - } - div.flexBasis { - flex: 0 0 20px; - background: gray; - writing-mode: sideways-rl; - } - div.spacer { - width: 15px; - height: 15px; - background: purple; - } - </style> - </head> - <body> - <div class="flexbox"><div class="a"></div><div class="b"/></div> - <div class="flexbox"><div class="a"/><div class="c"/></div> - <div class="flexbox"><div class="a"/> - <div class="flexNone"><div class="spacer"/></div> - </div> - <div class="flexbox"><div class="b"/><div class="c"/></div> - <div class="flexbox"><div class="b"/> - <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> - </div> - - <div class="flexbox"> - <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml deleted file mode 100644 index da943dfc56..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml +++ /dev/null @@ -1,75 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<!-- Testcase with blocks as flex items in a vertical flex container, with - various "flex" values and various combinations of the items. --> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title> - CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container - (with various writing-modes on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> - <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> - <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/> - <style> - div { width: 50px; } - div.flexbox { - float: left; - border: 1px dashed blue; - height: 200px; - font-size: 10px; - display: flex; - flex-direction: column; - } - div.a { - flex: 1 0 30px; - background: lightgreen; - writing-mode: vertical-lr; - } - div.b { - flex: 2 0 20px; - background: yellow; - writing-mode: vertical-rl; - } - div.c { - flex: 3 0 40px; - background: orange; - writing-mode: sideways-lr; - } - div.flexNone { - flex: none; - background: pink; - writing-mode: vertical-lr; - } - div.flexBasis { - flex: 0 0 20px; - background: gray; - writing-mode: sideways-rl; - } - div.spacer { - display: inline-block; - width: 15px; - height: 15px; - background: purple; - } - </style> - </head> - <body> - <div class="flexbox"><div class="a"></div><div class="b"/></div> - <div class="flexbox"><div class="a"/><div class="c"/></div> - <div class="flexbox"><div class="a"/> - <div class="flexNone"><div class="spacer"/></div> - </div> - <div class="flexbox"><div class="b"/><div class="c"/></div> - <div class="flexbox"><div class="b"/> - <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> - </div> - - <div class="flexbox"> - <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml deleted file mode 100644 index ad623d77f7..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml +++ /dev/null @@ -1,105 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<!-- - This test checks that canvas elements behave correctly as flex items. ---> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title> - CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container - (with a vertical writing-mode on the canvas flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> - <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> - <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/> - <style> - div.flexbox { - width: 200px; - background: lightgreen; - display: flex; - justify-content: space-between; - margin-bottom: 5px; - line-height: 8px; - } - canvas { - min-width: 0; - width: 10px; - height: 20px; - border: 1px dotted green; - writing-mode: vertical-lr; - } - </style> - </head> - <body> - - <!-- A) One flex item --> - <div class="flexbox"> - <canvas/> - </div> - - <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> - <div class="flexbox"> - some words <canvas/> - </div> - - <!-- C) Two canvas elements, getting stretched by different ratios, from 0. - - Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) - = 196px - - 1st element gets 5/8 of space: 5/8 * 196px = 122.5px - 1st element gets 3/8 of space: 3/8 * 196px = 73.5px - --> - <div class="flexbox"> - <canvas style="flex: 5"/> - <canvas style="flex: 3"/> - </div> - - <!-- D) Two canvas elements, getting stretched by different ratios, from - different flex bases. - - Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px - 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px - 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px - --> - <div class="flexbox"> - <canvas style="width: 33px; flex: 2 auto"/> - <canvas style="width: 13px; flex: 3 auto"/> - </div> - - <!-- E) Two flex items, getting shrunk by different amounts. - - Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px - First element scaled flex ratio = 4 * 150 = 600 - Second element scaled flex ratio = 3 * 100 = 300 - * So, total flexibility is 600 + 300 = 900 - - 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px - 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px - --> - <div class="flexbox"> - <canvas style="width: 150px; flex: 1 4 auto"/> - <canvas style="width: 100px; flex: 1 3 auto"/> - </div> - - <!-- F) Making sure we don't grow past max-width --> - <!-- Same as (D), except we've added a max-width on the second element. - --> - <div class="flexbox"> - <canvas style="width: 33px; flex: 2 auto"/> - <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/> - </div> - - <!-- G) Making sure we grow at least as large as min-width --> - <!-- Same as (C), except we've added a min-width on the second element. - --> - <div class="flexbox"> - <canvas style="width: 33px; flex: 2 auto"/> - <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/> - </div> - - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml deleted file mode 100644 index 057f63ae62..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml +++ /dev/null @@ -1,107 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<!-- - This test checks that canvas elements behave correctly as flex items. ---> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title> - CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container - (with a vertical writing-mode on the canvas flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> - <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> - <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/> - <style> - div.flexbox { - height: 200px; - background: lightgreen; - display: flex; - justify-content: space-between; - flex-direction: column; - float: left; - margin-right: 10px; - font: 8px monospace; - } - canvas { - width: 20px; - height: 10px; - min-height: 0; - border: 1px dotted green; - writing-mode: vertical-lr; - } - </style> - </head> - <body> - - <!-- A) One flex item --> - <div class="flexbox"> - <canvas/> - </div> - - <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> - <div class="flexbox"> - a b <canvas/> - </div> - - <!-- C) Two canvas elements, getting stretched by different ratios, from 0. - - Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) - = 196px - - 1st element gets 5/8 of space: 5/8 * 196px = 122.5px - 1st element gets 3/8 of space: 3/8 * 196px = 73.5px - --> - <div class="flexbox"> - <canvas style="flex: 5"/> - <canvas style="flex: 3"/> - </div> - - <!-- D) Two canvas elements, getting stretched by different ratios, from - different flex bases. - - Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px - 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px - 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px - --> - <div class="flexbox"> - <canvas style="height: 33px; flex: 2 auto"/> - <canvas style="height: 13px; flex: 3 auto"/> - </div> - - <!-- E) Two flex items, getting shrunk by different amounts. - - Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px - First element scaled flex ratio = 4 * 150 = 600 - Second element scaled flex ratio = 3 * 100 = 300 - * So, total flexibility is 600 + 300 = 900 - - 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px - 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px - --> - <div class="flexbox"> - <canvas style="height: 150px; flex: 1 4 auto"/> - <canvas style="height: 100px; flex: 1 3 auto"/> - </div> - - <!-- F) Making sure we don't grow past max-height --> - <!-- Same as (D), except we've added a max-height on the second element. - --> - <div class="flexbox"> - <canvas style="height: 33px; flex: 2 auto"/> - <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/> - </div> - - <!-- G) Making sure we grow at least as large as min-height --> - <!-- Same as (C), except we've added a min-height on the second element. - --> - <div class="flexbox"> - <canvas style="height: 33px; flex: 2 auto"/> - <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/> - </div> - - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html deleted file mode 100644 index 4cc910b9e2..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> - <head> - <meta charset="utf-8"> - <title> - CSS Test: Testing how explicit main-size & cross-size constraints - influence sizing on non-stretched flex item w/ intrinsic ratio - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> - <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html"> - <style> - .flexbox { - display: flex; - flex-direction: row; - border: 1px solid black; - margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ - width: 40px; - height: 40px; - - justify-content: flex-start; - align-items: flex-start; - - float: left; /* For testing in "rows" */ - } - br { clear: both; } - - .flexbox > * { - writing-mode: vertical-lr; - - /* Disable "min-width:auto"/"min-height:auto" to focus purely on - later channels of influence. */ - min-width: 0; - min-height: 0; - } - </style> - </head> - <body> - <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> - - <!-- Row 1: no special sizing: --> - <div class="flexbox"> - <img src="support/solidblue.png"> - </div> - <br> - - <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="flex: 0 0 30px"> - </div> - <br> - - <!-- Row 3: min main-size OR min cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px; - min-height: 30px"> - </div> - <br> - - <!-- Row 4: max main-size OR max cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - max-height: 6px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 6px; - max-height: 10px"> - </div> - <br> - - <!-- Row 5: min main-size vs. max cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - min-height: 30px"> - </div> - <br> - - <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 10px; - min-height: 30px"> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html deleted file mode 100644 index 0df92f9954..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> - <head> - <meta charset="utf-8"> - <title> - CSS Test: Testing how explicit main-size & cross-size constraints - influence sizing on non-stretched flex item w/ intrinsic ratio - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> - <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html"> - <style> - .flexbox { - display: flex; - flex-direction: column; - border: 1px solid black; - margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ - width: 40px; - height: 40px; - - justify-content: flex-start; - align-items: flex-start; - - float: left; /* For testing in "rows" */ - } - br { clear: both; } - - .flexbox > * { - writing-mode: vertical-lr; - - /* Disable "min-width:auto"/"min-height:auto" to focus purely on - later channels of influence. */ - min-width: 0; - min-height: 0; - } - </style> - </head> - <body> - <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> - - <!-- Row 1: no special sizing: --> - <div class="flexbox"> - <img src="support/solidblue.png"> - </div> - <br> - - <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="flex: 0 0 30px"> - </div> - <br> - - <!-- Row 3: min main-size OR min cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px; - min-height: 30px"> - </div> - <br> - - <!-- Row 4: max main-size OR max cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - max-height: 6px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 6px; - max-height: 10px"> - </div> - <br> - - <!-- Row 5: min main-size vs. max cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - min-height: 30px"> - </div> - <br> - - <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 10px; - min-height: 30px"> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html deleted file mode 100644 index cb9275fd8c..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> - <head> - <meta charset="utf-8"> - <title> - CSS Test: Testing how explicit main-size & cross-size constraints - influence sizing on stretched flex item w/ intrinsic ratio - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> - <link rel="match" href="flexbox-intrinsic-ratio-003-ref.html"> - <style> - .flexbox { - display: flex; - flex-direction: row; - border: 1px solid black; - margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ - width: 40px; - height: 40px; - - justify-content: flex-start; - align-items: stretch; - - float: left; /* For testing in "rows" */ - } - br { clear: both; } - - .flexbox > * { - writing-mode: vertical-rl; - - /* Disable "min-width:auto"/"min-height:auto" to focus purely on - later channels of influence. */ - min-width: 0; - min-height: 0; - } - </style> - </head> - <body> - <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> - - <!-- Row 1: no special sizing: --> - <div class="flexbox"> - <img src="support/solidblue.png"> - </div> - <br> - - <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="flex: 0 0 30px"> - </div> - <br> - - <!-- Row 3: min main-size OR min cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px; - min-height: 30px"> - </div> - <br> - - <!-- Row 4: max main-size OR max cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - max-height: 6px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 6px; - max-height: 10px"> - </div> - <br> - - <!-- Row 5: min main-size vs. max cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - min-height: 30px"> - </div> - <br> - - <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 10px; - min-height: 30px"> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html deleted file mode 100644 index 01c5271c45..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> - <head> - <meta charset="utf-8"> - <title> - CSS Test: Testing how explicit main-size & cross-size constraints - influence sizing on stretched flex item w/ intrinsic ratio - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> - <link rel="match" href="flexbox-intrinsic-ratio-004-ref.html"> - <style> - .flexbox { - display: flex; - flex-direction: column; - border: 1px solid black; - margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ - width: 40px; - height: 40px; - - justify-content: flex-start; - align-items: stretch; - - float: left; /* For testing in "rows" */ - } - br { clear: both; } - - .flexbox > * { - writing-mode: vertical-rl; - - /* Disable "min-width:auto"/"min-height:auto" to focus purely on - later channels of influence. */ - min-width: 0; - min-height: 0; - } - </style> - </head> - <body> - <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> - - <!-- Row 1: no special sizing: --> - <div class="flexbox"> - <img src="support/solidblue.png"> - </div> - <br> - - <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="flex: 0 0 30px"> - </div> - <br> - - <!-- Row 3: min main-size OR min cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px; - min-height: 30px"> - </div> - <br> - - <!-- Row 4: max main-size OR max cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - max-height: 6px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 6px; - max-height: 10px"> - </div> - <br> - - <!-- Row 5: min main-size vs. max cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - min-height: 30px"> - </div> - <br> - - <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 10px; - min-height: 30px"> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html deleted file mode 100644 index ed1dcace0f..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html +++ /dev/null @@ -1,129 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> - <head> - <meta charset="utf-8"> - <title> - CSS Test: Testing how explicit main-size & cross-size constraints - influence sizing on non-stretched flexible flex item w/ intrinsic ratio - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> - <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html"> - <style> - .flexbox { - display: flex; - flex-direction: row; - border: 1px solid black; - margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ - width: 40px; - height: 40px; - - justify-content: flex-start; - align-items: flex-start; - - float: left; /* For testing in "rows" */ - } - br { clear: both; } - - .flexbox > * { - flex: 1; - writing-mode: vertical-lr; - - /* Disable "min-width:auto"/"min-height:auto" to focus purely on - later channels of influence. */ - min-width: 0; - min-height: 0; - } - </style> - </head> - <body> - <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> - - <!-- Row 1: no special sizing: --> - <div class="flexbox"> - <img src="support/solidblue.png"> - </div> - <br> - - <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="flex: 1 1 30px"> - </div> - <br> - - <!-- Row 3: min main-size OR min cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px; - min-height: 30px"> - </div> - <br> - - <!-- Row 4: max main-size OR max cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - max-height: 6px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 6px; - max-height: 10px"> - </div> - <br> - - <!-- Row 5: min main-size vs. max cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - min-height: 30px"> - </div> - <br> - - <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 10px; - min-height: 30px"> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html deleted file mode 100644 index 8c12fad8c7..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html +++ /dev/null @@ -1,129 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> - <head> - <meta charset="utf-8"> - <title> - CSS Test: Testing how explicit main-size & cross-size constraints - influence sizing on non-stretched flexible flex item w/ intrinsic ratio - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> - <link rel="match" href="flexbox-intrinsic-ratio-006-ref.html"> - <style> - .flexbox { - display: flex; - flex-direction: column; - border: 1px solid black; - margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ - width: 40px; - height: 40px; - - justify-content: flex-start; - align-items: flex-start; - - float: left; /* For testing in "rows" */ - } - br { clear: both; } - - .flexbox > * { - flex: 1; - writing-mode: vertical-lr; - - /* Disable "min-width:auto"/"min-height:auto" to focus purely on - later channels of influence. */ - min-width: 0; - min-height: 0; - } - </style> - </head> - <body> - <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> - - <!-- Row 1: no special sizing: --> - <div class="flexbox"> - <img src="support/solidblue.png"> - </div> - <br> - - <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="flex: 1 1 30px"> - </div> - <br> - - <!-- Row 3: min main-size OR min cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - min-height: 34px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 34px; - min-height: 30px"> - </div> - <br> - - <!-- Row 4: max main-size OR max cross-size, or both --> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - max-height: 6px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 6px; - max-height: 10px"> - </div> - <br> - - <!-- Row 5: min main-size vs. max cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - min-height: 30px"> - </div> - <br> - - <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> - <div class="flexbox"> - <img src="support/solidblue.png" style="min-width: 30px; - height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 30px; - max-height: 10px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="max-width: 10px; - height: 30px"> - </div> - <div class="flexbox"> - <img src="support/solidblue.png" style="width: 10px; - min-height: 30px"> - </div> - </body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml deleted file mode 100644 index a02e3406c9..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml +++ /dev/null @@ -1,86 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<!-- Testcase with margin/border/padding on flex items - and with various writing-modes on the items. --> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title> - CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> - <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> - <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> - <style> - div { height: 100px; border: 0; } - div.flexbox { - width: 200px; - font-size: 10px; - display: flex; - } - div.a { - flex: 1 0 9px; - background: lightgreen; - margin-left: 1px; - margin-right: 3px; - border-style: dotted; - border-left-width: 2px; - border-right-width: 4px; - padding-left: 5px; - padding-right: 6px; - writing-mode: vertical-lr; - } - div.b { - flex: 2 0 1px; - background: yellow; - margin-left: 2px; - margin-right: 4px; - border-style: dashed; - border-left-width: 7px; - border-right-width: 3px; - padding-left: 1px; - padding-right: 2px; - writing-mode: vertical-rl; - } - div.c { - flex: 3 0 40px; - background: orange; - writing-mode: sideways-lr; - } - div.flexNone { - flex: none; - background: pink; - writing-mode: vertical-lr; - } - div.flexBasis { - flex: 0 0 20px; - background: gray; - writing-mode: sideways-rl; - } - div.spacer { - width: 15px; - height: 15px; - background: purple; - } - </style> - </head> - <body> - <div class="flexbox"><div class="a"></div><div class="b"/></div> - <div class="flexbox"><div class="a"/><div class="c"/></div> - <div class="flexbox"><div class="a"/> - <div class="flexNone"><div class="spacer"/></div> - </div> - <div class="flexbox"><div class="b"/><div class="c"/></div> - <div class="flexbox"><div class="b"/> - <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> - </div> - - <div class="flexbox"> - <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> - </div> - </body> -</html> - diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml deleted file mode 100644 index 8baef30227..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml +++ /dev/null @@ -1,88 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<!-- Testcase with border/padding on a flex container and on its children --> -<html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title> - CSS Test: Testing borders and padding on a horizontal flex container and its flex items - (with a vertical writing-mode on the flex items). - </title> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> - <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> - <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> - <style> - div { height: 20px; border: 0; } - div.flexbox { - width: 200px; - display: flex; - margin-bottom: 2px; - } - - <!-- customizations for flex container border/padding --> - .borderA { - border-style: dashed; - border-color: purple; - border-top-width: 6px; - border-right-width: 4px; - border-bottom-width: 2px; - border-left-width: 8px; - } - - .borderB { - border-style: dashed; - border-color: purple; - border-top-width: 4px; - border-right-width: 5px; - border-bottom-width: 6px; - border-left-width: 7px; - } - - .paddingA { - padding: 4px 3px 2px 1px; - } - - .paddingB { - padding: 8px 11px 14px 17px; - } - - div.child1 { - flex: 1 0 24px; - background: lightgreen; - border-style: dotted; - border-left-width: 2px; - border-right-width: 4px; - writing-mode: vertical-rl; - } - div.child2 { - flex: 2 0 10px; - background: yellow; - border-style: dashed; - border-left-width: 7px; - border-right-width: 3px; - writing-mode: vertical-lr; - } - </style> - </head> - <body> - <div class="flexbox borderA" - ><div class="child1"/><div class="child2"/></div> - <div class="flexbox borderA paddingA" - ><div class="child1"/><div class="child2"/></div> - <div class="flexbox borderA paddingB" - ><div class="child1"/><div class="child2"/></div> - <div class="flexbox borderB" - ><div class="child1"/><div class="child2"/></div> - <div class="flexbox borderB paddingA" - ><div class="child1"/><div class="child2"/></div> - <div class="flexbox borderB paddingB" - ><div class="child1"/><div class="child2"/></div> - <div class="flexbox paddingA" - ><div class="child1"/><div class="child2"/></div> - <div class="flexbox paddingB" - ><div class="child1"/><div class="child2"/></div> - </body> -</html> - diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html deleted file mode 100644 index e488416412..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html +++ /dev/null @@ -1,94 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title>CSS Reftest Reference</title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: block; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 150px; - width: 500px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - - .container > .hl, .container > .hr { - /* In the testcase, these items are stretched vertically - via the default "align-self:stretch" behavior, and because - they have a height of "auto". - (The rest of the items have a non-auto height from "inline-size" - and their vertical writing-mode, so those ones do not stretch.) */ - height: 118px; - } - - .container.hl > * { float: left; } - .container.hr > * { float: right; } - - </style> -</head> -<body> - -<div class="container hl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container hl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container hr"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container hr"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html deleted file mode 100644 index 55c50e850f..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html +++ /dev/null @@ -1,88 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title> - CSS Test: Testing a mix of flex items with various values for - 'writing-mode' / 'direction' in a horizontal row-oriented flex container. - </title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> - <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> - <link rel="match" href="flexbox-writing-mode-010-ref.html"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: flex; - flex-direction: row; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 150px; - width: 500px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - </style> -</head> -<body> - -<div class="container hl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container hl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container hr"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container hr"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html deleted file mode 100644 index 8b926490b6..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html +++ /dev/null @@ -1,97 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title>CSS Reftest Reference</title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: block; - float: left; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 500px; - width: 150px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - - /* This really floats to top ('logical left'), since all the containers - have a vertical writing mode. */ - float: left; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - - - .container > .vl, .container > .vr, - .container > .vl_rtl, .container > .vr_rtl { - /* In the testcase, these items are stretched horizontally - via the default "align-self:stretch" behavior, and because - they have a width of "auto". - (The rest of the items have a non-auto width from "inline-size" - and their horizontal writing-mode, so those ones do not stretch.) */ - width: 126px; - } - </style> -</head> -<body> - -<div class="container vl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container vr"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vr"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html deleted file mode 100644 index 6114e19275..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title> - CSS Test: Testing a mix of flex items with various values for - 'writing-mode' / 'direction' in a vertical row-oriented flex container. - </title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> - <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> - <link rel="match" href="flexbox-writing-mode-011-ref.html"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: flex; - flex-direction: row; - float: left; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 500px; - width: 150px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - </style> -</head> -<body> - -<div class="container vl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container vr"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vr"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html deleted file mode 100644 index c03358be42..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html +++ /dev/null @@ -1,97 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title>CSS Reftest Reference</title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: block; - float: left; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 500px; - width: 150px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - - /* This really floats to top ('logical left'), since all the containers - have a vertical writing mode. */ - float: right; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - - - .container > .vl, .container > .vr, - .container > .vl_rtl, .container > .vr_rtl { - /* In the testcase, these items are stretched horizontally - via the default "align-self:stretch" behavior, and because - they have a width of "auto". - (The rest of the items have a non-auto width from "inline-size" - and their horizontal writing-mode, so those ones do not stretch.) */ - width: 126px; - } - </style> -</head> -<body> - -<div class="container vl_rtl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vl_rtl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container vr_rtl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vr_rtl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html deleted file mode 100644 index a7b05f178d..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html +++ /dev/null @@ -1,90 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title> - CSS Test: Testing a mix of flex items with various values for - 'writing-mode' / 'direction' in a vertical row-oriented flex container - with 'direction' flipped. - </title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> - <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> - <link rel="match" href="flexbox-writing-mode-012-ref.html"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: flex; - flex-direction: row; - float: left; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 500px; - width: 150px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - </style> -</head> -<body> - -<div class="container vl_rtl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vl_rtl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container vr_rtl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vr_rtl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html deleted file mode 100644 index 2a27003a5c..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html +++ /dev/null @@ -1,98 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title>CSS Reftest Reference</title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: block; - float: left; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 500px; - width: 150px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - nocollapse { - /* special element to disable margin-collapsing */ - display: block; - overflow: hidden; - height: 0; - } - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - - .container > .vl, .container > .vr, - .container > .vl_rtl, .container > .vr_rtl { - /* In the testcase, these items are stretched horizontally - via the default "align-self:stretch" behavior, and because - they have a width of "auto". - (The rest of the items have a non-auto width from "inline-size" - and their horizontal writing-mode, so those ones do not stretch.) */ - width: 126px; - } - </style> -</head> -<body> - -<div class="container hl"> - <span class="hl small">a b c</span> <nocollapse></nocollapse> - <span class="hl big">d e</span> <nocollapse></nocollapse> - <span class="hr small">a b c</span> <nocollapse></nocollapse> - <span class="hr big">d e</span> <nocollapse></nocollapse> - <span class="vl small">a b c</span> <nocollapse></nocollapse> - <span class="vl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container hl"> - <span class="vr small">a b c</span> <nocollapse></nocollapse> - <span class="vr big">d e</span> <nocollapse></nocollapse> - <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> - <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container hr"> - <span class="hl small">a b c</span> <nocollapse></nocollapse> - <span class="hl big">d e</span> <nocollapse></nocollapse> - <span class="hr small">a b c</span> <nocollapse></nocollapse> - <span class="hr big">d e</span> <nocollapse></nocollapse> - <span class="vl small">a b c</span> <nocollapse></nocollapse> - <span class="vl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container hr"> - <span class="vr small">a b c</span> <nocollapse></nocollapse> - <span class="vr big">d e</span> <nocollapse></nocollapse> - <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> - <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html deleted file mode 100644 index a5d483c442..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title> - CSS Test: Testing a mix of flex items with various values for - 'writing-mode' / 'direction' in a horizontal column-oriented flex container. - </title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> - <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> - <link rel="match" href="flexbox-writing-mode-013-ref.html"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: flex; - flex-direction: column; - float: left; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 500px; - width: 150px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - </style> -</head> -<body> - -<div class="container hl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container hl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container hr"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container hr"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html deleted file mode 100644 index 4e4f5904a1..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html +++ /dev/null @@ -1,96 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title>CSS Reftest Reference</title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: block; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 150px; - width: 500px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - nocollapse { - /* special element to disable margin-collapsing */ - display: block; - overflow: hidden; - height: 0; - } - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - - .container > .hl, .container > .hr { - /* In the testcase, these items are stretched vertically - via the default "align-self:stretch" behavior, and because - they have a height of "auto". - (The rest of the items have a non-auto height from "inline-size" - and their vertical writing-mode, so those ones do not stretch.) */ - height: 118px; - } - </style> -</head> -<body> - -<div class="container vl"> - <span class="hl small">a b c</span> <nocollapse></nocollapse> - <span class="hl big">d e</span> <nocollapse></nocollapse> - <span class="hr small">a b c</span> <nocollapse></nocollapse> - <span class="hr big">d e</span> <nocollapse></nocollapse> - <span class="vl small">a b c</span> <nocollapse></nocollapse> - <span class="vl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container vl"> - <span class="vr small">a b c</span> <nocollapse></nocollapse> - <span class="vr big">d e</span> <nocollapse></nocollapse> - <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> - <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container vr"> - <span class="hl small">a b c</span> <nocollapse></nocollapse> - <span class="hl big">d e</span> <nocollapse></nocollapse> - <span class="hr small">a b c</span> <nocollapse></nocollapse> - <span class="hr big">d e</span> <nocollapse></nocollapse> - <span class="vl small">a b c</span> <nocollapse></nocollapse> - <span class="vl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container vr"> - <span class="vr small">a b c</span> <nocollapse></nocollapse> - <span class="vr big">d e</span> <nocollapse></nocollapse> - <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> - <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html deleted file mode 100644 index 1a5443279a..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html +++ /dev/null @@ -1,88 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title> - CSS Test: Testing a mix of flex items with various values for - 'writing-mode' / 'direction' in a vertical column-oriented flex container. - </title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> - <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> - <link rel="match" href="flexbox-writing-mode-014-ref.html"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: flex; - flex-direction: column; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 150px; - width: 500px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - </style> -</head> -<body> - -<div class="container vl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container vr"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vr"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html deleted file mode 100644 index a236ca11d5..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html +++ /dev/null @@ -1,96 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title>CSS Reftest Reference</title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: block; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 150px; - width: 500px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - nocollapse { - /* special element to disable margin-collapsing */ - display: block; - overflow: hidden; - height: 0; - } - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - - .container > .hl, .container > .hr { - /* In the testcase, these items are stretched vertically - via the default "align-self:stretch" behavior, and because - they have a height of "auto". - (The rest of the items have a non-auto height from "inline-size" - and their vertical writing-mode, so those ones do not stretch.) */ - height: 118px; - } - </style> -</head> -<body> - -<div class="container vl_rtl"> - <span class="hl small">a b c</span> <nocollapse></nocollapse> - <span class="hl big">d e</span> <nocollapse></nocollapse> - <span class="hr small">a b c</span> <nocollapse></nocollapse> - <span class="hr big">d e</span> <nocollapse></nocollapse> - <span class="vl small">a b c</span> <nocollapse></nocollapse> - <span class="vl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container vl_rtl"> - <span class="vr small">a b c</span> <nocollapse></nocollapse> - <span class="vr big">d e</span> <nocollapse></nocollapse> - <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> - <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container vr_rtl"> - <span class="hl small">a b c</span> <nocollapse></nocollapse> - <span class="hl big">d e</span> <nocollapse></nocollapse> - <span class="hr small">a b c</span> <nocollapse></nocollapse> - <span class="hr big">d e</span> <nocollapse></nocollapse> - <span class="vl small">a b c</span> <nocollapse></nocollapse> - <span class="vl big">d e</span> <nocollapse></nocollapse> -</div> -<div class="container vr_rtl"> - <span class="vr small">a b c</span> <nocollapse></nocollapse> - <span class="vr big">d e</span> <nocollapse></nocollapse> - <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> - <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> - <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> -</div> - -</body> -</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html deleted file mode 100644 index af1f9b8456..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html> -<head> - <title> - CSS Test: Testing a mix of flex items with various values for - 'writing-mode' / 'direction' in a vertical column-oriented flex container - with 'direction' flipped. - </title> - <meta charset="utf-8"> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> - <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> - <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> - <link rel="match" href="flexbox-writing-mode-015-ref.html"> - <link rel="stylesheet" type="text/css" href="support/ahem.css"> - <style> - .container { - display: flex; - flex-direction: column; - border: 2px solid purple; - padding: 2px; - margin-bottom: 2em; - height: 150px; - width: 500px; - } - - span { - display: block; - background: lightgrey; - border: 2px solid black; - /* If browser supports it, signal the inline direction with border color: */ - border-block-start-color: orange; - border-inline-start-color: lime; - - margin: 11px 13px 17px 7px; - inline-size: 6px; - } - - .small { font: 12px Ahem; } - .big { font: 20px Ahem; } - - .hl { writing-mode: horizontal-tb; direction: ltr; } - .hr { writing-mode: horizontal-tb; direction: rtl; } - .vl { writing-mode: vertical-lr; direction: ltr; } - .vr { writing-mode: vertical-rl; direction: ltr; } - .vl_rtl { writing-mode: vertical-lr; direction: rtl; } - .vr_rtl { writing-mode: vertical-rl; direction: rtl; } - </style> -</head> -<body> - -<div class="container vl_rtl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vl_rtl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> -<div class="container vr_rtl"> - <span class="hl small">a b c</span> - <span class="hl big">d e</span> - <span class="hr small">a b c</span> - <span class="hr big">d e</span> - <span class="vl small">a b c</span> - <span class="vl big">d e</span> -</div> -<div class="container vr_rtl"> - <span class="vr small">a b c</span> - <span class="vr big">d e</span> - <span class="vl_rtl small">a b c</span> - <span class="vl_rtl big">d e</span> - <span class="vr_rtl small">a b c</span> - <span class="vr_rtl big">d e</span> -</div> - -</body> -</html> |