mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-02 10:00:54 +00:00
Merge mozilla-central and inbound
This commit is contained in:
Ed Morley
commit
8665d76e41
2
CLOBBER
2
CLOBBER
@ -22,4 +22,4 @@
|
||||
# changes to stick? As of bug 928195, this shouldn't be necessary! Please
|
||||
# don't change CLOBBER for WebIDL changes any more.
|
||||
|
||||
Merge day clobber
|
||||
Apparently something in bug 984711 & friends breaks CSS2Properties.webidl in non-clobber builds.
|
||||
|
||||
@ -30,6 +30,7 @@ LOCAL_INCLUDES += [
|
||||
'/accessible/html',
|
||||
'/accessible/xpcom',
|
||||
'/accessible/xul',
|
||||
'/content/base/src',
|
||||
'/layout/generic',
|
||||
'/layout/xul',
|
||||
]
|
||||
|
||||
@ -35,7 +35,7 @@ let tests = [
|
||||
waitForPopupAtAnchor(highlight.parentElement, document.getElementById("PanelUI-button"), () => {
|
||||
isnot(PanelUI.panel.state, "open",
|
||||
"Panel should have closed after the highlight moved elsewhere.");
|
||||
is(tooltip.state, "open", "The info panel should have remained open");
|
||||
ok(tooltip.state == "showing" || tooltip.state == "open", "The info panel should have remained open");
|
||||
done();
|
||||
}, "Highlight should move to the appMenu button and still be visible");
|
||||
}, "Highlight should be shown after showHighlight() for fixed panel items");
|
||||
@ -52,7 +52,7 @@ let tests = [
|
||||
waitForElementToBeHidden(highlight, function checkPanelIsClosed() {
|
||||
isnot(PanelUI.panel.state, "open",
|
||||
"Panel still should have closed");
|
||||
is(tooltip.state, "open", "The info panel should have remained open");
|
||||
ok(tooltip.state == "showing" || tooltip.state == "open", "The info panel should have remained open");
|
||||
done();
|
||||
}, "Highlight should have disappeared when panel closed");
|
||||
}, "Highlight should be shown after showHighlight() for fixed panel items");
|
||||
@ -70,7 +70,7 @@ let tests = [
|
||||
waitForElementToBeHidden(highlight, function checkPanelIsClosed() {
|
||||
isnot(PanelUI.panel.state, "open",
|
||||
"Panel should have closed when the find bar opened");
|
||||
is(tooltip.state, "open", "The info panel should have remained open");
|
||||
ok(tooltip.state == "showing" || tooltip.state == "open", "The info panel should have remained open");
|
||||
done();
|
||||
}, "Highlight should have disappeared when panel closed");
|
||||
}, "Highlight should be shown after showHighlight() for fixed panel items");
|
||||
@ -108,7 +108,7 @@ let tests = [
|
||||
waitForElementToBeHidden(highlight, function highlightHidden() {
|
||||
is(PanelUI.panel.state, "open",
|
||||
"Panel should have stayed open when the subview opened");
|
||||
is(tooltip.state, "open", "The info panel should have remained open");
|
||||
ok(tooltip.state == "showing" || tooltip.state == "open", "The info panel should have remained open");
|
||||
PanelUI.hide();
|
||||
done();
|
||||
}, "Highlight should have disappeared when the subview opened");
|
||||
|
||||
@ -41,13 +41,29 @@ function is_hidden(element) {
|
||||
return false;
|
||||
}
|
||||
|
||||
function is_visible(element) {
|
||||
var style = element.ownerDocument.defaultView.getComputedStyle(element, "");
|
||||
if (style.display == "none")
|
||||
return false;
|
||||
if (style.visibility != "visible")
|
||||
return false;
|
||||
if (style.display == "-moz-popup" && element.state != "open")
|
||||
return false;
|
||||
|
||||
// Hiding a parent element will hide all its children
|
||||
if (element.parentNode != element.ownerDocument)
|
||||
return is_visible(element.parentNode);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function is_element_visible(element, msg) {
|
||||
isnot(element, null, "Element should not be null, when checking visibility");
|
||||
ok(!is_hidden(element), msg);
|
||||
ok(is_visible(element), msg);
|
||||
}
|
||||
|
||||
function waitForElementToBeVisible(element, nextTest, msg) {
|
||||
waitForCondition(() => !is_hidden(element),
|
||||
waitForCondition(() => is_visible(element),
|
||||
() => {
|
||||
ok(true, msg);
|
||||
nextTest();
|
||||
@ -65,7 +81,7 @@ function waitForElementToBeHidden(element, nextTest, msg) {
|
||||
}
|
||||
|
||||
function waitForPopupAtAnchor(popup, anchorNode, nextTest, msg) {
|
||||
waitForCondition(() => popup.popupBoxObject.anchorNode == anchorNode,
|
||||
waitForCondition(() => is_visible(popup) && popup.popupBoxObject.anchorNode == anchorNode,
|
||||
() => {
|
||||
ok(true, msg);
|
||||
is_element_visible(popup, "Popup should be visible");
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
#include "nsISMILAttr.h"
|
||||
#include "nsIDocument.h"
|
||||
#include "mozilla/dom/ShadowRoot.h"
|
||||
|
||||
class nsIDOMAttr;
|
||||
class nsIDOMEventListener;
|
||||
|
||||
@ -32,11 +32,9 @@ if not CONFIG['MOZ_NATIVE_HUNSPELL']:
|
||||
FINAL_LIBRARY = 'spellchecker'
|
||||
|
||||
LOCAL_INCLUDES += [
|
||||
'/extensions/spellcheck/src',
|
||||
]
|
||||
|
||||
LOCAL_INCLUDES += [
|
||||
'/content/base/src',
|
||||
'/editor/libeditor/base',
|
||||
'/extensions/spellcheck/src',
|
||||
]
|
||||
|
||||
# Suppress warnings in third-party code.
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
#include "TextureHostBasic.h"
|
||||
#ifdef XP_MACOSX
|
||||
#include "MacIOSurfaceTextureHostBasic.h"
|
||||
#endif
|
||||
|
||||
using namespace mozilla::gl;
|
||||
using namespace mozilla::gfx;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
#include "mozilla/layers/LayersSurfaces.h"
|
||||
#include "mozilla/gfx/Types.h"
|
||||
|
||||
class gfxXlibSurface;
|
||||
#include "gfxXlibSurface.h"
|
||||
|
||||
namespace mozilla {
|
||||
namespace layers {
|
||||
|
||||
@ -3225,12 +3225,8 @@ MBoundsCheck::foldsTo(TempAllocator &alloc)
|
||||
if (index()->isConstant() && length()->isConstant()) {
|
||||
uint32_t len = length()->toConstant()->value().toInt32();
|
||||
uint32_t idx = index()->toConstant()->value().toInt32();
|
||||
if (idx + uint32_t(minimum()) < len && idx + uint32_t(maximum()) < len) {
|
||||
// This bounds check will never fail, so we can clear the Guard flag
|
||||
// and allow it to be deleted.
|
||||
setNotGuard();
|
||||
if (idx + uint32_t(minimum()) < len && idx + uint32_t(maximum()) < len)
|
||||
return index();
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
@ -479,6 +479,12 @@ ValueNumberer::visitDefinition(MDefinition *def)
|
||||
IonSpew(IonSpew_GVN, " Folded %s%u to %s%u",
|
||||
def->opName(), def->id(), sim->opName(), sim->id());
|
||||
ReplaceAllUsesWith(def, sim);
|
||||
|
||||
// The node's foldsTo said |def| can be replaced by |rep|. If |def| is a
|
||||
// guard, then either |rep| is also a guard, or a guard isn't actually
|
||||
// needed, so we can clear |def|'s guard flag and let it be deleted.
|
||||
def->setNotGuardUnchecked();
|
||||
|
||||
if (IsDead(def) && !deleteDefsRecursively(def))
|
||||
return false;
|
||||
def = sim;
|
||||
@ -495,10 +501,9 @@ ValueNumberer::visitDefinition(MDefinition *def)
|
||||
def->opName(), def->id(), rep->opName(), rep->id());
|
||||
ReplaceAllUsesWith(def, rep);
|
||||
|
||||
// This is effectively what the old GVN did. It allows isGuard()
|
||||
// instructions to be deleted if they are redundant, and the
|
||||
// replacement is not even guaranteed to have isGuard() set.
|
||||
// TODO: Clean this up (bug 1031410).
|
||||
// The node's congruentTo said |def| is congruent to |rep|, and it's
|
||||
// dominated by |rep|. If |def| is a guard, it's covered by |rep|,
|
||||
// so we can clear |def|'s guard flag and let it be deleted.
|
||||
def->setNotGuardUnchecked();
|
||||
|
||||
if (IsDead(def) && !deleteDefsRecursively(def))
|
||||
|
||||
@ -1681,8 +1681,6 @@ jit::JitActivation::markRematerializedFrames(JSTracer *trc)
|
||||
RematerializedFrame::MarkInVector(trc, e.front().value());
|
||||
}
|
||||
|
||||
#endif // JS_ION
|
||||
|
||||
AsmJSActivation::AsmJSActivation(JSContext *cx, AsmJSModule &module)
|
||||
: Activation(cx, AsmJS),
|
||||
module_(module),
|
||||
@ -1729,6 +1727,8 @@ AsmJSActivation::~AsmJSActivation()
|
||||
cx->mainThread().asmJSActivationStack_ = prevAsmJS_;
|
||||
}
|
||||
|
||||
#endif // JS_ION
|
||||
|
||||
InterpreterFrameIterator &
|
||||
InterpreterFrameIterator::operator++()
|
||||
{
|
||||
@ -1782,31 +1782,44 @@ ActivationIterator::settle()
|
||||
JS::ProfilingFrameIterator::ProfilingFrameIterator(JSRuntime *rt, const RegisterState &state)
|
||||
: activation_(rt->mainThread.asmJSActivationStack())
|
||||
{
|
||||
#ifdef JS_ION
|
||||
if (!activation_)
|
||||
return;
|
||||
|
||||
static_assert(sizeof(AsmJSProfilingFrameIterator) <= StorageSpace, "Need to increase storage");
|
||||
new (storage_.addr()) AsmJSProfilingFrameIterator(*activation_, state);
|
||||
settle();
|
||||
#else
|
||||
JS_ASSERT(!activation_);
|
||||
#endif
|
||||
}
|
||||
|
||||
JS::ProfilingFrameIterator::~ProfilingFrameIterator()
|
||||
{
|
||||
#ifdef JS_ION
|
||||
if (!done())
|
||||
iter().~AsmJSProfilingFrameIterator();
|
||||
#else
|
||||
JS_ASSERT(done());
|
||||
#endif
|
||||
}
|
||||
|
||||
void
|
||||
JS::ProfilingFrameIterator::operator++()
|
||||
{
|
||||
#ifdef JS_ION
|
||||
JS_ASSERT(!done());
|
||||
++iter();
|
||||
settle();
|
||||
#else
|
||||
MOZ_CRASH("Shouldn't have any frames");
|
||||
#endif
|
||||
}
|
||||
|
||||
void
|
||||
JS::ProfilingFrameIterator::settle()
|
||||
{
|
||||
#ifdef JS_ION
|
||||
while (iter().done()) {
|
||||
iter().~AsmJSProfilingFrameIterator();
|
||||
activation_ = activation_->prevAsmJS();
|
||||
@ -1814,32 +1827,51 @@ JS::ProfilingFrameIterator::settle()
|
||||
return;
|
||||
new (storage_.addr()) AsmJSProfilingFrameIterator(*activation_);
|
||||
}
|
||||
#else
|
||||
MOZ_CRASH("Shouldn't have any frames");
|
||||
#endif
|
||||
}
|
||||
|
||||
JS::ProfilingFrameIterator::Kind
|
||||
JS::ProfilingFrameIterator::kind() const
|
||||
{
|
||||
#ifdef JS_ION
|
||||
return iter().kind();
|
||||
#else
|
||||
MOZ_CRASH("Shouldn't have any frames");
|
||||
#endif
|
||||
}
|
||||
|
||||
JSAtom *
|
||||
JS::ProfilingFrameIterator::functionDisplayAtom() const
|
||||
{
|
||||
#ifdef JS_ION
|
||||
JS_ASSERT(kind() == Function);
|
||||
return iter().functionDisplayAtom();
|
||||
#else
|
||||
MOZ_CRASH("Shouldn't have any frames");
|
||||
#endif
|
||||
}
|
||||
|
||||
const char *
|
||||
JS::ProfilingFrameIterator::functionFilename() const
|
||||
{
|
||||
#ifdef JS_ION
|
||||
JS_ASSERT(kind() == Function);
|
||||
return iter().functionFilename();
|
||||
#else
|
||||
MOZ_CRASH("Shouldn't have any frames");
|
||||
#endif
|
||||
}
|
||||
|
||||
const char *
|
||||
JS::ProfilingFrameIterator::nonFunctionDescription() const
|
||||
{
|
||||
#ifdef JS_ION
|
||||
JS_ASSERT(kind() != Function);
|
||||
return iter().nonFunctionDescription();
|
||||
#else
|
||||
MOZ_CRASH("Shouldn't have any frames");
|
||||
#endif
|
||||
}
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ asserts(6-12) load 265986-1.html # Bug 512405
|
||||
load 265999-1.html
|
||||
load 266222-1.html
|
||||
asserts(1-7) load 266360-1.html # bug 576358
|
||||
load 266445-1.html
|
||||
asserts(2) load 266445-1.html
|
||||
load 268157-1.html
|
||||
load 269566-1.html
|
||||
load 272647-1.html
|
||||
|
||||
@ -772,17 +772,17 @@ public:
|
||||
/**
|
||||
* Get the selection caret, if it exists. AddRefs it.
|
||||
*/
|
||||
virtual NS_HIDDEN_(already_AddRefed<mozilla::SelectionCarets>) GetSelectionCarets() const = 0;
|
||||
virtual already_AddRefed<mozilla::SelectionCarets> GetSelectionCarets() const = 0;
|
||||
|
||||
/**
|
||||
* Returns the start part of selection caret element of the presshell.
|
||||
*/
|
||||
virtual NS_HIDDEN_(mozilla::dom::Element*) GetSelectionCaretsStartElement() const = 0;
|
||||
virtual mozilla::dom::Element* GetSelectionCaretsStartElement() const = 0;
|
||||
|
||||
/**
|
||||
* Returns the end part of selection caret element of the presshell.
|
||||
*/
|
||||
virtual NS_HIDDEN_(mozilla::dom::Element*) GetSelectionCaretsEndElement() const = 0;
|
||||
virtual mozilla::dom::Element* GetSelectionCaretsEndElement() const = 0;
|
||||
|
||||
/**
|
||||
* Get the caret, if it exists. AddRefs it.
|
||||
|
||||
@ -3591,7 +3591,8 @@ GetPercentHeight(const nsStyleCoord& aStyle,
|
||||
if (minh > h)
|
||||
h = minh;
|
||||
} else {
|
||||
NS_ASSERTION(pos->mMinHeight.HasPercent(),
|
||||
NS_ASSERTION(pos->mMinHeight.HasPercent() ||
|
||||
pos->mMinHeight.GetUnit() == eStyleUnit_Auto,
|
||||
"unknown min-height unit");
|
||||
}
|
||||
|
||||
@ -3706,7 +3707,19 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext *aRenderingContext,
|
||||
nscoord maxw;
|
||||
bool haveFixedMaxWidth = GetAbsoluteCoord(styleMaxWidth, maxw);
|
||||
nscoord minw;
|
||||
bool haveFixedMinWidth = GetAbsoluteCoord(styleMinWidth, minw);
|
||||
|
||||
// Treat "min-width: auto" as 0.
|
||||
bool haveFixedMinWidth;
|
||||
if (eStyleUnit_Auto == styleMinWidth.GetUnit()) {
|
||||
// NOTE: Technically, "auto" is supposed to behave like "min-content" on
|
||||
// flex items. However, we don't need to worry about that here, because
|
||||
// flex items' min-sizes are intentionally ignored until the flex
|
||||
// container explicitly considers them during space distribution.
|
||||
minw = 0;
|
||||
haveFixedMinWidth = true;
|
||||
} else {
|
||||
haveFixedMinWidth = GetAbsoluteCoord(styleMinWidth, minw);
|
||||
}
|
||||
|
||||
// If we have a specified width (or a specified 'min-width' greater
|
||||
// than the specified 'max-width', which works out to the same thing),
|
||||
@ -3740,12 +3753,18 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext *aRenderingContext,
|
||||
|
||||
// Handle elements with an intrinsic ratio (or size) and a specified
|
||||
// height, min-height, or max-height.
|
||||
// NOTE: We treat "min-height:auto" as "0" for the purpose of this code,
|
||||
// since that's what it means in all cases except for on flex items -- and
|
||||
// even there, we're supposed to ignore it (i.e. treat it as 0) until the
|
||||
// flex container explicitly considers it.
|
||||
const nsStyleCoord &styleHeight = stylePos->mHeight;
|
||||
const nsStyleCoord &styleMinHeight = stylePos->mMinHeight;
|
||||
const nsStyleCoord &styleMaxHeight = stylePos->mMaxHeight;
|
||||
|
||||
if (styleHeight.GetUnit() != eStyleUnit_Auto ||
|
||||
!(styleMinHeight.GetUnit() == eStyleUnit_Coord &&
|
||||
styleMinHeight.GetCoordValue() == 0) ||
|
||||
!(styleMinHeight.GetUnit() == eStyleUnit_Auto ||
|
||||
(styleMinHeight.GetUnit() == eStyleUnit_Coord &&
|
||||
styleMinHeight.GetCoordValue() == 0)) ||
|
||||
styleMaxHeight.GetUnit() != eStyleUnit_None) {
|
||||
|
||||
nsSize ratio = aFrame->GetIntrinsicRatio();
|
||||
@ -4161,20 +4180,23 @@ nsLayoutUtils::ComputeSizeWithIntrinsicDimensions(
|
||||
aFrame, aCBSize.width, boxSizingAdjust.width,
|
||||
boxSizingToMarginEdgeWidth, stylePos->mMaxWidth);
|
||||
} else {
|
||||
// NOTE: Flex items ignore their min & max sizing properties in their
|
||||
// flex container's main-axis. (Those properties get applied later in
|
||||
// the flexbox algorithm.)
|
||||
maxWidth = nscoord_MAX;
|
||||
}
|
||||
|
||||
if (!(isFlexItem && isHorizontalFlexItem)) {
|
||||
// NOTE: Flex items ignore their min & max sizing properties in their
|
||||
// flex container's main-axis. (Those properties get applied later in
|
||||
// the flexbox algorithm.)
|
||||
if (stylePos->mMinWidth.GetUnit() != eStyleUnit_Auto &&
|
||||
!(isFlexItem && isHorizontalFlexItem)) {
|
||||
minWidth = nsLayoutUtils::ComputeWidthValue(aRenderingContext,
|
||||
aFrame, aCBSize.width, boxSizingAdjust.width,
|
||||
boxSizingToMarginEdgeWidth, stylePos->mMinWidth);
|
||||
} else {
|
||||
// NOTE: Flex items ignore their min & max sizing properties in their
|
||||
// flex container's main-axis. (Those properties get applied later in
|
||||
// the flexbox algorithm.)
|
||||
// Treat "min-width: auto" as 0.
|
||||
// NOTE: Technically, "auto" is supposed to behave like "min-content" on
|
||||
// flex items. However, we don't need to worry about that here, because
|
||||
// flex items' min-sizes are intentionally ignored until the flex
|
||||
// container explicitly considers them during space distribution.
|
||||
minWidth = 0;
|
||||
}
|
||||
|
||||
|
||||
@ -224,9 +224,9 @@ public:
|
||||
virtual void SetMayHaveTouchCaret(bool aSet) MOZ_OVERRIDE;
|
||||
virtual bool MayHaveTouchCaret() MOZ_OVERRIDE;
|
||||
// selection caret
|
||||
virtual NS_HIDDEN_(already_AddRefed<mozilla::SelectionCarets>) GetSelectionCarets() const MOZ_OVERRIDE;
|
||||
virtual NS_HIDDEN_(mozilla::dom::Element*) GetSelectionCaretsStartElement() const MOZ_OVERRIDE;
|
||||
virtual NS_HIDDEN_(mozilla::dom::Element*) GetSelectionCaretsEndElement() const MOZ_OVERRIDE;
|
||||
virtual already_AddRefed<mozilla::SelectionCarets> GetSelectionCarets() const MOZ_OVERRIDE;
|
||||
virtual mozilla::dom::Element* GetSelectionCaretsStartElement() const MOZ_OVERRIDE;
|
||||
virtual mozilla::dom::Element* GetSelectionCaretsEndElement() const MOZ_OVERRIDE;
|
||||
// caret handling
|
||||
virtual already_AddRefed<nsCaret> GetCaret() const MOZ_OVERRIDE;
|
||||
virtual void MaybeInvalidateCaretPosition() MOZ_OVERRIDE;
|
||||
|
||||
20
layout/generic/crashtests/946167-1.html
Normal file
20
layout/generic/crashtests/946167-1.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
// Create a bunch of nested flex containers:
|
||||
var parentNode = document.body;
|
||||
var depth = 50;
|
||||
for (var i = 0; i < depth; i++) {
|
||||
var childNode = document.createElement("div");
|
||||
childNode.style.display = "flex";
|
||||
parentNode.appendChild(childNode);
|
||||
parentNode = childNode;
|
||||
}
|
||||
|
||||
// Add some text in the innermost child:
|
||||
childNode.innerHTML = "Text";
|
||||
|
||||
// Force reflow:
|
||||
var height = document.body.children[0].offsetHeight;
|
||||
</script>
|
||||
@ -531,6 +531,7 @@ test-pref(layout.css.sticky.enabled,true) load 915475.xhtml
|
||||
load 927558.html
|
||||
load 943509-1.html
|
||||
asserts(3-6) load 944909-1.html
|
||||
load 946167-1.html
|
||||
test-pref(layout.css.sticky.enabled,true) load 949932.html
|
||||
load 973701-1.xhtml
|
||||
load 973701-2.xhtml
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
#include "nsLayoutUtils.h"
|
||||
#include "nsPlaceholderFrame.h"
|
||||
#include "nsPresContext.h"
|
||||
#include "nsRenderingContext.h"
|
||||
#include "nsStyleContext.h"
|
||||
#include "prlog.h"
|
||||
#include <algorithm>
|
||||
@ -258,11 +259,10 @@ class nsFlexContainerFrame::FlexItem : public LinkedListElement<FlexItem>
|
||||
{
|
||||
public:
|
||||
// Normal constructor:
|
||||
FlexItem(nsIFrame* aChildFrame,
|
||||
FlexItem(nsHTMLReflowState& aFlexItemReflowState,
|
||||
float aFlexGrow, float aFlexShrink, nscoord aMainBaseSize,
|
||||
nscoord aMainMinSize, nscoord aMainMaxSize,
|
||||
nscoord aCrossMinSize, nscoord aCrossMaxSize,
|
||||
nsMargin aMargin, nsMargin aBorderPadding,
|
||||
const FlexboxAxisTracker& aAxisTracker);
|
||||
|
||||
// Simplified constructor, to be used only for generating "struts":
|
||||
@ -272,7 +272,11 @@ public:
|
||||
nsIFrame* Frame() const { return mFrame; }
|
||||
nscoord GetFlexBaseSize() const { return mFlexBaseSize; }
|
||||
|
||||
nscoord GetMainMinSize() const { return mMainMinSize; }
|
||||
nscoord GetMainMinSize() const {
|
||||
MOZ_ASSERT(!mNeedsMinSizeAutoResolution,
|
||||
"Someone's using an unresolved 'auto' main min-size");
|
||||
return mMainMinSize;
|
||||
}
|
||||
nscoord GetMainMaxSize() const { return mMainMaxSize; }
|
||||
|
||||
// Note: These return the main-axis position and size of our *content box*.
|
||||
@ -323,6 +327,11 @@ public:
|
||||
// cross axis).
|
||||
bool IsStretched() const { return mIsStretched; }
|
||||
|
||||
// Indicates whether we need to resolve an 'auto' value for the main-axis
|
||||
// min-[width|height] property.
|
||||
bool NeedsMinSizeAutoResolution() const
|
||||
{ return mNeedsMinSizeAutoResolution; }
|
||||
|
||||
// Indicates whether this item is a "strut" left behind by an element with
|
||||
// visibility:collapse.
|
||||
bool IsStrut() const { return mIsStrut; }
|
||||
@ -418,6 +427,28 @@ public:
|
||||
|
||||
// Setters
|
||||
// =======
|
||||
// Helper to set the resolved value of min-[width|height]:auto for the main
|
||||
// axis. (Should only be used if NeedsMinSizeAutoResolution() returns true.)
|
||||
void UpdateMainMinSize(nscoord aNewMinSize)
|
||||
{
|
||||
NS_ASSERTION(aNewMinSize >= 0,
|
||||
"How did we end up with a negative min-size?");
|
||||
MOZ_ASSERT(mMainMaxSize >= aNewMinSize,
|
||||
"Should only use this function for resolving min-size:auto, "
|
||||
"and main max-size should be an upper-bound for resolved val");
|
||||
MOZ_ASSERT(mNeedsMinSizeAutoResolution &&
|
||||
(mMainMinSize == 0 || mFrame->IsThemed(mFrame->StyleDisplay())),
|
||||
"Should only use this function for resolving min-size:auto, "
|
||||
"so we shouldn't already have a nonzero min-size established "
|
||||
"(unless it's a themed-widget-imposed minimum size)");
|
||||
|
||||
if (aNewMinSize > mMainMinSize) {
|
||||
mMainMinSize = aNewMinSize;
|
||||
// Also clamp main-size to be >= new min-size:
|
||||
mMainSize = std::max(mMainSize, aNewMinSize);
|
||||
}
|
||||
mNeedsMinSizeAutoResolution = false;
|
||||
}
|
||||
|
||||
// This sets our flex base size, and then sets our main size to the
|
||||
// resulting "hypothetical main size" (the base size clamped to our
|
||||
@ -524,6 +555,10 @@ public:
|
||||
uint32_t GetNumAutoMarginsInAxis(AxisOrientationType aAxis) const;
|
||||
|
||||
protected:
|
||||
// Helper called by the constructor, to set mNeedsMinSizeAutoResolution:
|
||||
void CheckForMinSizeAuto(const nsHTMLReflowState& aFlexItemReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker);
|
||||
|
||||
// Our frame:
|
||||
nsIFrame* const mFrame;
|
||||
|
||||
@ -534,10 +569,13 @@ protected:
|
||||
const nsMargin mBorderPadding;
|
||||
nsMargin mMargin; // non-const because we need to resolve auto margins
|
||||
|
||||
// These are non-const so that we can lazily update them with the item's
|
||||
// intrinsic size (obtained via a "measuring" reflow), when necessary.
|
||||
// (e.g. for "flex-basis:auto;height:auto" & "min-height:auto")
|
||||
nscoord mFlexBaseSize;
|
||||
nscoord mMainMinSize;
|
||||
nscoord mMainMaxSize;
|
||||
|
||||
const nscoord mMainMinSize;
|
||||
const nscoord mMainMaxSize;
|
||||
const nscoord mCrossMinSize;
|
||||
const nscoord mCrossMaxSize;
|
||||
|
||||
@ -564,6 +602,10 @@ protected:
|
||||
bool mIsStretched; // See IsStretched() documentation
|
||||
bool mIsStrut; // Is this item a "strut" left behind by an element
|
||||
// with visibility:collapse?
|
||||
|
||||
// Does this item need to resolve a min-[width|height]:auto (in main-axis).
|
||||
bool mNeedsMinSizeAutoResolution;
|
||||
|
||||
uint8_t mAlignSelf; // My "align-self" computed value (with "auto"
|
||||
// swapped out for parent"s "align-items" value,
|
||||
// in our constructor).
|
||||
@ -999,12 +1041,10 @@ nsFlexContainerFrame::GenerateFlexItemForChild(
|
||||
}
|
||||
|
||||
// Construct the flex item!
|
||||
FlexItem* item = new FlexItem(aChildFrame,
|
||||
FlexItem* item = new FlexItem(childRS,
|
||||
flexGrow, flexShrink, flexBaseSize,
|
||||
mainMinSize, mainMaxSize,
|
||||
crossMinSize, crossMaxSize,
|
||||
childRS.ComputedPhysicalMargin(),
|
||||
childRS.ComputedPhysicalBorderPadding(),
|
||||
aAxisTracker);
|
||||
|
||||
// If we're inflexible, we can just freeze to our hypothetical main-size
|
||||
@ -1014,40 +1054,332 @@ nsFlexContainerFrame::GenerateFlexItemForChild(
|
||||
item->Freeze();
|
||||
}
|
||||
|
||||
// Resolve "flex-basis:auto" and/or "min-[width|height]:auto" (which might
|
||||
// require us to reflow the item to measure content height)
|
||||
ResolveAutoFlexBasisAndMinSize(aPresContext, *item,
|
||||
childRS, aAxisTracker);
|
||||
return item;
|
||||
}
|
||||
|
||||
// Static helper-functions for ResolveAutoFlexBasisAndMinSize():
|
||||
// -------------------------------------------------------------
|
||||
// Indicates whether the cross-size property is set to something definite.
|
||||
// The logic here should be similar to the logic for isAutoWidth/isAutoHeight
|
||||
// in nsLayoutUtils::ComputeSizeWithIntrinsicDimensions().
|
||||
static bool
|
||||
IsCrossSizeDefinite(const nsHTMLReflowState& aItemReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
{
|
||||
const nsStylePosition* pos = aItemReflowState.mStylePosition;
|
||||
if (IsAxisHorizontal(aAxisTracker.GetCrossAxis())) {
|
||||
return pos->mWidth.GetUnit() != eStyleUnit_Auto;
|
||||
}
|
||||
// else, vertical. (We need to use IsAutoHeight() to catch e.g. %-height
|
||||
// applied to indefinite-height containing block, which counts as auto.)
|
||||
nscoord cbHeight = aItemReflowState.mCBReflowState->ComputedHeight();
|
||||
return !nsLayoutUtils::IsAutoHeight(pos->mHeight, cbHeight);
|
||||
}
|
||||
|
||||
// If aFlexItem has a definite cross size, this function returns it, for usage
|
||||
// (in combination with an intrinsic ratio) for resolving the item's main size
|
||||
// or main min-size.
|
||||
//
|
||||
// The parameter "aMinSizeFallback" indicates whether we should fall back to
|
||||
// returning the cross min-size, when the cross size is indefinite. (This param
|
||||
// should be set IFF the caller intends to resolve the main min-size.) If this
|
||||
// param is true, then this function is guaranteed to return a definite value
|
||||
// (i.e. not NS_AUTOHEIGHT, excluding cases where huge sizes are involved).
|
||||
//
|
||||
// XXXdholbert the min-size behavior here is based on my understanding in
|
||||
// http://lists.w3.org/Archives/Public/www-style/2014Jul/0053.html
|
||||
// If my understanding there ends up being wrong, we'll need to update this.
|
||||
static nscoord
|
||||
CrossSizeToUseWithRatio(const FlexItem& aFlexItem,
|
||||
const nsHTMLReflowState& aItemReflowState,
|
||||
bool aMinSizeFallback,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
{
|
||||
if (aFlexItem.IsStretched()) {
|
||||
// Definite cross-size, imposed via 'align-self:stretch' & flex container.
|
||||
return aFlexItem.GetCrossSize();
|
||||
}
|
||||
|
||||
if (IsCrossSizeDefinite(aItemReflowState, aAxisTracker)) {
|
||||
// Definite cross size.
|
||||
return GET_CROSS_COMPONENT(aAxisTracker,
|
||||
aItemReflowState.ComputedWidth(),
|
||||
aItemReflowState.ComputedHeight());
|
||||
}
|
||||
|
||||
if (aMinSizeFallback) {
|
||||
// Indefinite cross-size, and we're resolving main min-size, so we'll fall
|
||||
// back to ussing the cross min-size (which should be definite).
|
||||
return GET_CROSS_COMPONENT(aAxisTracker,
|
||||
aItemReflowState.ComputedMinWidth(),
|
||||
aItemReflowState.ComputedMinHeight());
|
||||
}
|
||||
|
||||
// Indefinite cross-size.
|
||||
return NS_AUTOHEIGHT;
|
||||
}
|
||||
|
||||
// XXX This macro shamelessly stolen from nsLayoutUtils.cpp.
|
||||
// (Maybe it should be exposed via a nsLayoutUtils method?)
|
||||
#define MULDIV(a,b,c) (nscoord(int64_t(a) * int64_t(b) / int64_t(c)))
|
||||
|
||||
// Convenience function; returns a main-size, given a cross-size and an
|
||||
// intrinsic ratio. The intrinsic ratio must not have 0 in its cross-axis
|
||||
// component (or else we'll divide by 0).
|
||||
static nscoord
|
||||
MainSizeFromAspectRatio(nscoord aCrossSize,
|
||||
const nsSize& aIntrinsicRatio,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
{
|
||||
MOZ_ASSERT(aAxisTracker.GetCrossComponent(aIntrinsicRatio) != 0,
|
||||
"Invalid ratio; will divide by 0! Caller should've checked...");
|
||||
|
||||
if (IsAxisHorizontal(aAxisTracker.GetCrossAxis())) {
|
||||
// cross axis horiz --> aCrossSize is a width. Converting to height.
|
||||
return MULDIV(aCrossSize, aIntrinsicRatio.height, aIntrinsicRatio.width);
|
||||
}
|
||||
// cross axis vert --> aCrossSize is a height. Converting to width.
|
||||
return MULDIV(aCrossSize, aIntrinsicRatio.width, aIntrinsicRatio.height);
|
||||
}
|
||||
|
||||
// Partially resolves "min-[width|height]:auto" and returns the resulting value.
|
||||
// By "partially", I mean we don't consider the min-content size (but we do
|
||||
// consider flex-basis, main max-size, and the intrinsic aspect ratio).
|
||||
// The caller is responsible for computing & considering the min-content size
|
||||
// in combination with the partially-resolved value that this function returns.
|
||||
//
|
||||
// Spec reference: http://dev.w3.org/csswg/css-flexbox/#min-size-auto
|
||||
static nscoord
|
||||
PartiallyResolveAutoMinSize(const FlexItem& aFlexItem,
|
||||
const nsHTMLReflowState& aItemReflowState,
|
||||
const nsSize& aIntrinsicRatio,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
{
|
||||
MOZ_ASSERT(aFlexItem.NeedsMinSizeAutoResolution(),
|
||||
"only call for FlexItems that need min-size auto resolution");
|
||||
|
||||
nscoord minMainSize = nscoord_MAX; // Intentionally huge; we'll shrink it
|
||||
// from here, w/ std::min().
|
||||
|
||||
// We need the smallest of:
|
||||
// * the used flex-basis, if the computed flex-basis was 'auto':
|
||||
// XXXdholbert ('auto' might be renamed to 'main-size'; see bug 1032922)
|
||||
if (eStyleUnit_Auto ==
|
||||
aItemReflowState.mStylePosition->mFlexBasis.GetUnit() &&
|
||||
aFlexItem.GetFlexBaseSize() != NS_AUTOHEIGHT) {
|
||||
// NOTE: We skip this if the flex base size depends on content & isn't yet
|
||||
// resolved. This is OK, because the caller is responsible for computing
|
||||
// the min-content height and min()'ing it with the value we return, which
|
||||
// is equivalent to what would happen if we min()'d that at this point.
|
||||
minMainSize = std::min(minMainSize, aFlexItem.GetFlexBaseSize());
|
||||
}
|
||||
|
||||
// * the computed max-width (max-height), if that value is definite:
|
||||
nscoord maxSize =
|
||||
GET_MAIN_COMPONENT(aAxisTracker,
|
||||
aItemReflowState.ComputedMaxWidth(),
|
||||
aItemReflowState.ComputedMaxHeight());
|
||||
if (maxSize != NS_UNCONSTRAINEDSIZE) {
|
||||
minMainSize = std::min(minMainSize, maxSize);
|
||||
}
|
||||
|
||||
// * if the item has no intrinsic aspect ratio, its min-content size:
|
||||
// --- SKIPPING THIS IN THIS FUNCTION --- caller's responsibility.
|
||||
|
||||
// * if the item has an intrinsic aspect ratio, the width (height) calculated
|
||||
// from the aspect ratio and any definite size constraints in the opposite
|
||||
// dimension.
|
||||
if (aAxisTracker.GetCrossComponent(aIntrinsicRatio) != 0) {
|
||||
// We have a usable aspect ratio. (not going to divide by 0)
|
||||
const bool useMinSizeIfCrossSizeIsIndefinite = true;
|
||||
nscoord crossSizeToUseWithRatio =
|
||||
CrossSizeToUseWithRatio(aFlexItem, aItemReflowState,
|
||||
useMinSizeIfCrossSizeIsIndefinite,
|
||||
aAxisTracker);
|
||||
nscoord minMainSizeFromRatio =
|
||||
MainSizeFromAspectRatio(crossSizeToUseWithRatio,
|
||||
aIntrinsicRatio, aAxisTracker);
|
||||
minMainSize = std::min(minMainSize, minMainSizeFromRatio);
|
||||
}
|
||||
|
||||
return minMainSize;
|
||||
}
|
||||
|
||||
// Resolves flex-basis:auto, using the given intrinsic ratio and the flex
|
||||
// item's cross size. On success, updates the flex item with its resolved
|
||||
// flex-basis and returns true. On failure (e.g. if the ratio is invalid or
|
||||
// the cross-size is indefinite), returns false.
|
||||
static bool
|
||||
ResolveAutoFlexBasisFromRatio(FlexItem& aFlexItem,
|
||||
const nsHTMLReflowState& aItemReflowState,
|
||||
const nsSize& aIntrinsicRatio,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
{
|
||||
MOZ_ASSERT(NS_AUTOHEIGHT == aFlexItem.GetFlexBaseSize(),
|
||||
"Should only be called to resolve an 'auto' flex-basis");
|
||||
// If the flex item has ...
|
||||
// - an intrinsic aspect ratio,
|
||||
// - a [used] flex-basis of 'main-size' [auto?] [We have this, if we're here.]
|
||||
// - a definite cross size
|
||||
// then the flex base size is calculated from its inner cross size and the
|
||||
// flex item’s intrinsic aspect ratio.
|
||||
if (aAxisTracker.GetCrossComponent(aIntrinsicRatio) != 0) {
|
||||
// We have a usable aspect ratio. (not going to divide by 0)
|
||||
const bool useMinSizeIfCrossSizeIsIndefinite = false;
|
||||
nscoord crossSizeToUseWithRatio =
|
||||
CrossSizeToUseWithRatio(aFlexItem, aItemReflowState,
|
||||
useMinSizeIfCrossSizeIsIndefinite,
|
||||
aAxisTracker);
|
||||
if (crossSizeToUseWithRatio != NS_AUTOHEIGHT) {
|
||||
// We have a definite cross-size
|
||||
nscoord mainSizeFromRatio =
|
||||
MainSizeFromAspectRatio(crossSizeToUseWithRatio,
|
||||
aIntrinsicRatio, aAxisTracker);
|
||||
aFlexItem.SetFlexBaseSizeAndMainSize(mainSizeFromRatio);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Note: If & when we handle "min-height: min-content" for flex items,
|
||||
// we may want to resolve that in this function, too.
|
||||
void
|
||||
nsFlexContainerFrame::
|
||||
ResolveFlexItemMaxContentSizing(nsPresContext* aPresContext,
|
||||
FlexItem& aFlexItem,
|
||||
const nsHTMLReflowState& aParentReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
ResolveAutoFlexBasisAndMinSize(nsPresContext* aPresContext,
|
||||
FlexItem& aFlexItem,
|
||||
const nsHTMLReflowState& aItemReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
{
|
||||
if (IsAxisHorizontal(aAxisTracker.GetMainAxis())) {
|
||||
// Nothing to do -- this function is only for measuring flex items
|
||||
// in a vertical flex container.
|
||||
// (Note: We should never have a used flex-basis of "auto" if our main axis
|
||||
// is horizontal; width values should always be resolvable without reflow.)
|
||||
const bool isMainSizeAuto = (!IsAxisHorizontal(aAxisTracker.GetMainAxis()) &&
|
||||
NS_AUTOHEIGHT == aFlexItem.GetFlexBaseSize());
|
||||
|
||||
const bool isMainMinSizeAuto = aFlexItem.NeedsMinSizeAutoResolution();
|
||||
|
||||
if (!isMainSizeAuto && !isMainMinSizeAuto) {
|
||||
// Nothing to do; this function is only needed for flex items
|
||||
// with a used flex-basis of "auto" or a min-main-size of "auto".
|
||||
return;
|
||||
}
|
||||
|
||||
if (NS_AUTOHEIGHT != aFlexItem.GetFlexBaseSize()) {
|
||||
// Nothing to do; this function's only relevant for flex items
|
||||
// with a base size of "auto" (or equivalent).
|
||||
// XXXdholbert If & when we handle "min-height: min-content" for flex items,
|
||||
// we'll want to resolve that in this function, too.
|
||||
return;
|
||||
// We may be about to do computations based on our item's cross-size
|
||||
// (e.g. using it as a contstraint when measuring our content in the
|
||||
// main axis, or using it with the intrinsic ratio to obtain a main size).
|
||||
// BEFORE WE DO THAT, we need let the item "pre-stretch" its cross size (if
|
||||
// it's got 'align-self:stretch'), for a certain case where the spec says
|
||||
// the stretched cross size is considered "definite". That case is if we
|
||||
// have a single-line (nowrap) flex container which itself has a definite
|
||||
// cross-size. Otherwise, we'll wait to do stretching, since (in other
|
||||
// cases) we don't know how much the item should stretch yet.
|
||||
const nsHTMLReflowState* flexContainerRS = aItemReflowState.parentReflowState;
|
||||
MOZ_ASSERT(flexContainerRS,
|
||||
"flex item's reflow state should have ptr to container's state");
|
||||
if (NS_STYLE_FLEX_WRAP_NOWRAP == flexContainerRS->mStylePosition->mFlexWrap) {
|
||||
// XXXdholbert Maybe this should share logic with ComputeCrossSize()...
|
||||
// Alternately, maybe tentative container cross size should be passed down.
|
||||
nscoord containerCrossSize =
|
||||
GET_CROSS_COMPONENT(aAxisTracker,
|
||||
flexContainerRS->ComputedWidth(),
|
||||
flexContainerRS->ComputedHeight());
|
||||
// Is container's cross size "definite"?
|
||||
// (Container's cross size is definite if cross-axis is horizontal, or if
|
||||
// cross-axis is vertical and the cross-size is not NS_AUTOHEIGHT.)
|
||||
if (IsAxisHorizontal(aAxisTracker.GetCrossAxis()) ||
|
||||
containerCrossSize != NS_AUTOHEIGHT) {
|
||||
aFlexItem.ResolveStretchedCrossSize(containerCrossSize, aAxisTracker);
|
||||
}
|
||||
}
|
||||
|
||||
// If we get here, we're vertical and our main size ended up being
|
||||
// unconstrained. We need to use our "max-content" height, which is what we
|
||||
// get from reflowing into our available width.
|
||||
// Note: This has to come *after* we construct the FlexItem, since we
|
||||
// invoke at least one convenience method (ResolveStretchedCrossSize) which
|
||||
// requires a FlexItem.
|
||||
// We'll need the intrinsic ratio (if there is one), regardless of whether
|
||||
// we're resolving min-[width|height]:auto or flex-basis:auto.
|
||||
const nsSize ratio = aFlexItem.Frame()->GetIntrinsicRatio();
|
||||
|
||||
// Give the item a special reflow with "mIsFlexContainerMeasuringHeight"
|
||||
// set. This tells it to behave as if it had "height: auto", regardless
|
||||
// of what the "height" property is actually set to.
|
||||
nscoord resolvedMinSize; // (only set/used if isMainMinSizeAuto==true)
|
||||
bool minSizeNeedsToMeasureContent = false; // assume the best
|
||||
if (isMainMinSizeAuto) {
|
||||
// Resolve the min-size, except for considering the min-content size.
|
||||
// (We'll consider that later, if we need to.)
|
||||
resolvedMinSize = PartiallyResolveAutoMinSize(aFlexItem, aItemReflowState,
|
||||
ratio, aAxisTracker);
|
||||
if (resolvedMinSize > 0 &&
|
||||
aAxisTracker.GetCrossComponent(ratio) == 0) {
|
||||
// We don't have a usable aspect ratio, so we need to consider our
|
||||
// min-content size as another candidate min-size, which we'll have to
|
||||
// min() with the current resolvedMinSize.
|
||||
// (If resolvedMinSize were already at 0, we could skip this measurement
|
||||
// because it can't go any lower. But it's not 0, so we need it.)
|
||||
minSizeNeedsToMeasureContent = true;
|
||||
}
|
||||
}
|
||||
|
||||
bool flexBasisNeedsToMeasureContent = false; // assume the best
|
||||
if (isMainSizeAuto) {
|
||||
if (!ResolveAutoFlexBasisFromRatio(aFlexItem, aItemReflowState,
|
||||
ratio, aAxisTracker)) {
|
||||
flexBasisNeedsToMeasureContent = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Measure content, if needed (w/ intrinsic-width method or a reflow)
|
||||
if (minSizeNeedsToMeasureContent || flexBasisNeedsToMeasureContent) {
|
||||
if (IsAxisHorizontal(aAxisTracker.GetMainAxis())) {
|
||||
nsRefPtr<nsRenderingContext> rctx =
|
||||
aPresContext->PresShell()->CreateReferenceRenderingContext();
|
||||
if (minSizeNeedsToMeasureContent) {
|
||||
resolvedMinSize = std::min(resolvedMinSize, aFlexItem.Frame()->GetMinWidth(rctx));
|
||||
}
|
||||
NS_ASSERTION(!flexBasisNeedsToMeasureContent,
|
||||
"flex-basis:auto should have been resolved in the "
|
||||
"reflow state, for horizontal flexbox. It shouldn't need "
|
||||
"special handling here");
|
||||
} else {
|
||||
// If this item is flexible (vertically), or if we're measuring the
|
||||
// 'auto' min-height and our main-size is something else, then we assume
|
||||
// that the computed-height we're reflowing with now could be different
|
||||
// from the one we'll use for this flex item's "actual" reflow later on.
|
||||
// In that case, we need to be sure the flex item treats this as a
|
||||
// vertical resize, even though none of its ancestors are necessarily
|
||||
// being vertically resized.
|
||||
// (Note: We don't have to do this for width, because InitResizeFlags
|
||||
// will always turn on mHResize on when it sees that the computed width
|
||||
// is different from current width, and that's all we need.)
|
||||
bool forceVerticalResizeForMeasuringReflow =
|
||||
!aFlexItem.IsFrozen() || // Is the item flexible?
|
||||
!flexBasisNeedsToMeasureContent; // Are we *only* measuring it for
|
||||
// 'min-height:auto'?
|
||||
|
||||
nscoord contentHeight =
|
||||
MeasureFlexItemContentHeight(aPresContext, aFlexItem,
|
||||
forceVerticalResizeForMeasuringReflow,
|
||||
*flexContainerRS);
|
||||
if (minSizeNeedsToMeasureContent) {
|
||||
resolvedMinSize = std::min(resolvedMinSize, contentHeight);
|
||||
}
|
||||
if (flexBasisNeedsToMeasureContent) {
|
||||
aFlexItem.SetFlexBaseSizeAndMainSize(contentHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isMainMinSizeAuto) {
|
||||
aFlexItem.UpdateMainMinSize(resolvedMinSize);
|
||||
}
|
||||
}
|
||||
|
||||
nscoord
|
||||
nsFlexContainerFrame::
|
||||
MeasureFlexItemContentHeight(nsPresContext* aPresContext,
|
||||
FlexItem& aFlexItem,
|
||||
bool aForceVerticalResizeForMeasuringReflow,
|
||||
const nsHTMLReflowState& aParentReflowState)
|
||||
{
|
||||
// Set up a reflow state for measuring the flex item's auto-height:
|
||||
nsHTMLReflowState
|
||||
childRSForMeasuringHeight(aPresContext, aParentReflowState,
|
||||
aFlexItem.Frame(),
|
||||
@ -1057,32 +1389,12 @@ nsFlexContainerFrame::
|
||||
childRSForMeasuringHeight.mFlags.mIsFlexContainerMeasuringHeight = true;
|
||||
childRSForMeasuringHeight.Init(aPresContext);
|
||||
|
||||
// For single-line vertical flexbox, we need to give our flex items an early
|
||||
// opportunity to stretch, since any stretching of their cross-size (width)
|
||||
// will likely impact the max-content main-size (height) that we're about to
|
||||
// measure for them. (We can't do this for multi-line, since we don't know
|
||||
// yet how many lines there will be & how much each line will stretch.)
|
||||
if (NS_STYLE_FLEX_WRAP_NOWRAP ==
|
||||
aParentReflowState.mStylePosition->mFlexWrap) {
|
||||
aFlexItem.ResolveStretchedCrossSize(aParentReflowState.ComputedWidth(),
|
||||
aAxisTracker);
|
||||
}
|
||||
|
||||
if (aFlexItem.IsStretched()) {
|
||||
childRSForMeasuringHeight.SetComputedWidth(aFlexItem.GetCrossSize());
|
||||
childRSForMeasuringHeight.mFlags.mHResize = true;
|
||||
}
|
||||
|
||||
// If this item is flexible (vertically), then we assume that the
|
||||
// computed-height we're reflowing with now could be different
|
||||
// from the one we'll use for this flex item's "actual" reflow later on.
|
||||
// In that case, we need to be sure the flex item treats this as a
|
||||
// vertical resize, even though none of its ancestors are necessarily
|
||||
// being vertically resized.
|
||||
// (Note: We don't have to do this for width, because InitResizeFlags
|
||||
// will always turn on mHResize on when it sees that the computed width
|
||||
// is different from current width, and that's all we need.)
|
||||
if (!aFlexItem.IsFrozen()) { // Are we flexible?
|
||||
if (aForceVerticalResizeForMeasuringReflow) {
|
||||
childRSForMeasuringHeight.mFlags.mVResize = true;
|
||||
}
|
||||
|
||||
@ -1101,27 +1413,26 @@ nsFlexContainerFrame::
|
||||
childDesiredSize, &childRSForMeasuringHeight,
|
||||
0, 0, flags);
|
||||
|
||||
aFlexItem.SetHadMeasuringReflow();
|
||||
|
||||
// Subtract border/padding in vertical axis, to get _just_
|
||||
// the effective computed value of the "height" property.
|
||||
nscoord childDesiredHeight = childDesiredSize.Height() -
|
||||
childRSForMeasuringHeight.ComputedPhysicalBorderPadding().TopBottom();
|
||||
childDesiredHeight = std::max(0, childDesiredHeight);
|
||||
|
||||
aFlexItem.SetFlexBaseSizeAndMainSize(childDesiredHeight);
|
||||
aFlexItem.SetHadMeasuringReflow();
|
||||
return std::max(0, childDesiredHeight);
|
||||
}
|
||||
|
||||
FlexItem::FlexItem(nsIFrame* aChildFrame,
|
||||
FlexItem::FlexItem(nsHTMLReflowState& aFlexItemReflowState,
|
||||
float aFlexGrow, float aFlexShrink, nscoord aFlexBaseSize,
|
||||
nscoord aMainMinSize, nscoord aMainMaxSize,
|
||||
nscoord aCrossMinSize, nscoord aCrossMaxSize,
|
||||
nsMargin aMargin, nsMargin aBorderPadding,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
: mFrame(aChildFrame),
|
||||
: mFrame(aFlexItemReflowState.frame),
|
||||
mFlexGrow(aFlexGrow),
|
||||
mFlexShrink(aFlexShrink),
|
||||
mBorderPadding(aBorderPadding),
|
||||
mMargin(aMargin),
|
||||
mBorderPadding(aFlexItemReflowState.ComputedPhysicalBorderPadding()),
|
||||
mMargin(aFlexItemReflowState.ComputedPhysicalMargin()),
|
||||
mMainMinSize(aMainMinSize),
|
||||
mMainMaxSize(aMainMaxSize),
|
||||
mCrossMinSize(aCrossMinSize),
|
||||
@ -1137,7 +1448,8 @@ FlexItem::FlexItem(nsIFrame* aChildFrame,
|
||||
mHadMeasuringReflow(false),
|
||||
mIsStretched(false),
|
||||
mIsStrut(false),
|
||||
mAlignSelf(aChildFrame->StylePosition()->mAlignSelf)
|
||||
// mNeedsMinSizeAutoResolution is initialized in CheckForMinSizeAuto()
|
||||
mAlignSelf(aFlexItemReflowState.mStylePosition->mAlignSelf)
|
||||
{
|
||||
MOZ_ASSERT(mFrame, "expecting a non-null child frame");
|
||||
MOZ_ASSERT(mFrame->GetType() != nsGkAtoms::placeholderFrame,
|
||||
@ -1146,12 +1458,14 @@ FlexItem::FlexItem(nsIFrame* aChildFrame,
|
||||
"out-of-flow frames should not be treated as flex items");
|
||||
|
||||
SetFlexBaseSizeAndMainSize(aFlexBaseSize);
|
||||
CheckForMinSizeAuto(aFlexItemReflowState, aAxisTracker);
|
||||
|
||||
// Assert that any "auto" margin components are set to 0.
|
||||
// (We'll resolve them later; until then, we want to treat them as 0-sized.)
|
||||
#ifdef DEBUG
|
||||
{
|
||||
const nsStyleSides& styleMargin = mFrame->StyleMargin()->mMargin;
|
||||
const nsStyleSides& styleMargin =
|
||||
aFlexItemReflowState.mStyleMargin->mMargin;
|
||||
NS_FOR_CSS_SIDES(side) {
|
||||
if (styleMargin.GetUnit(side) == eStyleUnit_Auto) {
|
||||
MOZ_ASSERT(GetMarginComponentForSide(side) == 0,
|
||||
@ -1209,6 +1523,7 @@ FlexItem::FlexItem(nsIFrame* aChildFrame, nscoord aCrossSize)
|
||||
mHadMeasuringReflow(false),
|
||||
mIsStretched(false),
|
||||
mIsStrut(true), // (this is the constructor for making struts, after all)
|
||||
mNeedsMinSizeAutoResolution(false),
|
||||
mAlignSelf(NS_STYLE_ALIGN_ITEMS_FLEX_START)
|
||||
{
|
||||
MOZ_ASSERT(mFrame, "expecting a non-null child frame");
|
||||
@ -1221,6 +1536,30 @@ FlexItem::FlexItem(nsIFrame* aChildFrame, nscoord aCrossSize)
|
||||
"out-of-flow frames should not be treated as flex items");
|
||||
}
|
||||
|
||||
void
|
||||
FlexItem::CheckForMinSizeAuto(const nsHTMLReflowState& aFlexItemReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker)
|
||||
{
|
||||
const nsStylePosition* pos = aFlexItemReflowState.mStylePosition;
|
||||
const nsStyleDisplay* disp = aFlexItemReflowState.mStyleDisplay;
|
||||
|
||||
// We'll need special behavior for "min-[width|height]:auto" (whichever is in
|
||||
// the main axis) iff:
|
||||
// (a) its computed value is "auto"
|
||||
// (b) the "overflow" sub-property in the same axis (the main axis) has a
|
||||
// computed value of "visible"
|
||||
const nsStyleCoord& minSize = GET_MAIN_COMPONENT(aAxisTracker,
|
||||
pos->mMinWidth,
|
||||
pos->mMinHeight);
|
||||
|
||||
const uint8_t overflowVal = GET_MAIN_COMPONENT(aAxisTracker,
|
||||
disp->mOverflowX,
|
||||
disp->mOverflowY);
|
||||
|
||||
mNeedsMinSizeAutoResolution = (minSize.GetUnit() == eStyleUnit_Auto &&
|
||||
overflowVal == NS_STYLE_OVERFLOW_VISIBLE);
|
||||
}
|
||||
|
||||
nscoord
|
||||
FlexItem::GetBaselineOffsetFromOuterCrossEdge(AxisOrientationType aCrossAxis,
|
||||
AxisEdgeType aEdge) const
|
||||
@ -2664,9 +3003,6 @@ nsFlexContainerFrame::GenerateFlexLines(
|
||||
} else {
|
||||
item = GenerateFlexItemForChild(aPresContext, childFrame,
|
||||
aReflowState, aAxisTracker);
|
||||
|
||||
ResolveFlexItemMaxContentSizing(aPresContext, *item,
|
||||
aReflowState, aAxisTracker);
|
||||
}
|
||||
|
||||
nscoord itemInnerHypotheticalMainSize = item->GetMainSize();
|
||||
|
||||
@ -106,17 +106,42 @@ protected:
|
||||
void SanityCheckAnonymousFlexItems() const;
|
||||
#endif // DEBUG
|
||||
|
||||
// Returns a new FlexItem for the given child frame, allocated on the heap.
|
||||
// Caller is responsible for managing the FlexItem's lifetime.
|
||||
/*
|
||||
* Returns a new FlexItem for the given child frame, allocated on the heap.
|
||||
* Guaranteed to return non-null. Caller is responsible for managing the
|
||||
* FlexItem's lifetime.
|
||||
*
|
||||
* Before returning, this method also processes the FlexItem to resolve its
|
||||
* flex basis (including e.g. auto-height) as well as to resolve
|
||||
* "min-height:auto", via ResolveAutoFlexBasisAndMinSize(). (Basically, the
|
||||
* returned FlexItem will be ready to participate in the "Resolve the
|
||||
* Flexible Lengths" step of the Flex Layout Algorithm.)
|
||||
*/
|
||||
FlexItem* GenerateFlexItemForChild(nsPresContext* aPresContext,
|
||||
nsIFrame* aChildFrame,
|
||||
const nsHTMLReflowState& aParentReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker);
|
||||
|
||||
void ResolveFlexItemMaxContentSizing(nsPresContext* aPresContext,
|
||||
/**
|
||||
* This method performs a "measuring" reflow to get the content height of
|
||||
* aFlexItem.Frame() (treating it as if it had auto-height), & returns the
|
||||
* resulting height.
|
||||
* (Helper for ResolveAutoFlexBasisAndMinSize().)
|
||||
*/
|
||||
nscoord MeasureFlexItemContentHeight(nsPresContext* aPresContext,
|
||||
FlexItem& aFlexItem,
|
||||
const nsHTMLReflowState& aParentReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker);
|
||||
bool aForceVerticalResizeForMeasuringReflow,
|
||||
const nsHTMLReflowState& aParentReflowState);
|
||||
|
||||
/**
|
||||
* This method resolves an "auto" flex-basis and/or min-main-size value
|
||||
* on aFlexItem, if needed.
|
||||
* (Helper for GenerateFlexItemForChild().)
|
||||
*/
|
||||
void ResolveAutoFlexBasisAndMinSize(nsPresContext* aPresContext,
|
||||
FlexItem& aFlexItem,
|
||||
const nsHTMLReflowState& aItemReflowState,
|
||||
const FlexboxAxisTracker& aAxisTracker);
|
||||
|
||||
// Creates FlexItems for all of our child frames, arranged in a list of
|
||||
// FlexLines. These are returned by reference in |aLines|. Our actual
|
||||
|
||||
@ -4102,12 +4102,18 @@ nsFrame::ComputeSize(nsRenderingContext *aRenderingContext,
|
||||
}
|
||||
|
||||
nscoord minWidth;
|
||||
if (!(isFlexItem && isHorizontalFlexItem)) {
|
||||
if (stylePos->mMinWidth.GetUnit() != eStyleUnit_Auto &&
|
||||
!(isFlexItem && isHorizontalFlexItem)) {
|
||||
minWidth =
|
||||
nsLayoutUtils::ComputeWidthValue(aRenderingContext, this,
|
||||
aCBSize.width, boxSizingAdjust.width, boxSizingToMarginEdgeWidth,
|
||||
stylePos->mMinWidth);
|
||||
} else {
|
||||
// Treat "min-width: auto" as 0.
|
||||
// NOTE: Technically, "auto" is supposed to behave like "min-content" on
|
||||
// flex items. However, we don't need to worry about that here, because
|
||||
// flex items' min-sizes are intentionally ignored until the flex
|
||||
// container explicitly considers them during space distribution.
|
||||
minWidth = 0;
|
||||
}
|
||||
result.width = std::max(minWidth, result.width);
|
||||
|
||||
@ -2595,9 +2595,16 @@ nsHTMLReflowState::ComputeMinMaxValues(nscoord aContainingBlockWidth,
|
||||
nscoord aContainingBlockHeight,
|
||||
const nsHTMLReflowState* aContainingBlockRS)
|
||||
{
|
||||
ComputedMinWidth() = ComputeWidthValue(aContainingBlockWidth,
|
||||
mStylePosition->mBoxSizing,
|
||||
mStylePosition->mMinWidth);
|
||||
// NOTE: min-width:auto resolves to 0, except on a flex item. (But
|
||||
// even there, it's supposed to be ignored (i.e. treated as 0) until
|
||||
// the flex container explicitly resolves & considers it.)
|
||||
if (eStyleUnit_Auto == mStylePosition->mMinWidth.GetUnit()) {
|
||||
ComputedMinWidth() = 0;
|
||||
} else {
|
||||
ComputedMinWidth() = ComputeWidthValue(aContainingBlockWidth,
|
||||
mStylePosition->mBoxSizing,
|
||||
mStylePosition->mMinWidth);
|
||||
}
|
||||
|
||||
if (eStyleUnit_None == mStylePosition->mMaxWidth.GetUnit()) {
|
||||
// Specified value of 'none'
|
||||
@ -2621,8 +2628,12 @@ nsHTMLReflowState::ComputeMinMaxValues(nscoord aContainingBlockWidth,
|
||||
// Likewise, if we're a child of a flex container who's measuring our
|
||||
// intrinsic height, then we want to disregard our min-height.
|
||||
|
||||
// NOTE: min-height:auto resolves to 0, except on a flex item. (But
|
||||
// even there, it's supposed to be ignored (i.e. treated as 0) until
|
||||
// the flex container explicitly resolves & considers it.)
|
||||
const nsStyleCoord &minHeight = mStylePosition->mMinHeight;
|
||||
if ((NS_AUTOHEIGHT == aContainingBlockHeight &&
|
||||
if (eStyleUnit_Auto == minHeight.GetUnit() ||
|
||||
(NS_AUTOHEIGHT == aContainingBlockHeight &&
|
||||
minHeight.HasPercent()) ||
|
||||
(mFrameType == NS_CSS_FRAME_TYPE_INTERNAL_TABLE &&
|
||||
minHeight.IsCalcUnit() && minHeight.CalcHasPercent()) ||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
== 10036-1.html 10036-1-ref.html
|
||||
skip-if(!cocoaWidget) HTTP(..) == 10209-1.html 10209-ref.html # Bug 667079
|
||||
HTTP(..) == 10209-2.html 10209-ref.html
|
||||
asserts(4) skip-if(!cocoaWidget) HTTP(..) == 10209-3.html 10209-3-ref.html # Assertions: bug 666606, skip because of bug 667079
|
||||
asserts(2) skip-if(!cocoaWidget) HTTP(..) == 10209-3.html 10209-3-ref.html # Assertions: bug 666606, skip because of bug 667079
|
||||
== 18217-basic-1.html 18217-basic-1-ref.html
|
||||
== 18217-basic-2a.html 18217-basic-2-ref.html
|
||||
== 18217-basic-2b.html 18217-basic-2-ref.html
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
canvas {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,33 +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 a canvas element with "min-width: min-content"
|
||||
and a huge specified "width" ends up being shrinkable. (In particular,
|
||||
the large "width" value shouldn't influence the min-content width).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
canvas {
|
||||
width: 1000px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
canvas {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,36 +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 a canvas element with "min-height: min-content"
|
||||
and a huge specified "height" ends up being shrinkable. (In particular,
|
||||
the large "height" value shouldn't influence the min-content height).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
canvas {
|
||||
width: 50px;
|
||||
height: 1000px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<canvas/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,29 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
fieldset {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<fieldset/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,34 +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 a fieldset element with "min-width: min-content"
|
||||
and a huge specified "width" ends up being shrinkable. (In particular,
|
||||
the large "width" value shouldn't influence the min-content width).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
fieldset {
|
||||
width: 1000px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<fieldset/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,32 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
fieldset {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<fieldset/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,37 +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 a fieldset element with "min-height: min-content"
|
||||
and a huge specified "height" ends up being shrinkable. (In particular,
|
||||
the large "height" value shouldn't influence the min-content height).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
fieldset {
|
||||
width: 50px;
|
||||
height: 1000px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<fieldset/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,28 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
iframe {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<iframe/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,33 +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 an iframe element with "min-width: min-content"
|
||||
and a huge specified "width" ends up being shrinkable. (In particular,
|
||||
the large "width" value shouldn't influence the min-content width).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
iframe {
|
||||
width: 1000px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<iframe/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
iframe {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<iframe/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,36 +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 an iframe element with "min-height: min-content"
|
||||
and a huge specified "height" ends up being shrinkable. (In particular,
|
||||
the large "height" value shouldn't influence the min-content height).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
iframe {
|
||||
width: 50px;
|
||||
height: 1000px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<iframe/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,28 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<img src="solidblue.png"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,33 +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 an img element with "min-width: min-content"
|
||||
and a huge specified "width" ends up being shrinkable. (In particular,
|
||||
the large "width" value shouldn't influence the min-content width).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
img {
|
||||
width: 1000px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<img src="solidblue.png"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<img src="solidblue.png"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,36 +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 an img element with "min-height: min-content"
|
||||
and a huge specified "height" ends up being shrinkable. (In particular,
|
||||
the large "height" value shouldn't influence the min-content height).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
height: 1000px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<img src="solidblue.png"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,29 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
textarea {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<textarea/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,34 +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 a textarea element with "min-width: min-content"
|
||||
and a huge specified "width" ends up being shrinkable. (In particular,
|
||||
the large "width" value shouldn't influence the min-content width).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
textarea {
|
||||
width: 1000px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<textarea/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,32 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
textarea {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<textarea/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,37 +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 a textarea element with "min-height: min-content"
|
||||
and a huge specified "height" ends up being shrinkable. (In particular,
|
||||
the large "height" value shouldn't influence the min-content height).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
textarea {
|
||||
width: 50px;
|
||||
height: 1000px;
|
||||
background: purple;
|
||||
border: 1px dotted green;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<textarea/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,28 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
video {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<video/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,33 +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 a video element with "min-width: min-content"
|
||||
and a huge specified "width" ends up being shrinkable. (In particular,
|
||||
the large "width" value shouldn't influence the min-content width).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
}
|
||||
video {
|
||||
width: 1000px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<video/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
video {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<video/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,36 +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 a video element with "min-height: min-content"
|
||||
and a huge specified "height" ends up being shrinkable. (In particular,
|
||||
the large "height" value shouldn't influence the min-content height).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px dotted black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
video {
|
||||
width: 50px;
|
||||
height: 1000px;
|
||||
background: purple;
|
||||
/* min-height: min-content isn't supported yet (bug 852367), but we'd
|
||||
like this to work when it is supported. */
|
||||
min-height: -moz-min-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<video/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,78 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
font-size: 8px;
|
||||
}
|
||||
div.outerContainer {
|
||||
border: 1px dotted black;
|
||||
height: 42px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
div.flexbox > * {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
border: 1px dashed green;
|
||||
background: lightblue;
|
||||
height: 40px;
|
||||
}
|
||||
div.childMinSizeIsMinContent > * {
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
div.childSizeIsMinContent > * {
|
||||
width: -moz-min-content;
|
||||
}
|
||||
div.smallSize { width: 5px; }
|
||||
div.smallFlexBasis { width: 2px; }
|
||||
div.zeroWidth { width: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Check that we use the min-content width as a lower-bound when sizing
|
||||
flex items. -->
|
||||
<div class="flexbox childMinSizeIsMinContent outerContainer">
|
||||
<div>abc d e f</div
|
||||
><div class="smallSize">abc d e f</div
|
||||
><div class="smallFlexBasis">abc d e f</div>
|
||||
</div>
|
||||
|
||||
<!-- ... EVEN if our flex container is small and we're overflowing. -->
|
||||
<div class="outerContainer smallSize">
|
||||
<div class="flexbox childSizeIsMinContent">
|
||||
<div>abc d e f</div
|
||||
><div>abc d e f</div
|
||||
><div>abc d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test that "min-width: 0" on flex items will keep us from clamping to
|
||||
the min-content width. (So we can now actually honor small 'width'
|
||||
and 'flex-basis' values.) -->
|
||||
<div class="flexbox outerContainer">
|
||||
<div>abc d e f</div
|
||||
><div class="smallSize">abc d e f</div
|
||||
><div class="smallFlexBasis">abc d e f</div>
|
||||
</div>
|
||||
|
||||
<!-- ... and similarly, when we have a small flex container and we trigger
|
||||
shrinking behavior, flex items with "min-width: 0" are allowed to
|
||||
shrink past their min-content width. -->
|
||||
<div class="outerContainer smallSize">
|
||||
<div class="flexbox">
|
||||
<div class="zeroWidth">abc d e f</div
|
||||
><div class="zeroWidth">abc d e f</div
|
||||
><div class="zeroWidth">abc d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,71 +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 we correctly handle flex items with an explicit
|
||||
"min-width: -moz-min-content".
|
||||
|
||||
We check that such flex items can't shrink below their min-content width,
|
||||
unless we explicitly reduce their min-width with e.g. "min-width: 0".
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
font-size: 8px;
|
||||
border: 1px dotted black;
|
||||
}
|
||||
div.flexbox > * {
|
||||
margin-right: 20px;
|
||||
border: 1px dashed green;
|
||||
background: lightblue;
|
||||
height: 40px;
|
||||
min-width: -moz-min-content;
|
||||
}
|
||||
div.smallSize { width: 5px; }
|
||||
div.smallFlexBasis { flex-basis: 2px; }
|
||||
div.zeroMinWidth { min-width: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Check that we honor "min-width: min-content" as a lower-bound when
|
||||
sizing flex items. -->
|
||||
<div class="flexbox">
|
||||
<div>abc d e f</div>
|
||||
<div class="smallSize">abc d e f</div>
|
||||
<div class="smallFlexBasis">abc d e f</div>
|
||||
</div>
|
||||
|
||||
<!-- ... EVEN if our flex container is small and we're overflowing. -->
|
||||
<div class="flexbox smallSize">
|
||||
<div>abc d e f</div>
|
||||
<div class="smallSize">abc d e f</div>
|
||||
<div class="smallFlexBasis">abc d e f</div>
|
||||
</div>
|
||||
|
||||
<!-- Test that we don't clamp when we've got "min-width: 0" on our
|
||||
flex items, though. -->
|
||||
<div class="flexbox">
|
||||
<div class="zeroMinWidth">abc d e f</div>
|
||||
<div class="zeroMinWidth smallSize">abc d e f</div>
|
||||
<div class="zeroMinWidth smallFlexBasis">abc d e f</div>
|
||||
</div>
|
||||
|
||||
<!-- ... and similarly, when we have a small flex container and we trigger
|
||||
shrinking behavior, flex items with "min-width: 0" are allowed to
|
||||
shrink past their min-content width. -->
|
||||
<div class="flexbox smallSize">
|
||||
<div class="zeroMinWidth">abc d e f</div>
|
||||
<div class="zeroMinWidth smallSize">abc d e f</div>
|
||||
<div class="zeroMinWidth smallFlexBasis">abc d e f</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,55 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 140px;
|
||||
margin-right: 5px;
|
||||
font-size: 8px;
|
||||
border: 1px dotted black;
|
||||
float: left;
|
||||
}
|
||||
div.flexbox > * {
|
||||
margin-bottom: 20px;
|
||||
border: 1px dashed green;
|
||||
background: lightblue;
|
||||
width: 40px;
|
||||
}
|
||||
div.smallSize { height: 5px; }
|
||||
div.smallFlexBasis { height: 2px; }
|
||||
div.zeroHeight { height: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="flexbox">
|
||||
<div>a b</div>
|
||||
<div>a b</div>
|
||||
<div>a b</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox smallSize">
|
||||
<div>a b</div>
|
||||
<div>a b</div>
|
||||
<div>a b</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox">
|
||||
<div>a b</div>
|
||||
<div class="smallSize">a b</div>
|
||||
<div class="smallFlexBasis">a b</div>
|
||||
</div>
|
||||
|
||||
<div class="flexbox smallSize">
|
||||
<div class="zeroHeight">a b</div>
|
||||
<div class="zeroHeight">a b</div>
|
||||
<div class="zeroHeight">a b</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -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/
|
||||
-->
|
||||
<!--
|
||||
This test checks that we correctly handle flex items with an explicit
|
||||
"min-height: -moz-min-content".
|
||||
|
||||
We check that such flex items can't shrink below their min-content height,
|
||||
unless we explicitly reduce their min-height with e.g. "min-height: 0".
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 5px;
|
||||
font-size: 8px;
|
||||
border: 1px dotted black;
|
||||
float: left;
|
||||
}
|
||||
div.flexbox > * {
|
||||
margin-bottom: 20px;
|
||||
border: 1px dashed green;
|
||||
background: lightblue;
|
||||
width: 40px;
|
||||
min-height: -moz-min-content; /* not yet supported -- see bug 852367 */
|
||||
}
|
||||
div.smallSize { height: 5px; }
|
||||
div.smallFlexBasis { flex-basis: 2px; }
|
||||
div.zeroMinHeight { min-height: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Check that we honor "min-height: min-content" as a lower-bound when
|
||||
sizing flex items. -->
|
||||
<div class="flexbox">
|
||||
<div>a b</div>
|
||||
<div class="smallSize">a b</div>
|
||||
<div class="smallFlexBasis">a b</div>
|
||||
</div>
|
||||
|
||||
<!-- ... EVEN if our flex container is small and we're overflowing. -->
|
||||
<div class="flexbox smallSize">
|
||||
<div>a b</div>
|
||||
<div class="smallSize">a b</div>
|
||||
<div class="smallFlexBasis">a b</div>
|
||||
</div>
|
||||
|
||||
<!-- Test that we don't clamp when we've got "min-height: 0" on our
|
||||
flex items, though. -->
|
||||
<div class="flexbox">
|
||||
<div class="zeroMinHeight">a b</div>
|
||||
<div class="zeroMinHeight smallSize">a b</div>
|
||||
<div class="zeroMinHeight smallFlexBasis">a b</div>
|
||||
</div>
|
||||
|
||||
<!-- ... and similarly, when we have a small flex container and we trigger
|
||||
shrinking behavior, flex items with "min-height: 0" are allowed to
|
||||
shrink past their min-content height. -->
|
||||
<div class="flexbox smallSize">
|
||||
<div class="zeroMinHeight">a b</div>
|
||||
<div class="zeroMinHeight smallSize">a b</div>
|
||||
<div class="zeroMinHeight smallFlexBasis">a b</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -22,6 +22,7 @@
|
||||
}
|
||||
div.flexbox > * {
|
||||
max-width: 3px;
|
||||
min-width: 0; /* to override default 'min-width:auto' */
|
||||
outline: 1px dashed black;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
|
||||
@ -19,34 +19,6 @@ fails == flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-
|
||||
fuzzy-if(B2G,10,3) random-if(winWidget) == flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate
|
||||
== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
|
||||
|
||||
# Tests for basic handling of <canvas>/<img>/etc as a flex item
|
||||
# NOTE: The "-1" versions of these tests have moved to the w3c-css directory;
|
||||
# the -2 variants remain behind, because they explicitly intend to test
|
||||
# how e.g. "min-width: -moz-min-content" affects the rendering, and we don't
|
||||
# want to upload tests with prefixed keywords to the W3C testsuite.
|
||||
|
||||
== flexbox-basic-canvas-horiz-2.xhtml flexbox-basic-canvas-horiz-2-ref.xhtml
|
||||
# NOTE: This test will only test something useful once we add support for
|
||||
# "min-height: -moz-min-content", bug 852367. At that point, it will probably
|
||||
# fail until bug 794660 is fixed:
|
||||
== flexbox-basic-canvas-vert-2.xhtml flexbox-basic-canvas-vert-2-ref.xhtml
|
||||
== flexbox-basic-fieldset-horiz-2.xhtml flexbox-basic-fieldset-horiz-2-ref.xhtml
|
||||
== flexbox-basic-fieldset-vert-2.xhtml flexbox-basic-fieldset-vert-2-ref.xhtml
|
||||
== flexbox-basic-iframe-horiz-2.xhtml flexbox-basic-iframe-horiz-2-ref.xhtml
|
||||
== flexbox-basic-iframe-vert-2.xhtml flexbox-basic-iframe-vert-2-ref.xhtml
|
||||
== flexbox-basic-img-horiz-2.xhtml flexbox-basic-img-horiz-2-ref.xhtml
|
||||
# NOTE: This test will only test something useful once we add support for
|
||||
# "min-height: -moz-min-content", bug 852367. At that point, it will probably
|
||||
# fail until bug 794660 is fixed:
|
||||
== flexbox-basic-img-vert-2.xhtml flexbox-basic-img-vert-2-ref.xhtml
|
||||
== flexbox-basic-textarea-horiz-2.xhtml flexbox-basic-textarea-horiz-2-ref.xhtml
|
||||
== flexbox-basic-textarea-vert-2.xhtml flexbox-basic-textarea-vert-2-ref.xhtml
|
||||
== flexbox-basic-video-horiz-2.xhtml flexbox-basic-video-horiz-2-ref.xhtml
|
||||
# NOTE: This test will only test something useful once we add support for
|
||||
# "min-height: -moz-min-content", bug 852367. At that point, it will probably
|
||||
# fail until bug 794660 is fixed:
|
||||
== flexbox-basic-video-vert-2.xhtml flexbox-basic-video-vert-2-ref.xhtml
|
||||
|
||||
# Tests for box-sizing on flex containers and flex items.
|
||||
== flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1-ref.html
|
||||
== flexbox-box-sizing-on-container-vert-1.html flexbox-box-sizing-on-container-vert-1-ref.html
|
||||
@ -93,10 +65,6 @@ fuzzy-if(B2G,10,3) random-if(winWidget) == flexbox-align-self-baseline-horiz-3.x
|
||||
== flexbox-float-2a.xhtml flexbox-float-2-ref.xhtml
|
||||
== flexbox-float-2b.xhtml flexbox-float-2-ref.xhtml
|
||||
|
||||
# Tests for "min-width" and "min-height" on flex items.
|
||||
== flexbox-minSize-horiz-1.xhtml flexbox-minSize-horiz-1-ref.xhtml
|
||||
fails == flexbox-minSize-vert-1.xhtml flexbox-minSize-vert-1-ref.xhtml # bug 852367
|
||||
|
||||
# Tests for the order in which we paint flex items
|
||||
fails == flexbox-paint-ordering-3.html flexbox-paint-ordering-3-ref.html # bug 874718
|
||||
|
||||
|
||||
@ -24,6 +24,12 @@
|
||||
border: 1px dotted gray;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
/* Explicitly set min-width & min-height to 0, to prevent their "auto"
|
||||
value from influencing the sizes of our flex items (particularly for
|
||||
the single-line chunks of this testcase, whose items may be shrunk a
|
||||
little below the numerals' intrinsic sizes): */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -24,6 +24,12 @@
|
||||
border: 1px dotted gray;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
/* Explicitly set min-width & min-height to 0, to prevent their "auto"
|
||||
value from influencing the sizes of our flex items (particularly for
|
||||
the single-line chunks of this testcase, whose items may be shrunk a
|
||||
little below the numerals' intrinsic sizes): */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.item {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.small { height: 50px; }
|
||||
.big { height: 80px; }
|
||||
|
||||
.item > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
width: 10px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
|
||||
<div class="item big"><div></div></div>
|
||||
<div class="item big"><div></div></div>
|
||||
<div class="item big"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,102 @@
|
||||
<!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 min-height:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-height-auto-001-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-height:auto" (the property's
|
||||
initial value) on flex items in a vertical flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-height' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content height.
|
||||
d) If there is an intrinsic aspect ratio: the item's height derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-height.
|
||||
|
||||
This test checks for situations where we should resolve the min-height as
|
||||
(a), (b), or (c) above. Another test will check (d).
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1px; /* No available space; shrink flex items to min-height */
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
}
|
||||
|
||||
.flexbox > * > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
width: 10px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-height:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
<!-- *** (a) Used 'flex-basis' (from 'height') *** -->
|
||||
<!-- First, without definite max-height: -->
|
||||
<div class="flexbox">
|
||||
<div style="height: 50px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with definite (& large) 'max-height': -->
|
||||
<div class="flexbox">
|
||||
<div style="height: 50px; max-height: 120px;"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with used 'flex-basis' being a calc expression:-->
|
||||
<div class="flexbox">
|
||||
<div style="height: calc(10% + 50px)"><div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- *** (b) The computed 'max-height' *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
|
||||
<div class="flexbox">
|
||||
<div style="height: 100px; max-height:50px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 100px; max-height:50px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 10px; max-height:50px"><div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- *** (c) (no intrinsic aspect ratio) The min-content size *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
|
||||
<div class="flexbox">
|
||||
<div style="height: 100px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 100px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 10px"><div></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
border: 2px dotted purple;
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="support/solidblue.png" alt="blue square">
|
||||
<img src="support/solidblue.png" alt="blue square">
|
||||
<img src="support/solidblue.png" alt="blue square">
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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 min-height:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-height-auto-002-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-height:auto" (the property's
|
||||
initial value) on flex items in a vertical flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-height' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content height.
|
||||
d) If there is an intrinsic aspect ratio: the item's height derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-height.
|
||||
|
||||
This test checks for situations where we should resolve the min-height as
|
||||
(d) above, with "constraints in the other dimension" being "width".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1px; /* No available space; shrink flex items to min-height */
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
/* Flex items have sizing constraint in cross axis: */
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-height:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
|
||||
<!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio
|
||||
and constraints in the other dimension *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
|
||||
<div class="flexbox">
|
||||
<img style="height: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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 min-height:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-height-auto-002-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-height:auto" (the property's
|
||||
initial value) on flex items in a vertical flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-height' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content height.
|
||||
d) If there is an intrinsic aspect ratio: the item's height derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-height.
|
||||
|
||||
This test checks for situations where we should resolve the min-height as
|
||||
(d) above, with "constraints in the other dimension" being "min-width".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1px; /* No available space; shrink flex items to min-height */
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
/* Flex items have sizing constraint in cross axis: */
|
||||
min-width: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-height:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
|
||||
<!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio
|
||||
and constraints in the other dimension *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
|
||||
<div class="flexbox">
|
||||
<img style="height: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,71 @@
|
||||
<!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 min-height:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-height-auto-002-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-height:auto" (the property's
|
||||
initial value) on flex items in a vertical flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-height' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content height.
|
||||
d) If there is an intrinsic aspect ratio: the item's height derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-height.
|
||||
|
||||
This test checks for situations where we should resolve the min-height as
|
||||
(d) above, with "constraints in the other dimension" being
|
||||
max-width-clamped "width".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1px; /* No available space; shrink flex items to min-height */
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
/* Flex items have sizing constraint in cross axis: */
|
||||
max-width: 30px;
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-height:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
|
||||
<!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio
|
||||
and constraints in the other dimension *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
|
||||
<div class="flexbox">
|
||||
<img style="height: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-height:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.item {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.small { height: 26px; }
|
||||
.big { height: 80px; }
|
||||
|
||||
.item > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.yvisible { overflow-y: visible; }
|
||||
.yhidden { overflow-y: hidden; }
|
||||
.yscroll { overflow-y: scroll; }
|
||||
.yauto { overflow-y: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="item big yvisible"><div></div></div>
|
||||
<div class="item small yhidden"><div></div></div>
|
||||
<div class="item small yscroll"><div></div></div>
|
||||
<div class="item small yauto"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,57 @@
|
||||
<!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 min-height:auto & 'overflow' interaction</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-height-auto-003-ref.html">
|
||||
<!--
|
||||
This testcase checks how "overflow-y" impacts the sizing behavior of flex
|
||||
items with "min-height:auto" (the new initial value for "min-height").
|
||||
|
||||
In particular, the flex-item-specific "min-height:auto" behavior is
|
||||
supposed to be disabled (e.g. we end up with min-height:0) when
|
||||
"overflow-y" is non-"visible".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 30px; /* Shrink flex items below min-height */
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
}
|
||||
|
||||
.flexbox > * > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.yvisible { overflow-y: visible; }
|
||||
.yhidden { overflow-y: hidden; }
|
||||
.yscroll { overflow-y: scroll; }
|
||||
.yauto { overflow-y: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- min-height:auto should prevent shrinking below intrinsic height when
|
||||
the flex item has "overflow-y: visible", but not for any other
|
||||
overflow-y values. -->
|
||||
<div class="flexbox"><div class="yvisible"><div></div></div></div>
|
||||
<div class="flexbox"><div class="yhidden"><div></div></div></div>
|
||||
<div class="flexbox"><div class="yscroll"><div></div></div></div>
|
||||
<div class="flexbox"><div class="yauto"><div></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.item {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.small { height: 26px; }
|
||||
.big { height: 80px; }
|
||||
|
||||
.item > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.xvisible { overflow-x: visible; }
|
||||
.xhidden { overflow-x: hidden; }
|
||||
.xscroll { overflow-x: scroll; }
|
||||
.xauto { overflow-x: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="item big xvisible"><div></div></div>
|
||||
<div class="item small xhidden"><div></div></div>
|
||||
<div class="item small xscroll"><div></div></div>
|
||||
<div class="item small xauto"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,63 @@
|
||||
<!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 min-height:auto & 'overflow' interaction</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-height-auto-004-ref.html">
|
||||
<!--
|
||||
This testcase checks how "overflow-x" indirectly impacts the sizing
|
||||
behavior of flex items with "min-height:auto" (the new initial value
|
||||
for "min-height"), via its influence on "overflow-y".
|
||||
|
||||
In particular, the flex-item-specific "min-height:auto" behavior is
|
||||
supposed to be disabled (e.g. we end up with min-height:0) when
|
||||
"overflow-y" is non-"visible". Moreover, when "overflow-x" is set to a
|
||||
scrolling value, it forces "overflow-y" to compute to a scrolling value
|
||||
as well, as described at
|
||||
http://www.w3.org/TR/css-overflow-3/#overflow-properties
|
||||
So, "overflow-x" has an indirect effect (via "overflow-y") here.
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 30px; /* Shrink flex items below min-height */
|
||||
margin-right: 2px; /* (Just for spacing things out, visually) */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
}
|
||||
|
||||
.flexbox > * > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
width: 40px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.xvisible { overflow-x: visible; }
|
||||
.xhidden { overflow-x: hidden; }
|
||||
.xscroll { overflow-x: scroll; }
|
||||
.xauto { overflow-x: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- min-height:auto should prevent shrinking below intrinsic height when
|
||||
the flex item has "overflow-x: visible", but not for any other
|
||||
overflow-x values (because of overflow-x's influence on overflow-y).
|
||||
-->
|
||||
<div class="flexbox"><div class="xvisible"><div></div></div></div>
|
||||
<div class="flexbox"><div class="xhidden"><div></div></div></div>
|
||||
<div class="flexbox"><div class="xscroll"><div></div></div></div>
|
||||
<div class="flexbox"><div class="xauto"><div></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.item {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.small { width: 50px; }
|
||||
.big { width: 80px; }
|
||||
|
||||
.item > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
height: 10px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
<div class="item small"><div></div></div>
|
||||
|
||||
<div class="item big"><div></div></div>
|
||||
<div class="item big"><div></div></div>
|
||||
<div class="item big"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,100 @@
|
||||
<!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 min-width:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-width-auto-001-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-width:auto" (the property's
|
||||
initial value) on flex items in a horizontal flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-width' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content width.
|
||||
d) If there is an intrinsic aspect ratio: the item's width derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-width.
|
||||
|
||||
This test checks for situations where we should resolve the min-width as
|
||||
(a), (b), or (c) above. Another test will check (d).
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 1px; /* No available space; shrink flex items to min-width */
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
}
|
||||
|
||||
.flexbox > * > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
height: 10px;
|
||||
width: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-width:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
<!-- *** (a) Used 'flex-basis' (from 'width') *** -->
|
||||
<!-- First, without definite max-width: -->
|
||||
<div class="flexbox">
|
||||
<div style="width: 50px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with definite (& large) 'max-width': -->
|
||||
<div class="flexbox">
|
||||
<div style="width: 50px; max-width: 120px;"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with used 'flex-basis' being a calc expression:-->
|
||||
<div class="flexbox">
|
||||
<div style="width: calc(10% + 50px)"><div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- *** (b) The computed 'max-width' *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
|
||||
<div class="flexbox">
|
||||
<div style="width: 100px; max-width:50px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 100px; max-width:50px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 10px; max-width:50px"><div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- *** (c) (no intrinsic aspect ratio) The min-content size *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
|
||||
<div class="flexbox">
|
||||
<div style="width: 100px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 100px"><div></div></div>
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<div style="flex-basis: 10px"><div></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
border: 2px dotted purple;
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="support/solidblue.png" alt="blue square">
|
||||
<img src="support/solidblue.png" alt="blue square">
|
||||
<img src="support/solidblue.png" alt="blue square">
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,67 @@
|
||||
<!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 min-width:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-width-auto-002-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-width:auto" (the property's
|
||||
initial value) on flex items in a horizontal flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-width' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content width.
|
||||
d) If there is an intrinsic aspect ratio: the item's width derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-width.
|
||||
|
||||
This test checks for situations where we should resolve the min-width as
|
||||
(d) above, with "constraints in the other dimension" being "height".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 0px; /* No available space; shrink flex items to min-width */
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
/* Flex items have sizing constraint in cross axis: */
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-width:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
|
||||
<!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
|
||||
and constraints in the other dimension *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
|
||||
<div class="flexbox">
|
||||
<img style="width: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,67 @@
|
||||
<!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 min-width:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-width-auto-002-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-width:auto" (the property's
|
||||
initial value) on flex items in a horizontal flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-width' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content width.
|
||||
d) If there is an intrinsic aspect ratio: the item's width derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-width.
|
||||
|
||||
This test checks for situations where we should resolve the min-width as
|
||||
(d) above, with "constraints in the other dimension" being "min-height".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 0px; /* No available space; shrink flex items to min-width */
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
/* Flex items have sizing constraint in cross axis: */
|
||||
min-height: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-width:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
|
||||
<!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
|
||||
and constraints in the other dimension *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
|
||||
<div class="flexbox">
|
||||
<img style="width: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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 min-width:auto</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-width-auto-002-ref.html">
|
||||
<!--
|
||||
This testcase tests the used value of "min-width:auto" (the property's
|
||||
initial value) on flex items in a horizontal flex container.
|
||||
|
||||
It's supposed to resolve to the smallest of:
|
||||
a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
|
||||
initial value.
|
||||
b) The computed 'max-width' property
|
||||
c) If there's no intrinsic aspect ratio: the item's min-content width.
|
||||
d) If there is an intrinsic aspect ratio: the item's width derived from
|
||||
the ratio & constraints in the other dimension.
|
||||
|
||||
We measure what the used value is by putting flex items in a small flex
|
||||
container, which will shrink its items down to their min-width.
|
||||
|
||||
This test checks for situations where we should resolve the min-width as
|
||||
(d) above, with "constraints in the other dimension" being
|
||||
max-height-clamped "height".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 0px; /* No available space; shrink flex items to min-width */
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
/* Flex items have sizing constraint in cross axis: */
|
||||
max-height: 30px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Check for min-width:auto resolving correctly when the smallest
|
||||
candidate value is: -->
|
||||
|
||||
<!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
|
||||
and constraints in the other dimension *** -->
|
||||
<!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
|
||||
<div class="flexbox">
|
||||
<img style="width: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
|
||||
be considered for 'min-width:auto' anyway) -->
|
||||
<div class="flexbox">
|
||||
<img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,40 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.item {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.small { width: 26px; }
|
||||
.big { width: 80px; }
|
||||
|
||||
.item > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.xvisible { overflow-x: visible; }
|
||||
.xhidden { overflow-x: hidden; }
|
||||
.xscroll { overflow-x: scroll; }
|
||||
.xauto { overflow-x: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="item big xvisible"><div></div></div>
|
||||
<div class="item small xhidden"><div></div></div>
|
||||
<div class="item small xscroll"><div></div></div>
|
||||
<div class="item small xauto"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!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 min-width:auto & 'overflow' interaction</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-width-auto-003-ref.html">
|
||||
<!--
|
||||
This testcase checks how "overflow-x" impacts the sizing behavior of flex
|
||||
items with "min-width:auto" (the new initial value for "min-width").
|
||||
|
||||
In particular, the flex-item-specific "min-width:auto" behavior is
|
||||
supposed to be disabled (e.g. we end up with min-width:0) when
|
||||
"overflow-x" is non-"visible".
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 30px; /* Shrink flex items below min-width */
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
}
|
||||
|
||||
.flexbox > * > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.xvisible { overflow-x: visible; }
|
||||
.xhidden { overflow-x: hidden; }
|
||||
.xscroll { overflow-x: scroll; }
|
||||
.xauto { overflow-x: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- min-width:auto should prevent shrinking below intrinsic width when
|
||||
the flex item has "overflow-x: visible", but not for any other
|
||||
overflow-x values. -->
|
||||
<div class="flexbox"><div class="xvisible"><div></div></div></div>
|
||||
<div class="flexbox"><div class="xhidden"><div></div></div></div>
|
||||
<div class="flexbox"><div class="xscroll"><div></div></div></div>
|
||||
<div class="flexbox"><div class="xauto"><div></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,40 @@
|
||||
<!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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.item {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.small { width: 26px; }
|
||||
.big { width: 80px; }
|
||||
|
||||
.item > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.yvisible { overflow-y: visible; }
|
||||
.yhidden { overflow-y: hidden; }
|
||||
.yscroll { overflow-y: scroll; }
|
||||
.yauto { overflow-y: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="item big yvisible"><div></div></div>
|
||||
<div class="item small yhidden"><div></div></div>
|
||||
<div class="item small yscroll"><div></div></div>
|
||||
<div class="item small yauto"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,61 @@
|
||||
<!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 min-width:auto & 'overflow' interaction</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#min-size-auto">
|
||||
<link rel="match" href="flexbox-min-width-auto-004-ref.html">
|
||||
<!--
|
||||
This testcase checks how "overflow-y" indirectly impacts the sizing
|
||||
behavior of flex items with "min-width:auto" (the new initial value
|
||||
for "min-width"), via its influence on "overflow-x".
|
||||
|
||||
In particular, the flex-item-specific "min-width:auto" behavior is
|
||||
supposed to be disabled (e.g. we end up with min-width:0) when
|
||||
"overflow-x" is non-"visible". Moreover, when "overflow-y" is set to a
|
||||
scrolling value, it forces "overflow-x" to compute to a scrolling value
|
||||
as well, as described at
|
||||
http://www.w3.org/TR/css-overflow-3/#overflow-properties
|
||||
So, "overflow-y" has an indirect effect (via "overflow-x") here.
|
||||
-->
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 30px; /* Shrink flex items below min-width */
|
||||
margin-bottom: 2px; /* (Just for spacing things out, visually) */
|
||||
}
|
||||
|
||||
.flexbox > * {
|
||||
/* Flex items have purple border: */
|
||||
border: 2px dotted purple;
|
||||
}
|
||||
|
||||
.flexbox > * > * {
|
||||
/* Flex items' contents are gray & fixed-size: */
|
||||
background: gray;
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.yvisible { overflow-y: visible; }
|
||||
.yhidden { overflow-y: hidden; }
|
||||
.yscroll { overflow-y: scroll; }
|
||||
.yauto { overflow-y: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- min-width:auto should prevent shrinking below intrinsic width when
|
||||
the flex item has "overflow-y: visible", but not for any other
|
||||
overflow-y values (because of overflow-y's influence on overflow-x).
|
||||
-->
|
||||
<div class="flexbox"><div class="yvisible"><div></div></div></div>
|
||||
<div class="flexbox"><div class="yhidden"><div></div></div></div>
|
||||
<div class="flexbox"><div class="yscroll"><div></div></div></div>
|
||||
<div class="flexbox"><div class="yauto"><div></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -129,6 +129,20 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-1.xhtml flexbox-align-s
|
||||
== flexbox-mbp-horiz-3-reverse.xhtml flexbox-mbp-horiz-3-reverse-ref.xhtml
|
||||
== flexbox-mbp-horiz-4.xhtml flexbox-mbp-horiz-4-ref.xhtml
|
||||
|
||||
# Tests for min-height:auto / min-width:auto on flex items
|
||||
== flexbox-min-height-auto-001.html flexbox-min-height-auto-001-ref.html
|
||||
== flexbox-min-height-auto-002a.html flexbox-min-height-auto-002-ref.html
|
||||
fails == flexbox-min-height-auto-002b.html flexbox-min-height-auto-002-ref.html # Bug 1041019
|
||||
== flexbox-min-height-auto-002c.html flexbox-min-height-auto-002-ref.html
|
||||
== flexbox-min-height-auto-003.html flexbox-min-height-auto-003-ref.html
|
||||
== flexbox-min-height-auto-004.html flexbox-min-height-auto-004-ref.html
|
||||
== flexbox-min-width-auto-001.html flexbox-min-width-auto-001-ref.html
|
||||
== flexbox-min-width-auto-002a.html flexbox-min-width-auto-002-ref.html
|
||||
fails == flexbox-min-width-auto-002b.html flexbox-min-width-auto-002-ref.html # Bug 1041019
|
||||
== flexbox-min-width-auto-002c.html flexbox-min-width-auto-002-ref.html
|
||||
== flexbox-min-width-auto-003.html flexbox-min-width-auto-003-ref.html
|
||||
== flexbox-min-width-auto-004.html flexbox-min-width-auto-004-ref.html
|
||||
|
||||
# Tests for flex containers with the "overflow" property set
|
||||
== flexbox-overflow-horiz-1.html flexbox-overflow-horiz-1-ref.html
|
||||
== flexbox-overflow-horiz-2.html flexbox-overflow-horiz-2-ref.html
|
||||
|
||||
@ -2499,7 +2499,7 @@ CSS_PROP_POSITION(
|
||||
CSS_PROPERTY_STORES_CALC |
|
||||
CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH,
|
||||
"",
|
||||
VARIANT_HLP | VARIANT_CALC,
|
||||
VARIANT_AHLP | VARIANT_CALC,
|
||||
nullptr,
|
||||
offsetof(nsStylePosition, mMinHeight),
|
||||
eStyleAnimType_Coord)
|
||||
@ -2512,7 +2512,7 @@ CSS_PROP_POSITION(
|
||||
CSS_PROPERTY_STORES_CALC |
|
||||
CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH,
|
||||
"",
|
||||
VARIANT_HKLP | VARIANT_CALC,
|
||||
VARIANT_AHKLP | VARIANT_CALC,
|
||||
kWidthKTable,
|
||||
offsetof(nsStylePosition, mMinWidth),
|
||||
eStyleAnimType_Coord)
|
||||
|
||||
@ -14,6 +14,8 @@
|
||||
#include "nsError.h"
|
||||
#include "nsDOMString.h"
|
||||
#include "nsIDOMCSSPrimitiveValue.h"
|
||||
#include "nsIFrame.h"
|
||||
#include "nsIFrameInlines.h"
|
||||
#include "nsStyleContext.h"
|
||||
#include "nsIScrollableFrame.h"
|
||||
#include "nsContentUtils.h"
|
||||
@ -22,6 +24,7 @@
|
||||
#include "nsDOMCSSRect.h"
|
||||
#include "nsDOMCSSRGBColor.h"
|
||||
#include "nsDOMCSSValueList.h"
|
||||
#include "nsFlexContainerFrame.h"
|
||||
#include "nsGkAtoms.h"
|
||||
#include "nsHTMLReflowState.h"
|
||||
#include "nsStyleUtil.h"
|
||||
@ -4103,7 +4106,17 @@ CSSValue*
|
||||
nsComputedDOMStyle::DoGetMinHeight()
|
||||
{
|
||||
nsROCSSPrimitiveValue *val = new nsROCSSPrimitiveValue;
|
||||
SetValueToCoord(val, StylePosition()->mMinHeight, true,
|
||||
nsStyleCoord minHeight = StylePosition()->mMinHeight;
|
||||
|
||||
if (eStyleUnit_Auto == minHeight.GetUnit()) {
|
||||
// In non-flexbox contexts, "min-height: auto" means "min-height: 0"
|
||||
// XXXdholbert For flex items, we should set |minHeight| to the
|
||||
// -moz-min-content keyword, instead of 0, once we support -moz-min-content
|
||||
// as a height value.
|
||||
minHeight.SetCoordValue(0);
|
||||
}
|
||||
|
||||
SetValueToCoord(val, minHeight, true,
|
||||
&nsComputedDOMStyle::GetCBContentHeight);
|
||||
return val;
|
||||
}
|
||||
@ -4112,7 +4125,25 @@ CSSValue*
|
||||
nsComputedDOMStyle::DoGetMinWidth()
|
||||
{
|
||||
nsROCSSPrimitiveValue *val = new nsROCSSPrimitiveValue;
|
||||
SetValueToCoord(val, StylePosition()->mMinWidth, true,
|
||||
|
||||
nsStyleCoord minWidth = StylePosition()->mMinWidth;
|
||||
|
||||
if (eStyleUnit_Auto == minWidth.GetUnit()) {
|
||||
// "min-width: auto" means "0", unless we're a flex item in a horizontal
|
||||
// flex container, in which case it means "min-content"
|
||||
minWidth.SetCoordValue(0);
|
||||
if (mOuterFrame && mOuterFrame->IsFlexItem()) {
|
||||
nsIFrame* flexContainer = mOuterFrame->GetParent();
|
||||
MOZ_ASSERT(flexContainer &&
|
||||
flexContainer->GetType() == nsGkAtoms::flexContainerFrame,
|
||||
"IsFlexItem() lied...?");
|
||||
|
||||
if (static_cast<nsFlexContainerFrame*>(flexContainer)->IsHorizontal()) {
|
||||
minWidth.SetIntValue(NS_STYLE_WIDTH_MIN_CONTENT, eStyleUnit_Enumerated);
|
||||
}
|
||||
}
|
||||
}
|
||||
SetValueToCoord(val, minWidth, true,
|
||||
&nsComputedDOMStyle::GetCBContentWidth,
|
||||
nsCSSProps::kWidthKTable);
|
||||
return val;
|
||||
|
||||
@ -7432,7 +7432,7 @@ nsRuleNode::ComputePositionData(void* aStartStruct,
|
||||
SETCOORD_UNSET_INITIAL,
|
||||
aContext, mPresContext, canStoreInRuleTree);
|
||||
SetCoord(*aRuleData->ValueForMinWidth(), pos->mMinWidth, parentPos->mMinWidth,
|
||||
SETCOORD_LPEH | SETCOORD_INITIAL_ZERO | SETCOORD_STORE_CALC |
|
||||
SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
|
||||
SETCOORD_UNSET_INITIAL,
|
||||
aContext, mPresContext, canStoreInRuleTree);
|
||||
SetCoord(*aRuleData->ValueForMaxWidth(), pos->mMaxWidth, parentPos->mMaxWidth,
|
||||
@ -7445,7 +7445,7 @@ nsRuleNode::ComputePositionData(void* aStartStruct,
|
||||
SETCOORD_UNSET_INITIAL,
|
||||
aContext, mPresContext, canStoreInRuleTree);
|
||||
SetCoord(*aRuleData->ValueForMinHeight(), pos->mMinHeight, parentPos->mMinHeight,
|
||||
SETCOORD_LPH | SETCOORD_INITIAL_ZERO | SETCOORD_STORE_CALC |
|
||||
SETCOORD_LPAH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
|
||||
SETCOORD_UNSET_INITIAL,
|
||||
aContext, mPresContext, canStoreInRuleTree);
|
||||
SetCoord(*aRuleData->ValueForMaxHeight(), pos->mMaxHeight, parentPos->mMaxHeight,
|
||||
|
||||
@ -1231,10 +1231,10 @@ nsStylePosition::nsStylePosition(void)
|
||||
mOffset.SetRight(autoCoord);
|
||||
mOffset.SetBottom(autoCoord);
|
||||
mWidth.SetAutoValue();
|
||||
mMinWidth.SetCoordValue(0);
|
||||
mMinWidth.SetAutoValue();
|
||||
mMaxWidth.SetNoneValue();
|
||||
mHeight.SetAutoValue();
|
||||
mMinHeight.SetCoordValue(0);
|
||||
mMinHeight.SetAutoValue();
|
||||
mMaxHeight.SetNoneValue();
|
||||
mFlexBasis.SetAutoValue();
|
||||
|
||||
@ -1444,8 +1444,7 @@ nsChangeHint nsStylePosition::CalcDifference(const nsStylePosition& aOther) cons
|
||||
/* static */ bool
|
||||
nsStylePosition::WidthCoordDependsOnContainer(const nsStyleCoord &aCoord)
|
||||
{
|
||||
return aCoord.GetUnit() == eStyleUnit_Auto ||
|
||||
aCoord.HasPercent() ||
|
||||
return aCoord.HasPercent() ||
|
||||
(aCoord.GetUnit() == eStyleUnit_Enumerated &&
|
||||
(aCoord.GetIntValue() == NS_STYLE_WIDTH_FIT_CONTENT ||
|
||||
aCoord.GetIntValue() == NS_STYLE_WIDTH_AVAILABLE));
|
||||
|
||||
@ -1356,7 +1356,19 @@ struct nsStylePosition {
|
||||
nsStyleGridLine mGridRowEnd;
|
||||
|
||||
bool WidthDependsOnContainer() const
|
||||
{ return WidthCoordDependsOnContainer(mWidth); }
|
||||
{
|
||||
return mWidth.GetUnit() == eStyleUnit_Auto ||
|
||||
WidthCoordDependsOnContainer(mWidth);
|
||||
}
|
||||
|
||||
// NOTE: For a flex item, "min-width:auto" is supposed to behave like
|
||||
// "min-content", which does depend on the container, so you might think we'd
|
||||
// need a special case for "flex item && min-width:auto" here. However,
|
||||
// we don't actually need that special-case code, because flex items are
|
||||
// explicitly supposed to *ignore* their min-width (i.e. behave like it's 0)
|
||||
// until the flex container explicitly considers it. So -- since the flex
|
||||
// container doesn't rely on this method, we don't need to worry about
|
||||
// special behavior for flex items' "min-width:auto" values here.
|
||||
bool MinWidthDependsOnContainer() const
|
||||
{ return WidthCoordDependsOnContainer(mMinWidth); }
|
||||
bool MaxWidthDependsOnContainer() const
|
||||
@ -1369,7 +1381,13 @@ struct nsStylePosition {
|
||||
// FIXME: We should probably change the assumption to be the other way
|
||||
// around.
|
||||
bool HeightDependsOnContainer() const
|
||||
{ return HeightCoordDependsOnContainer(mHeight); }
|
||||
{
|
||||
return mHeight.GetUnit() == eStyleUnit_Auto || // CSS 2.1, 10.6.4, item (5)
|
||||
HeightCoordDependsOnContainer(mHeight);
|
||||
}
|
||||
|
||||
// NOTE: The comment above MinWidthDependsOnContainer about flex items
|
||||
// applies here, too.
|
||||
bool MinHeightDependsOnContainer() const
|
||||
{ return HeightCoordDependsOnContainer(mMinHeight); }
|
||||
bool MaxHeightDependsOnContainer() const
|
||||
@ -1383,10 +1401,7 @@ struct nsStylePosition {
|
||||
private:
|
||||
static bool WidthCoordDependsOnContainer(const nsStyleCoord &aCoord);
|
||||
static bool HeightCoordDependsOnContainer(const nsStyleCoord &aCoord)
|
||||
{
|
||||
return aCoord.GetUnit() == eStyleUnit_Auto || // CSS 2.1, 10.6.4, item (5)
|
||||
aCoord.HasPercent();
|
||||
}
|
||||
{ return aCoord.HasPercent(); }
|
||||
};
|
||||
|
||||
struct nsStyleTextOverflowSide {
|
||||
|
||||
@ -128,6 +128,7 @@ skip-if = toolkit == 'android' #bug 536603
|
||||
[test_flexbox_flex_shorthand.html]
|
||||
[test_flexbox_layout.html]
|
||||
support-files = flexbox_layout_testcases.js
|
||||
[test_flexbox_min_size_auto.html]
|
||||
[test_flexbox_order.html]
|
||||
[test_flexbox_order_table.html]
|
||||
[test_font_face_parser.html]
|
||||
|
||||
@ -2827,7 +2827,7 @@ var gCSSProperties = {
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
prerequisites: { "display": "block" },
|
||||
initial_values: [ "0", "calc(0em)", "calc(-2px)", "calc(-1%)" ],
|
||||
initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)", "calc(-1%)" ],
|
||||
other_values: [ "30px", "50%",
|
||||
"calc(2px)",
|
||||
"calc(50%)",
|
||||
@ -2835,14 +2835,14 @@ var gCSSProperties = {
|
||||
"calc(25px*3)",
|
||||
"calc(3*25px + 50%)",
|
||||
],
|
||||
invalid_values: [ "auto", "none", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available", "5" ]
|
||||
invalid_values: ["none", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available", "5" ]
|
||||
},
|
||||
"min-width": {
|
||||
domProp: "minWidth",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
prerequisites: { "display": "block" },
|
||||
initial_values: [ "0", "calc(0em)", "calc(-2px)", "calc(-1%)" ],
|
||||
initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)", "calc(-1%)" ],
|
||||
other_values: [ "30px", "50%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
|
||||
"calc(2px)",
|
||||
"calc(50%)",
|
||||
@ -2850,7 +2850,7 @@ var gCSSProperties = {
|
||||
"calc(25px*3)",
|
||||
"calc(3*25px + 50%)",
|
||||
],
|
||||
invalid_values: [ "auto", "none", "5" ]
|
||||
invalid_values: [ "none", "5" ]
|
||||
},
|
||||
|
||||
"opacity": {
|
||||
|
||||
144
layout/style/test/test_flexbox_min_size_auto.html
Normal file
144
layout/style/test/test_flexbox_min_size_auto.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<!--
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=763689
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test behavior of 'min-height:auto' and 'min-width:auto' (Bug 763689)</title>
|
||||
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=763689">Mozilla Bug 763689</a>
|
||||
<body>
|
||||
<div id="display">
|
||||
<div id="non-flex-item">abc</div>
|
||||
<div style="display: flex">
|
||||
<div id="horizontal-flex-item">abc</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div id="vertical-flex-item">abc</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre id="test">
|
||||
<script type="application/javascript">
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Test 'min-height:auto' and 'min-width:auto' (Bug 763689)
|
||||
* ========================================================
|
||||
* This test checks the computed-style value of the "auto" keyword introduced
|
||||
* for the "min-height" and "min-width" properties in CSS3 Flexbox Section 4.5.
|
||||
* http://www.w3.org/TR/css3-flexbox/#min-size-auto
|
||||
*
|
||||
* Quoting that chunk of spec:
|
||||
* # auto
|
||||
* # When used as the value of a flex item's min main size property,
|
||||
* # this keyword indicates a minimum of the min-content size, to
|
||||
* # help ensure that the item is large enough to fit its contents.
|
||||
* #
|
||||
* # | It is intended that this will compute to the 'min-content'
|
||||
* # | keyword when the specification defining it (Writing Modes
|
||||
* # | Appendix D) is sufficiently mature.
|
||||
* #
|
||||
* # Otherwise, this keyword computes to '0' (unless otherwise
|
||||
* # defined by a future specification).
|
||||
*
|
||||
* So, since we already support the "min-content" keyword, this effectively
|
||||
* means:
|
||||
* - On a horizontal flex item, "min-width: auto" computes to "min-content".
|
||||
* - On a vertical flex item, "min-height: auto" computes to "min-content".
|
||||
* - In all other cases, "min-[width|height]: auto" computes to 0.
|
||||
* That's what this mochitest aims to check, via getComputedStyle().
|
||||
*
|
||||
* NOTE: As of this test's writing, we don't yet support enumerated keyword
|
||||
* values (including "min-content") for the "min-height" property. So for
|
||||
* now, "min-height: auto" always produces "0" in getComputedStyle, even on
|
||||
* a vertical flex item. (Though internally, we do know that it's really
|
||||
* "auto", and our flex container will correctly use the flex item's
|
||||
* min-content height as needed in layout.)
|
||||
*/
|
||||
|
||||
// Given an element ID, this function sets the corresponding
|
||||
// element's inline-style min-width and min-height explicitly to "auto".
|
||||
function setElemMinSizesToAuto(aElemId) {
|
||||
var elem = document.getElementById(aElemId);
|
||||
|
||||
is(elem.style.minWidth, "", "min-width should be initially unset");
|
||||
elem.style.minWidth = "auto";
|
||||
is(elem.style.minWidth, "auto", "min-width should accept 'auto' value");
|
||||
|
||||
is(elem.style.minHeight, "", "min-height should be initially unset");
|
||||
elem.style.minHeight = "auto";
|
||||
is(elem.style.minHeight, "auto", "min-height should accept 'auto' value");
|
||||
}
|
||||
|
||||
// Given an element ID, this function compares the corresponding element's
|
||||
// computed min-width and min-height against expected values.
|
||||
// (There's an optional final argument, to specify a "todo" expected value for
|
||||
// the min-height, for cases when we *should* have a particular value, but we
|
||||
// don't support it yet. In that case, aExpectedMinHeight is the value we
|
||||
// currently expect to have, and aExpectedMinHeightTodo is the value we really
|
||||
// *should* have.)
|
||||
function checkElemMinSizes(aElemId,
|
||||
aExpectedMinWidth,
|
||||
aExpectedMinHeight,
|
||||
aExpectedMinHeightTodo /* optional */)
|
||||
{
|
||||
var elem = document.getElementById(aElemId);
|
||||
is(window.getComputedStyle(elem, "").minWidth, aExpectedMinWidth,
|
||||
"checking min-width of " + aElemId);
|
||||
|
||||
is(window.getComputedStyle(elem, "").minHeight, aExpectedMinHeight,
|
||||
"checking min-height of " + aElemId);
|
||||
|
||||
// Special bonus check, if the *real* expected value is something we don't
|
||||
// support yet.
|
||||
if (typeof aExpectedMinHeightTodo != 'undefined') {
|
||||
todo_is(window.getComputedStyle(elem, "").minHeight, aExpectedMinHeightTodo,
|
||||
"checking the ultimately-correct min-height of " + aElemId);
|
||||
}
|
||||
}
|
||||
|
||||
// This function goes through all the elements we're interested in
|
||||
// and checks their computed min-sizes against expected values,
|
||||
// farming out each per-element job to checkElemMinSizes.
|
||||
function checkAllTheMinSizes() {
|
||||
// This is the normal part -- generally, the default value of "min-width"
|
||||
// and "min-height" (auto) computes to "0px".
|
||||
checkElemMinSizes("non-flex-item", "0px", "0px");
|
||||
|
||||
// ...but for a flex item in a horizontal flex container, "min-width: auto"
|
||||
// computes to "min-content".
|
||||
checkElemMinSizes("horizontal-flex-item", "-moz-min-content", "0px");
|
||||
|
||||
// ...and for a flex item in a vertical flex container, "min-height: auto"
|
||||
// computes to "min-content" (except for now, it computes to "0px", because
|
||||
// we don't support "min-content" on heights yet. We pass "-moz-min-content"
|
||||
// as the final arg, to get it checked as the "todo" min-height.)
|
||||
checkElemMinSizes("vertical-flex-item", "0px", "0px", "-moz-min-content");
|
||||
}
|
||||
|
||||
// Main test function
|
||||
function main() {
|
||||
// First: check that min-sizes are what we expect, with min-size properties
|
||||
// at their initial value.
|
||||
checkAllTheMinSizes();
|
||||
|
||||
// Now, we *explicitly* set min-size properties to "auto"...
|
||||
var elemIds = [ "non-flex-item",
|
||||
"horizontal-flex-item",
|
||||
"vertical-flex-item"];
|
||||
elemIds.forEach(setElemMinSizesToAuto);
|
||||
|
||||
// ...and try again (should have the same result):
|
||||
checkAllTheMinSizes();
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,10 +3,10 @@
|
||||
# Android
|
||||
ac_add_options --target=arm-linux-androideabi
|
||||
|
||||
ac_add_options --enable-updater
|
||||
|
||||
ac_add_options --with-branding=mobile/android/branding/beta
|
||||
|
||||
ac_add_options --enable-updater
|
||||
|
||||
export MOZILLA_OFFICIAL=1
|
||||
export MOZ_TELEMETRY_REPORTING=1
|
||||
|
||||
|
||||
@ -459,7 +459,7 @@ class MozbuildObject(ProcessExecutionMixin):
|
||||
'append_env': append_env,
|
||||
'explicit_env': explicit_env,
|
||||
'log_level': logging.INFO,
|
||||
'require_unix_environment': True,
|
||||
'require_unix_environment': False,
|
||||
'ensure_exit_code': ensure_exit_code,
|
||||
'pass_thru': pass_thru,
|
||||
|
||||
|
||||
@ -87,7 +87,7 @@ private:
|
||||
};
|
||||
|
||||
|
||||
class gfxASurface;
|
||||
#include "gfxASurface.h"
|
||||
class ProfilerMarkerImagePayload : public ProfilerMarkerPayload
|
||||
{
|
||||
public:
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
#include "mozilla/Alignment.h"
|
||||
#include "mozilla/Assertions.h"
|
||||
#include "mozilla/MemoryReporting.h"
|
||||
#include "mozilla/Move.h"
|
||||
#include "mozilla/TypeTraits.h"
|
||||
|
||||
#include <string.h>
|
||||
@ -468,14 +469,14 @@ public:
|
||||
}
|
||||
// Invoke the copy-constructor in place.
|
||||
template<class A>
|
||||
static inline void Construct(E* aE, const A& aArg)
|
||||
static inline void Construct(E* aE, A &&aArg)
|
||||
{
|
||||
typedef typename mozilla::RemoveCV<E>::Type E_NoCV;
|
||||
typedef typename mozilla::RemoveCV<A>::Type A_NoCV;
|
||||
static_assert(!mozilla::IsSame<E_NoCV*, A_NoCV>::value,
|
||||
"For safety, we disallow constructing nsTArray<E> elements "
|
||||
"from E* pointers. See bug 960591.");
|
||||
new (static_cast<void*>(aE)) E(aArg);
|
||||
new (static_cast<void*>(aE)) E(mozilla::Forward<A>(aArg));
|
||||
}
|
||||
// Invoke the destructor in place.
|
||||
static inline void Destruct(E* aE) { aE->~E(); }
|
||||
@ -1254,6 +1255,20 @@ public:
|
||||
return AppendElements(&aItem, 1);
|
||||
}
|
||||
|
||||
// A variation of AppendElement that takes an r-value reference
|
||||
elem_type* AppendElement(elem_type&& aItem)
|
||||
{
|
||||
if (!Alloc::Successful(this->EnsureCapacity(Length() + 1,
|
||||
sizeof(elem_type))))
|
||||
return nullptr;
|
||||
index_type len = Length();
|
||||
elem_type* iter = Elements() + len;
|
||||
nsTArrayElementTraits<elem_type>::Construct(iter, mozilla::Forward<elem_type>(aItem));
|
||||
this->IncrementLength(1);
|
||||
return iter;
|
||||
}
|
||||
|
||||
|
||||
// Append new elements without copy-constructing. This is useful to avoid
|
||||
// temporaries.
|
||||
// @return A pointer to the newly appended elements, or null on OOM.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user