зеркало из https://github.com/mozilla/gecko-dev.git
Bug 797601 part 1: Add flexbox properties to mochitest files property_database.js and test_transitions_per_property.html IFF pref is enabled. r=bz
This commit is contained in:
Daniel Holbert
Родитель
1781ae5837
Коммит
d7dc5f8035
|
|
@ -859,173 +859,6 @@ var gCSSProperties = {
|
|||
],
|
||||
invalid_values: [ "20", "-1px", "50%" ]
|
||||
},
|
||||
/* XXXdholbert In builds with MOZ_FLEXBOX enabled, this should be uncommented.
|
||||
(This would be #ifdef MOZ_FLEXBOX, if that worked in JS files.)
|
||||
"-moz-align-items": {
|
||||
domProp: "MozAlignItems",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "stretch" ],
|
||||
other_values: [ "flex-start", "flex-end", "center", "baseline" ],
|
||||
invalid_values: [ "space-between", "abc", "30px" ]
|
||||
},
|
||||
"-moz-align-self": {
|
||||
domProp: "MozAlignSelf",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
// (Assuming defaults on the parent, 'auto' will compute to 'stretch'.)
|
||||
initial_values: [ "auto", "stretch" ],
|
||||
other_values: [ "flex-start", "flex-end", "center", "baseline" ],
|
||||
invalid_values: [ "space-between", "abc", "30px" ]
|
||||
},
|
||||
"-moz-flex": {
|
||||
domProp: "MozFlex",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_TRUE_SHORTHAND,
|
||||
subproperties: [
|
||||
"-moz-flex-grow",
|
||||
"-moz-flex-shrink",
|
||||
"-moz-flex-basis"
|
||||
],
|
||||
initial_values: [ "0 1 auto", "auto 0 1", "0 auto", "auto 0" ],
|
||||
other_values: [
|
||||
"none",
|
||||
"1",
|
||||
"0",
|
||||
"0 1",
|
||||
"0.5",
|
||||
"1.2 3.4",
|
||||
"0 0 0px",
|
||||
"0px 0 0",
|
||||
"5px 0 0",
|
||||
"2 auto",
|
||||
"auto 4",
|
||||
"auto 5.6 7.8",
|
||||
"-moz-max-content",
|
||||
"1 -moz-max-content",
|
||||
"1 2 -moz-max-content",
|
||||
"-moz-max-content 1",
|
||||
"-moz-max-content 1 2",
|
||||
"-0"
|
||||
],
|
||||
invalid_values: [
|
||||
"0 0 0",
|
||||
"1 2px 3",
|
||||
"1 auto 3",
|
||||
"1px 2 3px",
|
||||
"1px 2 3 4px",
|
||||
"-1",
|
||||
"1 -1"
|
||||
]
|
||||
},
|
||||
"-moz-flex-basis": {
|
||||
domProp: "MozFlexBasis",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ " auto" ],
|
||||
// NOTE: This is cribbed directly from the "width" chunk, since this
|
||||
// property takes the exact same values as width (albeit with
|
||||
// different semantics on 'auto').
|
||||
// XXXdholbert (Maybe these should get separated out into
|
||||
// a reusable array defined at the top of this file?)
|
||||
other_values: [ "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
|
||||
// valid calc() values
|
||||
"calc(-2px)",
|
||||
"calc(2px)",
|
||||
"calc(50%)",
|
||||
"calc(50% + 2px)",
|
||||
"calc( 50% + 2px)",
|
||||
"calc(50% + 2px )",
|
||||
"calc( 50% + 2px )",
|
||||
"calc(50% - -2px)",
|
||||
"calc(2px - -50%)",
|
||||
"calc(3*25px)",
|
||||
"calc(3 *25px)",
|
||||
"calc(3 * 25px)",
|
||||
"calc(3* 25px)",
|
||||
"calc(25px*3)",
|
||||
"calc(25px *3)",
|
||||
"calc(25px* 3)",
|
||||
"calc(25px * 3)",
|
||||
"calc(3*25px + 50%)",
|
||||
"calc(50% - 3em + 2px)",
|
||||
"calc(50% - (3em + 2px))",
|
||||
"calc((50% - 3em) + 2px)",
|
||||
"calc(2em)",
|
||||
"calc(50%)",
|
||||
"calc(50px/2)",
|
||||
"calc(50px/(2 - 1))"
|
||||
],
|
||||
invalid_values: [ "none", "-2px",
|
||||
// invalid calc() values
|
||||
"calc(50%+ 2px)",
|
||||
"calc(50% +2px)",
|
||||
"calc(50%+2px)",
|
||||
"-moz-min()",
|
||||
"calc(min())",
|
||||
"-moz-max()",
|
||||
"calc(max())",
|
||||
"-moz-min(5px)",
|
||||
"calc(min(5px))",
|
||||
"-moz-max(5px)",
|
||||
"calc(max(5px))",
|
||||
"-moz-min(5px,2em)",
|
||||
"calc(min(5px,2em))",
|
||||
"-moz-max(5px,2em)",
|
||||
"calc(max(5px,2em))",
|
||||
"calc(50px/(2 - 2))",
|
||||
// If we ever support division by values, which is
|
||||
// complicated for the reasons described in
|
||||
// http://lists.w3.org/Archives/Public/www-style/2010Jan/0007.html
|
||||
// , we should support all 4 of these as described in
|
||||
// http://lists.w3.org/Archives/Public/www-style/2009Dec/0296.html
|
||||
"calc((3em / 100%) * 3em)",
|
||||
"calc(3em / 100% * 3em)",
|
||||
"calc(3em * (3em / 100%))",
|
||||
"calc(3em * 3em / 100%)"
|
||||
]
|
||||
},
|
||||
"-moz-flex-direction": {
|
||||
domProp: "MozFlexDirection",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "row" ],
|
||||
other_values: [ "row-reverse", "column", "column-reverse" ],
|
||||
invalid_values: [ "10px", "30%", "justify", "column wrap" ]
|
||||
},
|
||||
"-moz-flex-grow": {
|
||||
domProp: "MozFlexGrow",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "0" ],
|
||||
other_values: [ "3", "1", "1.0", "2.5", "123" ],
|
||||
invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ]
|
||||
},
|
||||
"-moz-flex-shrink": {
|
||||
domProp: "MozFlexShrink",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "1" ],
|
||||
other_values: [ "3", "0", "0.0", "2.5", "123" ],
|
||||
invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ]
|
||||
},
|
||||
"-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,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "flex-start" ],
|
||||
other_values: [ "flex-end", "center", "space-between", "space-around" ],
|
||||
invalid_values: [ "baseline", "stretch", "30px", "5%" ]
|
||||
},
|
||||
*/
|
||||
"-moz-float-edge": {
|
||||
domProp: "MozFloatEdge",
|
||||
inherited: false,
|
||||
|
|
@ -2523,11 +2356,6 @@ var gCSSProperties = {
|
|||
"table-column",
|
||||
"table-cell",
|
||||
"table-caption",
|
||||
/* XXXdholbert In builds with MOZ_FLEXBOX enabled, this should be uncommented.
|
||||
(This would be #ifdef MOZ_FLEXBOX, if that worked in JS files.)
|
||||
"-moz-flex",
|
||||
"-moz-inline-flex",
|
||||
*/
|
||||
"none"
|
||||
],
|
||||
invalid_values: []
|
||||
|
|
@ -4233,3 +4061,179 @@ function get_computed_value(cs, property)
|
|||
return info.get_computed(cs, property);
|
||||
return cs.getPropertyValue(property);
|
||||
}
|
||||
|
||||
// Automatically add pref-controlled CSS properties & keywords
|
||||
// to gCSSProperties, if the flexbox pref is enabled.
|
||||
if (SpecialPowers.getBoolPref("layout.css.flexbox.enabled")) {
|
||||
var flexProperties = {
|
||||
"-moz-align-items": {
|
||||
domProp: "MozAlignItems",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "stretch" ],
|
||||
other_values: [ "flex-start", "flex-end", "center", "baseline" ],
|
||||
invalid_values: [ "space-between", "abc", "30px" ]
|
||||
},
|
||||
"-moz-align-self": {
|
||||
domProp: "MozAlignSelf",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
// (Assuming defaults on the parent, 'auto' will compute to 'stretch'.)
|
||||
initial_values: [ "auto", "stretch" ],
|
||||
other_values: [ "flex-start", "flex-end", "center", "baseline" ],
|
||||
invalid_values: [ "space-between", "abc", "30px" ]
|
||||
},
|
||||
"-moz-flex": {
|
||||
domProp: "MozFlex",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_TRUE_SHORTHAND,
|
||||
subproperties: [
|
||||
"-moz-flex-grow",
|
||||
"-moz-flex-shrink",
|
||||
"-moz-flex-basis"
|
||||
],
|
||||
initial_values: [ "0 1 auto", "auto 0 1", "0 auto", "auto 0" ],
|
||||
other_values: [
|
||||
"none",
|
||||
"1",
|
||||
"0",
|
||||
"0 1",
|
||||
"0.5",
|
||||
"1.2 3.4",
|
||||
"0 0 0px",
|
||||
"0px 0 0",
|
||||
"5px 0 0",
|
||||
"2 auto",
|
||||
"auto 4",
|
||||
"auto 5.6 7.8",
|
||||
"-moz-max-content",
|
||||
"1 -moz-max-content",
|
||||
"1 2 -moz-max-content",
|
||||
"-moz-max-content 1",
|
||||
"-moz-max-content 1 2",
|
||||
"-0"
|
||||
],
|
||||
invalid_values: [
|
||||
"0 0 0",
|
||||
"1 2px 3",
|
||||
"1 auto 3",
|
||||
"1px 2 3px",
|
||||
"1px 2 3 4px",
|
||||
"-1",
|
||||
"1 -1"
|
||||
]
|
||||
},
|
||||
"-moz-flex-basis": {
|
||||
domProp: "MozFlexBasis",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ " auto" ],
|
||||
// NOTE: This is cribbed directly from the "width" chunk, since this
|
||||
// property takes the exact same values as width (albeit with
|
||||
// different semantics on 'auto').
|
||||
// XXXdholbert (Maybe these should get separated out into
|
||||
// a reusable array defined at the top of this file?)
|
||||
other_values: [ "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
|
||||
// valid calc() values
|
||||
"calc(-2px)",
|
||||
"calc(2px)",
|
||||
"calc(50%)",
|
||||
"calc(50% + 2px)",
|
||||
"calc( 50% + 2px)",
|
||||
"calc(50% + 2px )",
|
||||
"calc( 50% + 2px )",
|
||||
"calc(50% - -2px)",
|
||||
"calc(2px - -50%)",
|
||||
"calc(3*25px)",
|
||||
"calc(3 *25px)",
|
||||
"calc(3 * 25px)",
|
||||
"calc(3* 25px)",
|
||||
"calc(25px*3)",
|
||||
"calc(25px *3)",
|
||||
"calc(25px* 3)",
|
||||
"calc(25px * 3)",
|
||||
"calc(3*25px + 50%)",
|
||||
"calc(50% - 3em + 2px)",
|
||||
"calc(50% - (3em + 2px))",
|
||||
"calc((50% - 3em) + 2px)",
|
||||
"calc(2em)",
|
||||
"calc(50%)",
|
||||
"calc(50px/2)",
|
||||
"calc(50px/(2 - 1))"
|
||||
],
|
||||
invalid_values: [ "none", "-2px",
|
||||
// invalid calc() values
|
||||
"calc(50%+ 2px)",
|
||||
"calc(50% +2px)",
|
||||
"calc(50%+2px)",
|
||||
"-moz-min()",
|
||||
"calc(min())",
|
||||
"-moz-max()",
|
||||
"calc(max())",
|
||||
"-moz-min(5px)",
|
||||
"calc(min(5px))",
|
||||
"-moz-max(5px)",
|
||||
"calc(max(5px))",
|
||||
"-moz-min(5px,2em)",
|
||||
"calc(min(5px,2em))",
|
||||
"-moz-max(5px,2em)",
|
||||
"calc(max(5px,2em))",
|
||||
"calc(50px/(2 - 2))",
|
||||
// If we ever support division by values, which is
|
||||
// complicated for the reasons described in
|
||||
// http://lists.w3.org/Archives/Public/www-style/2010Jan/0007.html
|
||||
// , we should support all 4 of these as described in
|
||||
// http://lists.w3.org/Archives/Public/www-style/2009Dec/0296.html
|
||||
"calc((3em / 100%) * 3em)",
|
||||
"calc(3em / 100% * 3em)",
|
||||
"calc(3em * (3em / 100%))",
|
||||
"calc(3em * 3em / 100%)"
|
||||
]
|
||||
},
|
||||
"-moz-flex-direction": {
|
||||
domProp: "MozFlexDirection",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "row" ],
|
||||
other_values: [ "row-reverse", "column", "column-reverse" ],
|
||||
invalid_values: [ "10px", "30%", "justify", "column wrap" ]
|
||||
},
|
||||
"-moz-flex-grow": {
|
||||
domProp: "MozFlexGrow",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "0" ],
|
||||
other_values: [ "3", "1", "1.0", "2.5", "123" ],
|
||||
invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ]
|
||||
},
|
||||
"-moz-flex-shrink": {
|
||||
domProp: "MozFlexShrink",
|
||||
inherited: false,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "1" ],
|
||||
other_values: [ "3", "0", "0.0", "2.5", "123" ],
|
||||
invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ]
|
||||
},
|
||||
"-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,
|
||||
type: CSS_TYPE_LONGHAND,
|
||||
initial_values: [ "flex-start" ],
|
||||
other_values: [ "flex-end", "center", "space-between", "space-around" ],
|
||||
invalid_values: [ "baseline", "stretch", "30px", "5%" ]
|
||||
}
|
||||
};
|
||||
for (var prop in flexProperties) {
|
||||
gCSSProperties[prop] = flexProperties[prop];
|
||||
}
|
||||
gCSSProperties["display"].other_values.push("-moz-flex");
|
||||
gCSSProperties["display"].other_values.push("-moz-inline-flex");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,18 +115,6 @@ 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-flex-basis": [ test_length_transition, test_percent_transition,
|
||||
test_length_clamped, test_percent_clamped ],
|
||||
"-moz-flex-grow": [ test_float_zeroToOne_transition,
|
||||
test_float_aboveOne_transition ],
|
||||
"-moz-flex-shrink": [ test_float_zeroToOne_transition,
|
||||
test_float_aboveOne_transition ],
|
||||
"-moz-order": [ test_integer_transition ],
|
||||
|
||||
*/
|
||||
"flood-color": [ test_color_transition ],
|
||||
"flood-opacity" : [ test_float_zeroToOne_transition,
|
||||
// opacity is clamped in computed style
|
||||
|
|
@ -248,6 +236,23 @@ var supported_properties = {
|
|||
"z-index": [ test_integer_transition, test_pos_integer_or_auto_transition ],
|
||||
};
|
||||
|
||||
// Automatically add pref-controlled CSS properties & keywords
|
||||
// to supported_properties, if the flexbox pref is enabled.
|
||||
if (SpecialPowers.getBoolPref("layout.css.flexbox.enabled")) {
|
||||
var flexbox_properties = {
|
||||
"-moz-flex-basis": [ test_length_transition, test_percent_transition,
|
||||
test_length_clamped, test_percent_clamped ],
|
||||
"-moz-flex-grow": [ test_float_zeroToOne_transition,
|
||||
test_float_aboveOne_transition ],
|
||||
"-moz-flex-shrink": [ test_float_zeroToOne_transition,
|
||||
test_float_aboveOne_transition ],
|
||||
"-moz-order": [ test_integer_transition ]
|
||||
};
|
||||
for (var prop in flexbox_properties) {
|
||||
supported_properties[prop] = flexbox_properties[prop];
|
||||
}
|
||||
}
|
||||
|
||||
var div = document.getElementById("display");
|
||||
var cs = getComputedStyle(div, "");
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче