From 4fe6be60d10767f3b875923fcbbc7c6864846364 Mon Sep 17 00:00:00 2001 From: Daniel Holbert Date: Fri, 6 Jul 2012 17:06:19 -0700 Subject: [PATCH] Bug 696253, patch 2: implement parsing/computation for CSS property 'order'. r=dbaron --- dom/interfaces/css/nsIDOMCSS2Properties.idl | 3 +++ layout/base/nsStyleConsts.h | 5 +++++ layout/style/nsCSSPropList.h | 10 ++++++++++ layout/style/nsComputedDOMStyle.cpp | 9 +++++++++ layout/style/nsComputedDOMStyle.h | 1 + layout/style/nsRuleNode.cpp | 6 ++++++ layout/style/nsStyleAnimation.cpp | 10 ++++++++++ layout/style/nsStyleStruct.cpp | 9 +++++++++ layout/style/nsStyleStruct.h | 1 + layout/style/test/property_database.js | 8 ++++++++ .../test/test_transitions_per_property.html | 16 +++++++++++----- 11 files changed, 73 insertions(+), 5 deletions(-) diff --git a/dom/interfaces/css/nsIDOMCSS2Properties.idl b/dom/interfaces/css/nsIDOMCSS2Properties.idl index 230ccde197e0..a219e651b32d 100644 --- a/dom/interfaces/css/nsIDOMCSS2Properties.idl +++ b/dom/interfaces/css/nsIDOMCSS2Properties.idl @@ -762,6 +762,9 @@ interface nsIDOMCSS2Properties : nsISupports layout engine responds to them. In builds with MOZ_FLEXBOX enabled, this block should be uncommented (and this interface's uuid should be revved). (This would be #ifdef MOZ_FLEXBOX, if that worked in IDL files.) + attribute DOMString MozOrder; + // raises(DOMException) on setting + attribute DOMString MozJustifyContent; // raises(DOMException) on setting */ diff --git a/layout/base/nsStyleConsts.h b/layout/base/nsStyleConsts.h index f4f88afaa3ae..2fd59b79d661 100644 --- a/layout/base/nsStyleConsts.h +++ b/layout/base/nsStyleConsts.h @@ -398,6 +398,11 @@ static inline mozilla::css::Side operator++(mozilla::css::Side& side, int) { #endif // MOZ_FLEXBOX #ifdef MOZ_FLEXBOX +// See nsStylePosition +// NOTE: This is the initial value of the integer-valued 'order' property +// (rather than an internal numerical representation of some keyword). +#define NS_STYLE_ORDER_INITIAL 0 + // See nsStylePosition #define NS_STYLE_JUSTIFY_CONTENT_FLEX_START 0 #define NS_STYLE_JUSTIFY_CONTENT_FLEX_END 1 diff --git a/layout/style/nsCSSPropList.h b/layout/style/nsCSSPropList.h index 418cc2bc7832..39b820f7fece 100644 --- a/layout/style/nsCSSPropList.h +++ b/layout/style/nsCSSPropList.h @@ -1512,6 +1512,16 @@ CSS_PROP_TABLEBORDER( CSS_PROP_NO_OFFSET, eStyleAnimType_None) #ifdef MOZ_FLEXBOX +CSS_PROP_POSITION( + -moz-order, + order, + CSS_PROP_DOMPROP_PREFIXED(Order), + CSS_PROPERTY_PARSE_VALUE, + "", + VARIANT_HI, + nsnull, + offsetof(nsStylePosition, mOrder), + eStyleAnimType_Custom) // CSS_PROP_POSITION( -moz-justify-content, justify_content, diff --git a/layout/style/nsComputedDOMStyle.cpp b/layout/style/nsComputedDOMStyle.cpp index 30335103dc4e..2f6bd08a9726 100644 --- a/layout/style/nsComputedDOMStyle.cpp +++ b/layout/style/nsComputedDOMStyle.cpp @@ -2925,6 +2925,14 @@ nsComputedDOMStyle::DoGetBorderImageRepeat() } #ifdef MOZ_FLEXBOX +nsIDOMCSSValue* +nsComputedDOMStyle::DoGetOrder() +{ + nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue(); + val->SetNumber(GetStylePosition()->mOrder); + return val; +} + nsIDOMCSSValue* nsComputedDOMStyle::DoGetJustifyContent() { @@ -4658,6 +4666,7 @@ nsComputedDOMStyle::GetQueryablePropertyMap(PRUint32* aLength) COMPUTED_STYLE_MAP_ENTRY(image_region, ImageRegion), #ifdef MOZ_FLEXBOX COMPUTED_STYLE_MAP_ENTRY(justify_content, JustifyContent), + COMPUTED_STYLE_MAP_ENTRY(order, Order), #endif // MOZ_FLEXBOX COMPUTED_STYLE_MAP_ENTRY(orient, Orient), COMPUTED_STYLE_MAP_ENTRY_LAYOUT(_moz_outline_radius_bottomLeft, OutlineRadiusBottomLeft), diff --git a/layout/style/nsComputedDOMStyle.h b/layout/style/nsComputedDOMStyle.h index d31fdb4b743d..a54ebb1dd370 100644 --- a/layout/style/nsComputedDOMStyle.h +++ b/layout/style/nsComputedDOMStyle.h @@ -359,6 +359,7 @@ private: #ifdef MOZ_FLEXBOX /* CSS Flexbox properties */ + nsIDOMCSSValue* DoGetOrder(); nsIDOMCSSValue* DoGetJustifyContent(); #endif // MOZ_FLEXBOX diff --git a/layout/style/nsRuleNode.cpp b/layout/style/nsRuleNode.cpp index 7cb0795a25cc..f042de498194 100644 --- a/layout/style/nsRuleNode.cpp +++ b/layout/style/nsRuleNode.cpp @@ -6425,6 +6425,12 @@ nsRuleNode::ComputePositionData(void* aStartStruct, NS_STYLE_BOX_SIZING_CONTENT, 0, 0, 0, 0); #ifdef MOZ_FLEXBOX + // order: integer, inherit, initial + SetDiscrete(*aRuleData->ValueForOrder(), + pos->mOrder, canStoreInRuleTree, + SETDSC_INTEGER, parentPos->mOrder, + NS_STYLE_ORDER_INITIAL, 0, 0, 0, 0); + // justify-content: enum, inherit, initial SetDiscrete(*aRuleData->ValueForJustifyContent(), pos->mJustifyContent, canStoreInRuleTree, diff --git a/layout/style/nsStyleAnimation.cpp b/layout/style/nsStyleAnimation.cpp index 618c645d71a2..ad0c4985c602 100644 --- a/layout/style/nsStyleAnimation.cpp +++ b/layout/style/nsStyleAnimation.cpp @@ -2553,6 +2553,16 @@ nsStyleAnimation::ExtractComputedValue(nsCSSProperty aProperty, break; } +#ifdef MOZ_FLEXBOX + case eCSSProperty_order: { + const nsStylePosition *stylePosition = + static_cast(styleStruct); + aComputedValue.SetIntValue(stylePosition->mOrder, + eUnit_Integer); + break; + } +#endif // MOZ_FLEXBOX + case eCSSProperty_text_decoration_color: { const nsStyleTextReset *styleTextReset = static_cast(styleStruct); diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp index c3a053b9a929..4d2a6a885ce4 100644 --- a/layout/style/nsStyleStruct.cpp +++ b/layout/style/nsStyleStruct.cpp @@ -1127,6 +1127,7 @@ nsStylePosition::nsStylePosition(void) mBoxSizing = NS_STYLE_BOX_SIZING_CONTENT; #ifdef MOZ_FLEXBOX mJustifyContent = NS_STYLE_JUSTIFY_CONTENT_FLEX_START; + mOrder = NS_STYLE_ORDER_INITIAL; #endif // MOZ_FLEXBOX mZIndex.SetAutoValue(); } @@ -1153,6 +1154,14 @@ nsChangeHint nsStylePosition::CalcDifference(const nsStylePosition& aOther) cons } #ifdef MOZ_FLEXBOX + // Properties that apply to flex items: + // NOTE: Changes to "order" on a flex item may trigger some repositioning. + // If we're in a multi-line flex container, it also may affect our size + // (and that of our container & siblings) by shuffling items between lines. + if (mOrder != aOther.mOrder) { + return NS_CombineHint(hint, nsChangeHint_ReflowFrame); + } + // Properties that apply to flexbox containers: // Changing justify-content on a flexbox might affect the positioning of its // children, but it won't affect any sizing. diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h index 8d685018e2dd..47e755b14bb3 100644 --- a/layout/style/nsStyleStruct.h +++ b/layout/style/nsStyleStruct.h @@ -1095,6 +1095,7 @@ struct nsStylePosition { PRUint8 mBoxSizing; // [reset] see nsStyleConsts.h #ifdef MOZ_FLEXBOX PRUint8 mJustifyContent; // [reset] see nsStyleConsts.h + PRInt32 mOrder; // [reset] integer #endif // MOZ_FLEXBOX nsStyleCoord mZIndex; // [reset] integer, auto diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index c1886e810fd2..fa251f56ee02 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -738,6 +738,14 @@ var gCSSProperties = { }, /* XXXdholbert In builds with MOZ_FLEXBOX enabled, this should be uncommented. (This would be #ifdef MOZ_FLEXBOX, if that worked in JS files.) + "-moz-order": { + domProp: "MozOrder", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "0" ], + other_values: [ "1", "99999", "-1", "-50" ], + invalid_values: [ "0px", "1.0", "1.", "1%", "0.2", "3em", "stretch" ] + }, "-moz-justify-content": { domProp: "MozJustifyContent", inherited: false, diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html index a990e8c64613..927bc023f97c 100644 --- a/layout/style/test/test_transitions_per_property.html +++ b/layout/style/test/test_transitions_per_property.html @@ -115,6 +115,12 @@ var supported_properties = { // opacity is clamped in computed style // (not parsing/interpolation) test_float_zeroToOne_clamped ], +/* XXXdholbert In builds with MOZ_FLEXBOX enabled, this should be uncommented. + (This would be #ifdef MOZ_FLEXBOX, if that worked in JS files.) + + "-moz-order": [ test_integer_transition ], + +*/ "flood-color": [ test_color_transition ], "flood-opacity" : [ test_float_zeroToOne_transition, // opacity is clamped in computed style @@ -233,7 +239,7 @@ var supported_properties = { test_length_percent_calc_transition, test_length_clamped, test_percent_clamped ], "word-spacing": [ test_length_transition, test_length_unclamped ], - "z-index": [ test_zindex_transition, test_pos_integer_or_auto_transition ], + "z-index": [ test_integer_transition, test_pos_integer_or_auto_transition ], }; var div = document.getElementById("display"); @@ -849,7 +855,7 @@ function test_radius_transition(prop) { div.style.removeProperty("padding"); } -function test_zindex_transition(prop) { +function test_integer_transition(prop) { div.style.setProperty("-moz-transition-property", "none", ""); div.style.setProperty(prop, "4", ""); is(cs.getPropertyValue(prop), "4", @@ -859,12 +865,12 @@ function test_zindex_transition(prop) { is(cs.getPropertyValue(prop), "-1", "integer-valued property " + prop + ": interpolation of integers"); check_distance(prop, "6", "1", "-14"); - div.style.setProperty(prop, "auto", ""); - is(cs.getPropertyValue(prop), "auto", - "integer-valued property " + prop + ": auto not interpolable"); + + div.style.setProperty("-moz-transition-property", "none", ""); div.style.setProperty(prop, "-4", ""); is(cs.getPropertyValue(prop), "-4", "integer-valued property " + prop + ": computed value before transition"); + div.style.setProperty("-moz-transition-property", prop, ""); div.style.setProperty(prop, "8", ""); is(cs.getPropertyValue(prop), "-1", "integer-valued property " + prop + ": interpolation of integers");