Bug 702508 part 1: Support parsing/computing the CSS property "flex-wrap". r=dbaron

This commit is contained in:
Daniel Holbert 2013-12-05 10:57:50 -08:00
parent b63cc40f42
commit 99dab87905
12 changed files with 62 additions and 6 deletions

View File

@ -578,6 +578,8 @@ CSS_KEY(wider, wider)
CSS_KEY(window, window)
CSS_KEY(windowframe, windowframe)
CSS_KEY(windowtext, windowtext)
CSS_KEY(wrap, wrap)
CSS_KEY(wrap-reverse, wrap_reverse)
CSS_KEY(write-only, write_only)
CSS_KEY(x-large, x_large)
CSS_KEY(x-small, x_small)

View File

@ -1677,6 +1677,16 @@ CSS_PROP_POSITION(
nullptr,
offsetof(nsStylePosition, mFlexShrink),
eStyleAnimType_float) // float, except animations to/from 0 shouldn't work
CSS_PROP_POSITION(
flex-wrap,
flex_wrap,
FlexWrap,
CSS_PROPERTY_PARSE_VALUE,
"",
VARIANT_HK,
kFlexWrapKTable,
offsetof(nsStylePosition, mFlexWrap),
eStyleAnimType_EnumU8)
CSS_PROP_POSITION(
order,
order,

View File

@ -1001,6 +1001,13 @@ const int32_t nsCSSProps::kFlexDirectionKTable[] = {
eCSSKeyword_UNKNOWN,-1
};
const int32_t nsCSSProps::kFlexWrapKTable[] = {
eCSSKeyword_nowrap, NS_STYLE_FLEX_WRAP_NOWRAP,
eCSSKeyword_wrap, NS_STYLE_FLEX_WRAP_WRAP,
eCSSKeyword_wrap_reverse, NS_STYLE_FLEX_WRAP_WRAP_REVERSE,
eCSSKeyword_UNKNOWN,-1
};
const int32_t nsCSSProps::kJustifyContentKTable[] = {
eCSSKeyword_flex_start, NS_STYLE_JUSTIFY_CONTENT_FLEX_START,
eCSSKeyword_flex_end, NS_STYLE_JUSTIFY_CONTENT_FLEX_END,

View File

@ -482,6 +482,7 @@ public:
static const int32_t kAlignItemsKTable[];
static const int32_t kAlignSelfKTable[];
static const int32_t kFlexDirectionKTable[];
static const int32_t kFlexWrapKTable[];
static const int32_t kJustifyContentKTable[];
static const int32_t kFloatKTable[];
static const int32_t kFloatEdgeKTable[];

View File

@ -3438,6 +3438,16 @@ nsComputedDOMStyle::DoGetFlexShrink()
return val;
}
CSSValue*
nsComputedDOMStyle::DoGetFlexWrap()
{
nsROCSSPrimitiveValue* val = new nsROCSSPrimitiveValue;
val->SetIdent(
nsCSSProps::ValueToKeywordEnum(StylePosition()->mFlexWrap,
nsCSSProps::kFlexWrapKTable));
return val;
}
CSSValue*
nsComputedDOMStyle::DoGetOrder()
{

View File

@ -445,6 +445,7 @@ private:
mozilla::dom::CSSValue* DoGetFlexDirection();
mozilla::dom::CSSValue* DoGetFlexGrow();
mozilla::dom::CSSValue* DoGetFlexShrink();
mozilla::dom::CSSValue* DoGetFlexWrap();
mozilla::dom::CSSValue* DoGetOrder();
mozilla::dom::CSSValue* DoGetJustifyContent();

View File

@ -110,6 +110,7 @@ COMPUTED_STYLE_PROP(flex_basis, FlexBasis)
COMPUTED_STYLE_PROP(flex_direction, FlexDirection)
COMPUTED_STYLE_PROP(flex_grow, FlexGrow)
COMPUTED_STYLE_PROP(flex_shrink, FlexShrink)
COMPUTED_STYLE_PROP(flex_wrap, FlexWrap)
COMPUTED_STYLE_PROP(float, Float)
//// COMPUTED_STYLE_PROP(font, Font)
COMPUTED_STYLE_PROP(font_family, FontFamily)

View File

@ -7041,6 +7041,13 @@ nsRuleNode::ComputePositionData(void* aStartStruct,
parentPos->mFlexShrink, 1.0f,
SETFCT_UNSET_INITIAL);
// flex-wrap: enum, inherit, initial
SetDiscrete(*aRuleData->ValueForFlexWrap(),
pos->mFlexWrap, canStoreInRuleTree,
SETDSC_ENUMERATED | SETDSC_UNSET_INITIAL,
parentPos->mFlexWrap,
NS_STYLE_FLEX_WRAP_NOWRAP, 0, 0, 0, 0);
// order: integer, inherit, initial
SetDiscrete(*aRuleData->ValueForOrder(),
pos->mOrder, canStoreInRuleTree,

View File

@ -424,6 +424,11 @@ static inline mozilla::css::Side operator++(mozilla::css::Side& side, int) {
#define NS_STYLE_FLEX_DIRECTION_COLUMN 2
#define NS_STYLE_FLEX_DIRECTION_COLUMN_REVERSE 3
// See nsStylePosition
#define NS_STYLE_FLEX_WRAP_NOWRAP 0
#define NS_STYLE_FLEX_WRAP_WRAP 1
#define NS_STYLE_FLEX_WRAP_WRAP_REVERSE 2
// See nsStylePosition
// NOTE: This is the initial value of the integer-valued 'order' property
// (rather than an internal numerical representation of some keyword).

View File

@ -1275,6 +1275,7 @@ nsStylePosition::nsStylePosition(void)
mAlignItems = NS_STYLE_ALIGN_ITEMS_INITIAL_VALUE;
mAlignSelf = NS_STYLE_ALIGN_SELF_AUTO;
mFlexDirection = NS_STYLE_FLEX_DIRECTION_ROW;
mFlexWrap = NS_STYLE_FLEX_WRAP_NOWRAP;
mJustifyContent = NS_STYLE_JUSTIFY_CONTENT_FLEX_START;
mOrder = NS_STYLE_ORDER_INITIAL;
mFlexGrow = 0.0f;
@ -1327,13 +1328,15 @@ nsChangeHint nsStylePosition::CalcDifference(const nsStylePosition& aOther) cons
return NS_CombineHint(hint, nsChangeHint_AllReflowHints);
}
// Properties that apply to flexbox containers:
// flex-direction can swap a flexbox between vertical & horizontal.
// align-items can change the sizing of a flexbox & the positioning
// of its children.
// Properties that apply to flex containers:
// - flex-direction can swap a flex container between vertical & horizontal.
// - align-items can change the sizing of a flex container & the positioning
// of its children.
// - flex-wrap changes whether a flex container's children are wrapped, which
// impacts their sizing/positioning and hence impacts the container's size.
if (mAlignItems != aOther.mAlignItems ||
mFlexDirection != aOther.mFlexDirection) {
mFlexDirection != aOther.mFlexDirection ||
mFlexWrap != aOther.mFlexWrap) {
return NS_CombineHint(hint, nsChangeHint_AllReflowHints);
}

View File

@ -1132,6 +1132,7 @@ struct nsStylePosition {
uint8_t mAlignItems; // [reset] see nsStyleConsts.h
uint8_t mAlignSelf; // [reset] see nsStyleConsts.h
uint8_t mFlexDirection; // [reset] see nsStyleConsts.h
uint8_t mFlexWrap; // [reset] see nsStyleConsts.h
uint8_t mJustifyContent; // [reset] see nsStyleConsts.h
int32_t mOrder; // [reset] integer
float mFlexGrow; // [reset] float

View File

@ -3844,6 +3844,14 @@ var gCSSProperties = {
other_values: [ "3", "0", "0.0", "2.5", "123" ],
invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ]
},
"flex-wrap": {
domProp: "flexWrap",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "nowrap" ],
other_values: [ "wrap", "wrap-reverse" ],
invalid_values: [ "10px", "30%", "justify", "column wrap", "auto" ]
},
"order": {
domProp: "order",
inherited: false,