From 7badba01ead797a883e27aa656a9d9051bfd7efb Mon Sep 17 00:00:00 2001 From: Pu Xingyu Date: Thu, 16 Jun 2016 15:23:31 +0800 Subject: [PATCH] Support flexbox shorthand properties Support the `flex` and `flex-flow` shorthand properties in servo. Currently they are marked as experimental, so they are added to '__dir__.ini'. Thanks SimonSapin and jdm for help :) --- .../dom/webidls/CSSStyleDeclaration.webidl | 3 + .../style/properties/properties.mako.rs | 1 + .../properties/shorthand/position.mako.rs | 105 ++++++++++++++++++ .../css-flexbox-1_dev/__dir__.ini | 1 + 4 files changed, 110 insertions(+) create mode 100644 components/style/properties/shorthand/position.mako.rs diff --git a/components/script/dom/webidls/CSSStyleDeclaration.webidl b/components/script/dom/webidls/CSSStyleDeclaration.webidl index 8d587b9760a5..02864d39a775 100644 --- a/components/script/dom/webidls/CSSStyleDeclaration.webidl +++ b/components/script/dom/webidls/CSSStyleDeclaration.webidl @@ -308,6 +308,9 @@ partial interface CSSStyleDeclaration { [SetterThrows, TreatNullAs=EmptyString] attribute DOMString transitionDelay; [SetterThrows, TreatNullAs=EmptyString] attribute DOMString transition-delay; + [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex; + [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexFlow; + [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-flow; [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexDirection; [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-direction; [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexWrap; diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs index c42f973205c7..4d9dd341d332 100644 --- a/components/style/properties/properties.mako.rs +++ b/components/style/properties/properties.mako.rs @@ -129,6 +129,7 @@ pub mod shorthands { <%include file="/shorthand/margin.mako.rs" /> <%include file="/shorthand/outline.mako.rs" /> <%include file="/shorthand/padding.mako.rs" /> + <%include file="/shorthand/position.mako.rs" /> <%include file="/shorthand/text.mako.rs" /> } diff --git a/components/style/properties/shorthand/position.mako.rs b/components/style/properties/shorthand/position.mako.rs new file mode 100644 index 000000000000..ea8592c7347f --- /dev/null +++ b/components/style/properties/shorthand/position.mako.rs @@ -0,0 +1,105 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +<%namespace name="helpers" file="/helpers.mako.rs" /> + +<%helpers:shorthand name="flex-flow" sub_properties="flex-direction flex-wrap" + experimental="True"> + use properties::longhands::{flex_direction, flex_wrap}; + + let mut direction = None; + let mut wrap = None; + let mut any = false; + loop { + if direction.is_none() { + if let Ok(value) = input.try(|input| flex_direction::parse(context, input)) { + direction = Some(value); + any = true; + continue + } + } + if wrap.is_none() { + if let Ok(value) = input.try(|input| flex_wrap::parse(context, input)) { + wrap = Some(value); + any = true; + continue + } + } + break + } + + if any { + Ok(Longhands { + flex_direction: direction, + flex_wrap: wrap, + }) + } else { + Err(()) + } + + +<%helpers:shorthand name="flex" sub_properties="flex-grow flex-shrink flex-basis" + experimental="True"> + use app_units::Au; + use values::specified::{Number, Length, LengthOrPercentageOrAutoOrContent}; + + pub fn parse_flexibility(input: &mut Parser) + -> Result<(Option, Option),()> { + let grow = Some(try!(Number::parse_non_negative(input))); + let shrink = input.try(Number::parse_non_negative).ok(); + Ok((grow, shrink)) + } + + let mut grow = None; + let mut shrink = None; + let mut basis = None; + let mut any = false; + + if input.try(|input| input.expect_ident_matching("none")).is_ok() { + return Ok(Longhands { + flex_grow: Some(Number(0.0)), + flex_shrink: Some(Number(0.0)), + flex_basis: Some(LengthOrPercentageOrAutoOrContent::Auto) + }) + } + loop { + if grow.is_none() { + if let Ok((flex_grow, flex_shrink)) = input.try(parse_flexibility) { + grow = flex_grow; + shrink = flex_shrink; + any = true; + continue + } + } + if basis.is_none() { + if let Ok(value) = input.try(LengthOrPercentageOrAutoOrContent::parse) { + basis = Some(value); + any = true; + continue + } + } + break + } + if any { + if grow == None { + grow = Some(Number(1.0)); + } + if shrink == None && basis == None { + basis = Some(LengthOrPercentageOrAutoOrContent::Length(Length::Absolute(Au(0)))); + } + if shrink == None { + shrink = Some(Number(1.0)); + } + if basis == None { + basis = Some(LengthOrPercentageOrAutoOrContent::Auto); + } + Ok(Longhands { + flex_grow: grow, + flex_shrink: shrink, + flex_basis: basis, + }) + } else { + Err(()) + } + diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini index c69efaf3cabf..279f55fa3531 100644 --- a/tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini +++ b/tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini @@ -1,4 +1,5 @@ prefs: ["layout.flex.enabled:true", + "layout.flex-flow.enabled:true", "layout.flex-direction.enabled:true", "layout.flex-wrap.enabled:true", "layout.flex-grow.enabled:true",