Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 21:50:18 +01:00
Code Issues Projects Releases Packages Wiki Activity

Implement translate property styling

Browse source
This commit is contained in:
CJ Ku 2018-01-25 12:47:27 +09:00 • committed by Brian Birtles
parent 62c0c6feee
commit de3e8c9a8b
10 changed files with 83 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
components/script/dom/webidls/CSSStyleDeclaration.webidl
View file

@ -190,6 +190,7 @@ partial interface CSSStyleDeclaration {
[CEReactions, SetterThrows, TreatNullAs=EmptyString] attribute DOMString backfaceVisibility;
[CEReactions, SetterThrows, TreatNullAs=EmptyString] attribute DOMString backface-visibility;
[CEReactions, SetterThrows, TreatNullAs=EmptyString] attribute DOMString rotate;
[CEReactions, SetterThrows, TreatNullAs=EmptyString] attribute DOMString translate;
[CEReactions, SetterThrows, TreatNullAs=EmptyString] attribute DOMString direction;
[CEReactions, SetterThrows, TreatNullAs=EmptyString] attribute DOMString unicodeBidi;

3
components/style/properties/gecko.mako.rs
View file

@ -3061,7 +3061,7 @@ fn static_assert() {
overscroll-behavior-x overscroll-behavior-y
overflow-clip-box-inline overflow-clip-box-block
perspective-origin -moz-binding will-change
shape-outside contain touch-action""" %>
shape-outside contain touch-action translate""" %>
<%self:impl_trait style_struct_name="Box" skip_longhands="${skip_box_longhands}">
// We manually-implement the |display| property until we get general
@ -3487,6 +3487,7 @@ fn static_assert() {
}
${impl_individual_transform('rotate', 'Rotate', 'mSpecifiedRotate')}
${impl_individual_transform('translate', 'Translate', 'mSpecifiedTranslate')}
pub fn set_will_change(&mut self, v: longhands::will_change::computed_value::T) {
use gecko_bindings::bindings::{Gecko_AppendWillChange, Gecko_ClearWillChange};

8
components/style/properties/longhand/box.mako.rs
View file

@ -398,6 +398,14 @@ ${helpers.predefined_type("rotate", "Rotate",
gecko_pref="layout.css.individual-transform.enabled",
spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms")}
${helpers.predefined_type("translate", "Translate",
"generics::transform::Translate::None",
animation_value_type="ComputedValue",
boxed=True,
flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
gecko_pref="layout.css.individual-transform.enabled",
spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms")}
// CSSOM View Module
// https://www.w3.org/TR/cssom-view-1/
${helpers.single_keyword("scroll-behavior",

2
components/style/values/computed/mod.rs
View file

@ -73,7 +73,7 @@ pub use self::svg::MozContextProperties;
pub use self::table::XSpan;
pub use self::text::{InitialLetter, LetterSpacing, LineHeight, TextAlign, TextOverflow, WordSpacing};
pub use self::time::Time;
pub use self::transform::{TimingFunction, Transform, TransformOperation, TransformOrigin, Rotate};
pub use self::transform::{TimingFunction, Transform, TransformOperation, TransformOrigin, Rotate, Translate};
pub use self::ui::MozForceBrokenImageIcon;
#[cfg(feature = "gecko")]

26
components/style/values/computed/transform.rs
View file

@ -15,6 +15,7 @@ use values::generics::transform::{Transform as GenericTransform, TransformOperat
use values::generics::transform::Rotate as GenericRotate;
use values::generics::transform::TimingFunction as GenericTimingFunction;
use values::generics::transform::TransformOrigin as GenericTransformOrigin;
use values::generics::transform::Translate as GenericTranslate;
/// A single operation in a computed CSS `transform`
pub type TransformOperation = GenericTransformOperation<
@ -318,3 +319,28 @@ impl Rotate {
}
}
}
/// A computed CSS `translate`
pub type Translate = GenericTranslate<LengthOrPercentage, Length>;
impl Translate {
/// Convert TransformOperation to Translate.
pub fn to_transform_operation(&self) -> Option<TransformOperation> {
match *self {
GenericTranslate::None => None,
GenericTranslate::TranslateX(tx) => Some(GenericTransformOperation::TranslateX(tx)),
GenericTranslate::Translate(tx, ty) => Some(GenericTransformOperation::Translate(tx, Some(ty))),
GenericTranslate::Translate3D(tx, ty, tz) => Some(GenericTransformOperation::Translate3D(tx, ty, tz)),
}
}
/// Convert Translate to TransformOperation.
pub fn from_transform_operation(operation: &TransformOperation) -> Translate {
match *operation {
GenericTransformOperation::TranslateX(tx) => GenericTranslate::TranslateX(tx),
GenericTransformOperation::Translate(tx, Some(ty)) => GenericTranslate::Translate(tx, ty),
GenericTransformOperation::Translate3D(tx, ty, tz) => GenericTranslate::Translate3D(tx, ty, tz),
_ => unreachable!("Found unexpected value for translate"),
}
}
}

16
components/style/values/generics/transform.rs
View file

@ -682,3 +682,19 @@ pub enum Rotate<Number, Angle> {
/// '<number>{3} <angle>'
Rotate3D(Number, Number, Number, Angle),
}
#[derive(Animate, ComputeSquaredDistance, ToAnimatedZero, ToComputedValue)]
#[derive(Clone, Debug, MallocSizeOf, PartialEq, ToCss)]
/// A value of the `Translate` property
///
/// <https://drafts.csswg.org/css-transforms-2/#individual-transforms>
pub enum Translate<LengthOrPercentage, Length> {
/// 'none'
None,
/// '<length-percentage>'
TranslateX(LengthOrPercentage),
/// '<length-percentage> <length-percentage>'
Translate(LengthOrPercentage, LengthOrPercentage),
/// '<length-percentage> <length-percentage> <length>'
Translate3D(LengthOrPercentage, LengthOrPercentage, Length),
}

2
components/style/values/specified/mod.rs
View file

@ -69,7 +69,7 @@ pub use self::table::XSpan;
pub use self::text::{InitialLetter, LetterSpacing, LineHeight, TextDecorationLine};
pub use self::text::{TextAlign, TextAlignKeyword, TextOverflow, WordSpacing};
pub use self::time::Time;
pub use self::transform::{TimingFunction, Transform, TransformOrigin, Rotate};
pub use self::transform::{TimingFunction, Transform, TransformOrigin, Rotate, Translate};
pub use self::ui::MozForceBrokenImageIcon;
pub use super::generics::grid::GridTemplateComponent as GenericGridTemplateComponent;

28
components/style/values/specified/transform.rs
View file

@ -16,6 +16,7 @@ use values::generics::transform::{StepPosition, TimingFunction as GenericTimingF
use values::generics::transform::{TimingKeyword, TransformOrigin as GenericTransformOrigin};
use values::generics::transform::Rotate as GenericRotate;
use values::generics::transform::TransformOperation as GenericTransformOperation;
use values::generics::transform::Translate as GenericTranslate;
use values::specified::{self, Angle, Number, Length, Integer};
use values::specified::{LengthOrNumber, LengthOrPercentage, LengthOrPercentageOrNumber};
use values::specified::position::{Side, X, Y};
@ -536,3 +537,30 @@ impl Parse for Rotate {
}
}
/// A specified CSS `translate`
pub type Translate = GenericTranslate<LengthOrPercentage, Length>;
impl Parse for Translate {
fn parse<'i, 't>(
context: &ParserContext,
input: &mut Parser<'i, 't>
) -> Result<Self, ParseError<'i>> {
if input.try(|i| i.expect_ident_matching("none")).is_ok() {
return Ok(GenericTranslate::None);
}
let tx = specified::LengthOrPercentage::parse(context, input)?;
if let Ok(ty) = input.try(|i| specified::LengthOrPercentage::parse(context, i)) {
if let Ok(tz) = input.try(|i| specified::Length::parse(context, i)) {
// 'translate: <length-percentage> <length-percentage> <length>'
return Ok(GenericTranslate::Translate3D(tx, ty, tz));
}
// translate: <length-percentage> <length-percentage>'
return Ok(GenericTranslate::Translate(tx, ty));
}
// 'translate: <length-percentage> '
Ok(GenericTranslate::TranslateX(tx))
}
}

10
tests/wpt/metadata/css/css-transforms/parsing/translate-parsing-invalid.html.ini
View file

@ -1,10 +0,0 @@
[translate-parsing-invalid.html]
[e.style['translate'\] = "100deg" should not set the property value]
expected: FAIL
[e.style['translate'\] = "100px 200px 300%" should not set the property value]
expected: FAIL
[e.style['translate'\] = "100px 200px calc(30px + 30%)" should not set the property value]
expected: FAIL

6
tests/wpt/metadata/css/css-transforms/parsing/translate-parsing-valid.html.ini
View file

@ -5,9 +5,3 @@
[Serialization should round-trip after setting e.style['translate'\] = "1px 2px 0"]
expected: FAIL
[e.style['translate'\] = "0" should set the property value]
expected: FAIL
[e.style['translate'\] = "1px 2px 0" should set the property value]
expected: FAIL