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