Add style property for flex-basis

Add the style property for flex-basis. The property should allow all
values acceptable for `width`|`height` with the addition of `content`.
This commit is contained in:
Daniel Robertson 2016-04-17 22:07:36 -04:00
parent 1946c71a96
commit 2d9d31ee04
No known key found for this signature in database
GPG key ID: 9977F4E5FC7AAE3B
8 changed files with 117 additions and 18 deletions

View file

@ -218,7 +218,9 @@ pub fn compute_damage(old: Option<&Arc<ServoComputedValues>>, new: &ServoCompute
get_inheritedtable.border_collapse,
get_inheritedtable.border_spacing,
get_column.column_gap,
get_position.flex_direction
get_position.flex_direction,
get_position.flex_basis,
get_position.order
]) || add_if_not_equal!(old, new, damage,
[ REPAINT, STORE_OVERFLOW, REFLOW_OUT_OF_FLOW ], [
get_position.top, get_position.left,

View file

@ -310,5 +310,7 @@ partial interface CSSStyleDeclaration {
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexDirection;
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-direction;
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexBasis;
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-basis;
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString order;
};

View file

@ -4360,6 +4360,9 @@ pub mod longhands {
}
</%helpers:longhand>
${helpers.predefined_type("flex-basis", "LengthOrPercentageOrAutoOrContent",
"computed::LengthOrPercentageOrAutoOrContent::Auto")}
${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse", products="gecko")}
// SVG 1.1 (Second Edition)

View file

@ -1050,6 +1050,50 @@ pub mod specified {
}
}
#[derive(Clone, PartialEq, Copy, Debug, HeapSizeOf)]
pub enum LengthOrPercentageOrAutoOrContent {
Length(Length),
Percentage(Percentage),
Calc(CalcLengthOrPercentage),
Auto,
Content
}
impl ToCss for LengthOrPercentageOrAutoOrContent {
fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
match *self {
LengthOrPercentageOrAutoOrContent::Length(len) => len.to_css(dest),
LengthOrPercentageOrAutoOrContent::Percentage(perc) => perc.to_css(dest),
LengthOrPercentageOrAutoOrContent::Auto => dest.write_str("auto"),
LengthOrPercentageOrAutoOrContent::Content => dest.write_str("content"),
LengthOrPercentageOrAutoOrContent::Calc(calc) => calc.to_css(dest),
}
}
}
impl LengthOrPercentageOrAutoOrContent {
pub fn parse(input: &mut Parser) -> Result<LengthOrPercentageOrAutoOrContent, ()> {
let context = AllowedNumericType::NonNegative;
match try!(input.next()) {
Token::Dimension(ref value, ref unit) if context.is_ok(value.value) =>
Length::parse_dimension(value.value, unit).map(LengthOrPercentageOrAutoOrContent::Length),
Token::Percentage(ref value) if context.is_ok(value.unit_value) =>
Ok(LengthOrPercentageOrAutoOrContent::Percentage(Percentage(value.unit_value))),
Token::Number(ref value) if value.value == 0. =>
Ok(LengthOrPercentageOrAutoOrContent::Length(Length::Absolute(Au(0)))),
Token::Ident(ref value) if value.eq_ignore_ascii_case("auto") =>
Ok(LengthOrPercentageOrAutoOrContent::Auto),
Token::Ident(ref value) if value.eq_ignore_ascii_case("content") =>
Ok(LengthOrPercentageOrAutoOrContent::Content),
Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {
let calc = try!(input.parse_nested_block(CalcLengthOrPercentage::parse_length_or_percentage));
Ok(LengthOrPercentageOrAutoOrContent::Calc(calc))
},
_ => Err(())
}
}
}
#[derive(Clone, PartialEq, Copy, Debug, HeapSizeOf)]
pub struct BorderRadiusSize(pub Size2D<LengthOrPercentage>);
@ -1771,6 +1815,64 @@ pub mod computed {
}
}
#[derive(PartialEq, Clone, Copy, HeapSizeOf)]
pub enum LengthOrPercentageOrAutoOrContent {
Length(Au),
Percentage(CSSFloat),
Calc(CalcLengthOrPercentage),
Auto,
Content
}
impl fmt::Debug for LengthOrPercentageOrAutoOrContent {
fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
match *self {
LengthOrPercentageOrAutoOrContent::Length(length) => write!(f, "{:?}", length),
LengthOrPercentageOrAutoOrContent::Percentage(percentage) => write!(f, "{}%", percentage * 100.),
LengthOrPercentageOrAutoOrContent::Calc(calc) => write!(f, "{:?}", calc),
LengthOrPercentageOrAutoOrContent::Auto => write!(f, "auto"),
LengthOrPercentageOrAutoOrContent::Content => write!(f, "content")
}
}
}
impl ToComputedValue for specified::LengthOrPercentageOrAutoOrContent {
type ComputedValue = LengthOrPercentageOrAutoOrContent;
#[inline]
fn to_computed_value<Cx: TContext>(&self, context: &Cx) -> LengthOrPercentageOrAutoOrContent {
match *self {
specified::LengthOrPercentageOrAutoOrContent::Length(value) => {
LengthOrPercentageOrAutoOrContent::Length(value.to_computed_value(context))
},
specified::LengthOrPercentageOrAutoOrContent::Percentage(value) => {
LengthOrPercentageOrAutoOrContent::Percentage(value.0)
},
specified::LengthOrPercentageOrAutoOrContent::Calc(calc) => {
LengthOrPercentageOrAutoOrContent::Calc(calc.to_computed_value(context))
},
specified::LengthOrPercentageOrAutoOrContent::Auto => {
LengthOrPercentageOrAutoOrContent::Auto
},
specified::LengthOrPercentageOrAutoOrContent::Content => {
LengthOrPercentageOrAutoOrContent::Content
}
}
}
}
impl ::cssparser::ToCss for LengthOrPercentageOrAutoOrContent {
fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
match *self {
LengthOrPercentageOrAutoOrContent::Length(length) => length.to_css(dest),
LengthOrPercentageOrAutoOrContent::Percentage(percentage)
=> write!(dest, "{}%", percentage * 100.),
LengthOrPercentageOrAutoOrContent::Calc(calc) => calc.to_css(dest),
LengthOrPercentageOrAutoOrContent::Auto => dest.write_str("auto"),
LengthOrPercentageOrAutoOrContent::Content => dest.write_str("content")
}
}
}
#[derive(PartialEq, Clone, Copy, HeapSizeOf)]
pub enum LengthOrPercentageOrNone {
Length(Au),

View file

@ -5,24 +5,23 @@
<link href="reference/ref-pass-body.htm" rel="match">
<meta content="dom" name="flags">
<style>
html {
body {
display: flex;
width: 100px;
}
body {
div {
color: red;
margin: 0;
flex-basis: 100%;
}
.PASS {color: black;}
</style>
</head><body><h1>FAIL, enable javascript</h1>
</head><body><div id="test"><h1>FAIL, enable javascript</h1>
<script>
var body = document.body;
var test = document.getElementById("test");
var passed =
getComputedStyle(body).getPropertyValue("flex-basis") ==
getComputedStyle(test).getPropertyValue("flex-basis") ==
"100%";
body.textContent = body.className = passed ? "PASS" : "FAIL";
test.textContent = test.className = passed ? "PASS" : "FAIL";
</script>
</body></html>

View file

@ -1,3 +0,0 @@
[flexbox_computedstyle_flex-basis-0.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[flexbox_computedstyle_flex-basis-auto.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[flexbox_computedstyle_flex-basis-percent.htm]
type: reftest
expected: FAIL