summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMoonchild <moonchild@palemoon.org>2022-08-24 00:51:48 +0200
committerMoonchild <moonchild@palemoon.org>2022-08-24 00:51:48 +0200
commitdb1c5741cdf5d93b93f4e07677159d757c7eb84f (patch)
tree0be5b88bc88352d6696b1c2eb054708db15c4e2d
parent0488d0b40bce4965483b05821c33317adda4dd30 (diff)
parentd262539fb9ab2b250eb42893fa3d9de27ca27c72 (diff)
downloaduxp-db1c5741cdf5d93b93f4e07677159d757c7eb84f.tar.gz
Merge branch 'master' of https://repo.palemoon.org/MoonchildProductions/UXP
-rw-r--r--ipc/chromium/src/third_party/libevent/arc4random.c2
-rw-r--r--layout/generic/ReflowInput.cpp14
-rw-r--r--layout/generic/ReflowInput.h6
-rw-r--r--layout/generic/nsFlexContainerFrame.cpp269
-rw-r--r--layout/generic/nsFlexContainerFrame.h27
-rw-r--r--layout/generic/nsFrame.cpp11
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml73
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml75
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml105
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml107
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html128
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html128
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html128
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html128
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html129
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html129
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml86
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml88
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html94
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html88
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html97
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html89
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html97
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html90
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html98
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html89
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html96
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html88
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html96
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html89
30 files changed, 2621 insertions, 123 deletions
diff --git a/ipc/chromium/src/third_party/libevent/arc4random.c b/ipc/chromium/src/third_party/libevent/arc4random.c
index 0dd6934ef8..9efcc6e934 100644
--- a/ipc/chromium/src/third_party/libevent/arc4random.c
+++ b/ipc/chromium/src/third_party/libevent/arc4random.c
@@ -481,7 +481,7 @@ arc4random(void)
}
#endif
-#if defined(_we_have_arc4random_buf) || !defined(XP_SOLARIS)
+#ifndef HAVE_ARC4RANDOM_BUF
ARC4RANDOM_EXPORT void
arc4random_buf(void *_buf, size_t n)
{
diff --git a/layout/generic/ReflowInput.cpp b/layout/generic/ReflowInput.cpp
index 1af7e798ef..994e2cfbb6 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.mIsFlexContainerMeasuringHeight = false;
+ mFlags.mIsFlexContainerMeasuringBSize = 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 height, pass that information along to ComputeSize().
- if (mFlags.mIsFlexContainerMeasuringHeight) {
+ // auto BSize, pass that information along to ComputeSize().
+ if (mFlags.mIsFlexContainerMeasuringBSize) {
computeSizeFlags =
ComputeSizeFlags(computeSizeFlags | ComputeSizeFlags::eUseAutoBSize);
}
} else {
- MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringHeight,
+ MOZ_ASSERT(!mFlags.mIsFlexContainerMeasuringBSize,
"We're not in a flex container, so the flag "
- "'mIsFlexContainerMeasuringHeight' shouldn't be set");
+ "'mIsFlexContainerMeasuringBSize' 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.mIsFlexContainerMeasuringHeight) {
+ mFlags.mIsFlexContainerMeasuringBSize) {
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.mIsFlexContainerMeasuringHeight) {
+ mFlags.mIsFlexContainerMeasuringBSize) {
ComputedMaxBSize() = NS_UNCONSTRAINEDSIZE;
} else {
ComputedMaxBSize() = ComputeBSizeValue(aCBSize.BSize(wm),
diff --git a/layout/generic/ReflowInput.h b/layout/generic/ReflowInput.h
index a70549d8eb..e84d386a82 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 mIsFlexContainerMeasuringHeight:1; // nsFlexContainerFrame is
- // reflowing this child to
- // measure its intrinsic height.
+ uint32_t mIsFlexContainerMeasuringBSize:1; // nsFlexContainerFrame is
+ // reflowing this child to
+ // measure its intrinsic BSize.
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 18a0643f14..b4907a4862 100644
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -511,6 +511,15 @@ 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; }
@@ -749,10 +758,8 @@ protected:
void CheckForMinSizeAuto(const ReflowInput& aFlexItemReflowInput,
const FlexboxAxisTracker& aAxisTracker);
- // Our frame:
- nsIFrame* const mFrame;
-
- // Values that we already know in constructor: (and are hence mostly 'const')
+ // Values that we already know in constructor (and are hence mostly 'const'):
+ nsIFrame* const mFrame; // The flex item's frame.
const float mFlexGrow;
const float mFlexShrink;
@@ -785,6 +792,7 @@ 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;
@@ -795,11 +803,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).
@@ -1492,21 +1500,26 @@ nsFlexContainerFrame::GenerateFlexItemForChild(
// Static helper-functions for ResolveAutoFlexBasisAndMinSize():
// -------------------------------------------------------------
-// Indicates whether the cross-size property is set to something definite.
-// The logic here should be similar to the logic for isAutoWidth/isAutoHeight
+// 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
// in nsFrame::ComputeSizeWithIntrinsicDimensions().
static bool
IsCrossSizeDefinite(const ReflowInput& aItemReflowInput,
const FlexboxAxisTracker& aAxisTracker)
{
const nsStylePosition* pos = aItemReflowInput.mStylePosition;
- 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);
+ 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 aFlexItem has a definite cross size, this function returns it, for usage
@@ -1676,9 +1689,10 @@ nsFlexContainerFrame::
const ReflowInput& aItemReflowInput,
const FlexboxAxisTracker& aAxisTracker)
{
- // (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() &&
+ // (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() &&
NS_AUTOHEIGHT == aFlexItem.GetFlexBaseSize());
const bool isMainMinSizeAuto = aFlexItem.NeedsMinSizeAutoResolution();
@@ -1709,10 +1723,14 @@ nsFlexContainerFrame::
flexContainerRI->ComputedISize(),
flexContainerRI->ComputedBSize());
// Is container's cross size "definite"?
- // (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() ||
+ // - 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() ||
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);
}
}
@@ -1744,7 +1762,7 @@ nsFlexContainerFrame::
// Measure content, if needed (w/ intrinsic-width method or a reflow)
if (minSizeNeedsToMeasureContent || flexBasisNeedsToMeasureContent) {
- if (aAxisTracker.IsMainAxisHorizontal()) {
+ if (aFlexItem.IsInlineAxisMainAxis()) {
if (minSizeNeedsToMeasureContent) {
nscoord frameMinISize =
aFlexItem.Frame()->GetMinISize(aItemReflowInput.mRenderingContext);
@@ -1755,30 +1773,32 @@ nsFlexContainerFrame::
"reflow state, for horizontal flexbox. It shouldn't need "
"special handling here");
} else {
- // 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 =
+ // 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 =
!aFlexItem.IsFrozen() || // Is the item flexible?
!flexBasisNeedsToMeasureContent; // Are we *only* measuring it for
- // 'min-height:auto'?
+ // 'min-block-size:auto'?
- nscoord contentHeight =
- MeasureFlexItemContentHeight(aPresContext, aFlexItem,
- forceVerticalResizeForMeasuringReflow,
- *flexContainerRI);
+ nscoord contentBSize =
+ MeasureFlexItemContentBSize(aPresContext, aFlexItem,
+ forceBResizeForMeasuringReflow,
+ *flexContainerRI);
if (minSizeNeedsToMeasureContent) {
- resolvedMinSize = std::min(resolvedMinSize, contentHeight);
+ resolvedMinSize = std::min(resolvedMinSize, contentBSize);
}
if (flexBasisNeedsToMeasureContent) {
- aFlexItem.SetFlexBaseSizeAndMainSize(contentHeight);
+ aFlexItem.SetFlexBaseSizeAndMainSize(contentBSize);
}
}
}
@@ -1800,7 +1820,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 mIsFlexContainerMeasuringReflow flag affects size computation (see
+ * how the mIsFlexContainerMeasuringBSize flag affects size computation (see
* bug 1336708).
*
* Caching it prevents us from doing exponential reflows in cases of deeply
@@ -1812,27 +1832,27 @@ class nsFlexContainerFrame::CachedMeasuringReflowResult
{
// Members that are part of the cache key:
const LogicalSize mAvailableSize;
- const nscoord mComputedHeight;
+ const nscoord mComputedBSize;
// Members that are part of the cache value:
- const nscoord mHeight;
+ const nscoord mBSize;
const nscoord mAscent;
public:
CachedMeasuringReflowResult(const ReflowInput& aReflowInput,
const ReflowOutput& aDesiredSize)
: mAvailableSize(aReflowInput.AvailableSize())
- , mComputedHeight(aReflowInput.ComputedHeight())
- , mHeight(aDesiredSize.Height())
+ , mComputedBSize(aReflowInput.ComputedBSize())
+ , mBSize(aDesiredSize.BSize(aReflowInput.GetWritingMode()))
, mAscent(aDesiredSize.BlockStartAscent())
{}
bool IsValidFor(const ReflowInput& aReflowInput) const {
return mAvailableSize == aReflowInput.AvailableSize() &&
- mComputedHeight == aReflowInput.ComputedHeight();
+ mComputedBSize == aReflowInput.ComputedBSize();
}
- nscoord Height() const { return mHeight; }
+ nscoord BSize() const { return mBSize; }
nscoord Ascent() const { return mAscent; }
};
@@ -1841,7 +1861,7 @@ NS_DECLARE_FRAME_PROPERTY_DELETABLE(CachedFlexMeasuringReflow,
CachedMeasuringReflowResult);
const CachedMeasuringReflowResult&
-nsFlexContainerFrame::MeasureAscentAndHeightForFlexItem(
+nsFlexContainerFrame::MeasureAscentAndBSizeForFlexItem(
FlexItem& aItem,
nsPresContext* aPresContext,
ReflowInput& aChildReflowInput)
@@ -1892,43 +1912,44 @@ nsFlexContainerFrame::MarkIntrinsicISizesDirty()
nscoord
nsFlexContainerFrame::
- MeasureFlexItemContentHeight(nsPresContext* aPresContext,
- FlexItem& aFlexItem,
- bool aForceVerticalResizeForMeasuringReflow,
- const ReflowInput& aParentReflowInput)
+ MeasureFlexItemContentBSize(nsPresContext* aPresContext,
+ FlexItem& aFlexItem,
+ bool aForceBResizeForMeasuringReflow,
+ 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
- childRIForMeasuringHeight(aPresContext, aParentReflowInput,
- aFlexItem.Frame(), availSize,
- nullptr, ReflowInput::CALLER_WILL_INIT);
- childRIForMeasuringHeight.mFlags.mIsFlexContainerMeasuringHeight = true;
- childRIForMeasuringHeight.Init(aPresContext);
+ childRIForMeasuringBSize(aPresContext, aParentReflowInput,
+ aFlexItem.Frame(), availSize,
+ nullptr, ReflowInput::CALLER_WILL_INIT);
+ childRIForMeasuringBSize.mFlags.mIsFlexContainerMeasuringBSize = true;
+ childRIForMeasuringBSize.Init(aPresContext);
if (aFlexItem.IsStretched()) {
- childRIForMeasuringHeight.SetComputedWidth(aFlexItem.GetCrossSize());
- childRIForMeasuringHeight.SetHResize(true);
+ childRIForMeasuringBSize.SetComputedISize(aFlexItem.GetCrossSize());
+ childRIForMeasuringBSize.SetIResize(true);
}
- if (aForceVerticalResizeForMeasuringReflow) {
- childRIForMeasuringHeight.SetVResize(true);
+ if (aForceBResizeForMeasuringReflow) {
+ childRIForMeasuringBSize.SetBResize(true);
}
const CachedMeasuringReflowResult& reflowResult =
- MeasureAscentAndHeightForFlexItem(aFlexItem, aPresContext,
- childRIForMeasuringHeight);
+ MeasureAscentAndBSizeForFlexItem(aFlexItem, aPresContext,
+ childRIForMeasuringBSize);
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();
- return std::max(0, childDesiredHeight);
+ // 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);
}
FlexItem::FlexItem(ReflowInput& aFlexItemReflowInput,
@@ -1952,14 +1973,16 @@ 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");
@@ -1967,6 +1990,10 @@ 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)) {
@@ -2047,14 +2074,17 @@ 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");
@@ -2171,15 +2201,28 @@ FlexItem::CanMainSizeInfluenceCrossSize(
return true;
}
- 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;
+ 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.
}
// Default assumption, if we haven't proven otherwise: the resolved main size
@@ -4083,19 +4126,10 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
ReflowInput& aChildReflowInput,
FlexItem& aItem)
{
- 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());
+ // 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());
return;
}
@@ -4104,16 +4138,18 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
if (aItem.GetAlignSelf() == NS_STYLE_ALIGN_STRETCH) {
// This item's got "align-self: stretch", so we probably imposed a
- // 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);
+ // 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);
}
// Potentially reflow the item, and get the sizing info.
const CachedMeasuringReflowResult& reflowResult =
- MeasureAscentAndHeightForFlexItem(aItem, aPresContext, aChildReflowInput);
+ MeasureAscentAndBSizeForFlexItem(aItem, aPresContext, aChildReflowInput);
// Save the sizing info that we learned from this reflow
// -----------------------------------------------------
@@ -4125,7 +4161,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.Height() < crossAxisBorderPadding) {
+ if (reflowResult.BSize() < 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
@@ -4138,7 +4174,7 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
aItem.SetCrossSize(0);
} else {
// (normal case)
- aItem.SetCrossSize(reflowResult.Height() - crossAxisBorderPadding);
+ aItem.SetCrossSize(reflowResult.BSize() - crossAxisBorderPadding);
}
aItem.SetAscent(reflowResult.Ascent());
@@ -4389,6 +4425,41 @@ 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 39de79b577..e349709876 100644
--- a/layout/generic/nsFlexContainerFrame.h
+++ b/layout/generic/nsFlexContainerFrame.h
@@ -133,6 +133,21 @@ 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)
@@ -207,20 +222,20 @@ protected:
* This avoids exponential reflows, see the comment on
* CachedMeasuringReflowResult.
*/
- const CachedMeasuringReflowResult& MeasureAscentAndHeightForFlexItem(
+ const CachedMeasuringReflowResult& MeasureAscentAndBSizeForFlexItem(
FlexItem& aItem,
nsPresContext* aPresContext,
ReflowInput& aChildReflowInput);
/**
- * 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.
+ * 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.
* (Helper for ResolveAutoFlexBasisAndMinSize().)
*/
- nscoord MeasureFlexItemContentHeight(nsPresContext* aPresContext,
+ nscoord MeasureFlexItemContentBSize(nsPresContext* aPresContext,
FlexItem& aFlexItem,
- bool aForceVerticalResizeForMeasuringReflow,
+ bool aForceBSizeForMeasuringReflow,
const ReflowInput& aParentReflowInput);
/**
diff --git a/layout/generic/nsFrame.cpp b/layout/generic/nsFrame.cpp
index 43ad970890..9bc4941e0b 100644
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -39,6 +39,7 @@
#include "mozilla/Logging.h"
#include "mozilla/Sprintf.h"
#include "nsFrameManager.h"
+#include "nsFlexContainerFrame.h"
#include "nsLayoutUtils.h"
#include "LayoutLogging.h"
#include "mozilla/RestyleManager.h"
@@ -4752,12 +4753,11 @@ 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 =
- flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
- flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE;
+ nsFlexContainerFrame::IsItemInlineAxisMainAxis(this);
const nsStyleCoord* flexBasis = &(stylePos->mFlexBasis);
SetCoordToFlexBasis(isInlineFlexItem, false, flexBasis,
@@ -4973,11 +4973,8 @@ 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 =
- flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
- flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE;
+ nsFlexContainerFrame::IsItemInlineAxisMainAxis(this);
// 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
new file mode 100644
index 0000000000..f1dfdfdb86
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
@@ -0,0 +1,73 @@
+<?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
new file mode 100644
index 0000000000..da943dfc56
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
@@ -0,0 +1,75 @@
+<?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
new file mode 100644
index 0000000000..ad623d77f7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
@@ -0,0 +1,105 @@
+<?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
new file mode 100644
index 0000000000..057f63ae62
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
@@ -0,0 +1,107 @@
+<?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
new file mode 100644
index 0000000000..4cc910b9e2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
@@ -0,0 +1,128 @@
+<!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
new file mode 100644
index 0000000000..0df92f9954
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
@@ -0,0 +1,128 @@
+<!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
new file mode 100644
index 0000000000..cb9275fd8c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
@@ -0,0 +1,128 @@
+<!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
new file mode 100644
index 0000000000..01c5271c45
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
@@ -0,0 +1,128 @@
+<!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
new file mode 100644
index 0000000000..ed1dcace0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
@@ -0,0 +1,129 @@
+<!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
new file mode 100644
index 0000000000..8c12fad8c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
@@ -0,0 +1,129 @@
+<!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
new file mode 100644
index 0000000000..a02e3406c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
@@ -0,0 +1,86 @@
+<?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
new file mode 100644
index 0000000000..8baef30227
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
@@ -0,0 +1,88 @@
+<?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
new file mode 100644
index 0000000000..e488416412
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
@@ -0,0 +1,94 @@
+<!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
new file mode 100644
index 0000000000..55c50e850f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
@@ -0,0 +1,88 @@
+<!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
new file mode 100644
index 0000000000..8b926490b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
@@ -0,0 +1,97 @@
+<!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
new file mode 100644
index 0000000000..6114e19275
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
@@ -0,0 +1,89 @@
+<!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
new file mode 100644
index 0000000000..c03358be42
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
@@ -0,0 +1,97 @@
+<!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
new file mode 100644
index 0000000000..a7b05f178d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
@@ -0,0 +1,90 @@
+<!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
new file mode 100644
index 0000000000..2a27003a5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
@@ -0,0 +1,98 @@
+<!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
new file mode 100644
index 0000000000..a5d483c442
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
@@ -0,0 +1,89 @@
+<!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
new file mode 100644
index 0000000000..4e4f5904a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
@@ -0,0 +1,96 @@
+<!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
new file mode 100644
index 0000000000..1a5443279a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
@@ -0,0 +1,88 @@
+<!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
new file mode 100644
index 0000000000..a236ca11d5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
@@ -0,0 +1,96 @@
+<!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
new file mode 100644
index 0000000000..af1f9b8456
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
@@ -0,0 +1,89 @@
+<!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>