Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-21 07:38:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Only allow animation-timing-function in @keyframes

Browse source 
CSS animations used to erroneously indicate that 'animation-play-state'
is permitted in @keyframes. It is not and is non-sensical to allow it
there. This mistake was faithfully transferred into Servo code (although
we also make 'animation-timing-function' which is what the spec text
meant to say).

The spec has been updated[1] and so we should update the Servo code
accordingly.

[1] adeb3434c5
This commit is contained in:
Brian Birtles 2017-07-24 13:35:20 +09:00
parent 46ffcbaf7b
commit b34e331fa2
2 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -591,6 +591,8 @@ ${helpers.predefined_type("animation-duration",
extra_prefixes="moz webkit", extra_prefixes="moz webkit",
spec="https://drafts.csswg.org/css-transitions/#propdef-transition-duration")} spec="https://drafts.csswg.org/css-transitions/#propdef-transition-duration")}
// animation-timing-function is the exception to the rule for allowed_in_keyframe_block:
// https://drafts.csswg.org/css-animations/#keyframes
${helpers.predefined_type("animation-timing-function", ${helpers.predefined_type("animation-timing-function",
"TimingFunction", "TimingFunction",
"computed::TimingFunction::ease()", "computed::TimingFunction::ease()",
@ -671,8 +673,6 @@ ${helpers.single_keyword("animation-direction",
spec="https://drafts.csswg.org/css-animations/#propdef-animation-direction", spec="https://drafts.csswg.org/css-animations/#propdef-animation-direction",
allowed_in_keyframe_block=False)} allowed_in_keyframe_block=False)}
// animation-play-state is the exception to the rule for allowed_in_keyframe_block:
// https://drafts.csswg.org/css-animations/#keyframes
${helpers.single_keyword("animation-play-state", ${helpers.single_keyword("animation-play-state",
"running paused", "running paused",
need_clone=True, need_clone=True,
@ -681,7 +681,7 @@ ${helpers.single_keyword("animation-play-state",
vector=True, vector=True,
extra_prefixes="moz webkit", extra_prefixes="moz webkit",
spec="https://drafts.csswg.org/css-animations/#propdef-animation-play-state", spec="https://drafts.csswg.org/css-animations/#propdef-animation-play-state",
allowed_in_keyframe_block=True)} allowed_in_keyframe_block=False)}
${helpers.single_keyword("animation-fill-mode", ${helpers.single_keyword("animation-fill-mode",
"none forwards backwards both", "none forwards backwards both",

11
tests/unit/style/stylesheets.rs
View file

@ -20,7 +20,7 @@ use style::media_queries::MediaList;
use style::properties::Importance; use style::properties::Importance;
use style::properties::{CSSWideKeyword, DeclaredValueOwned, PropertyDeclaration, PropertyDeclarationBlock}; use style::properties::{CSSWideKeyword, DeclaredValueOwned, PropertyDeclaration, PropertyDeclarationBlock};
use style::properties::longhands; use style::properties::longhands;
use style::properties::longhands::animation_play_state; use style::properties::longhands::animation_timing_function;
use style::shared_lock::SharedRwLock; use style::shared_lock::SharedRwLock;
use style::stylesheets::{Origin, Namespaces}; use style::stylesheets::{Origin, Namespaces};
use style::stylesheets::{Stylesheet, StylesheetContents, NamespaceRule, CssRule, CssRules, StyleRule, KeyframesRule}; use style::stylesheets::{Stylesheet, StylesheetContents, NamespaceRule, CssRule, CssRules, StyleRule, KeyframesRule};
@ -28,6 +28,7 @@ use style::stylesheets::keyframes_rule::{Keyframe, KeyframeSelector, KeyframePer
use style::values::{KeyframesName, CustomIdent}; use style::values::{KeyframesName, CustomIdent};
use style::values::computed::Percentage; use style::values::computed::Percentage;
use style::values::specified::{LengthOrPercentageOrAuto, PositionComponent}; use style::values::specified::{LengthOrPercentageOrAuto, PositionComponent};
use style::values::specified::transform::TimingFunction;
pub fn block_from<I>(iterable: I) -> PropertyDeclarationBlock pub fn block_from<I>(iterable: I) -> PropertyDeclarationBlock
where I: IntoIterator<Item=(PropertyDeclaration, Importance)> { where I: IntoIterator<Item=(PropertyDeclaration, Importance)> {
@ -62,7 +63,7 @@ fn test_parse_stylesheet() {
width: 100%; width: 100%;
width: 50% !important; /* !important not allowed here */ width: 50% !important; /* !important not allowed here */
animation-name: 'foo'; /* animation properties not allowed here */ animation-name: 'foo'; /* animation properties not allowed here */
animation-play-state: running; /* … except animation-play-state */ animation-timing-function: ease; /* … except animation-timing-function */
} }
}"; }";
let url = ServoUrl::parse("about::test").unwrap(); let url = ServoUrl::parse("about::test").unwrap();
@ -226,9 +227,9 @@ fn test_parse_stylesheet() {
(PropertyDeclaration::Width( (PropertyDeclaration::Width(
LengthOrPercentageOrAuto::Percentage(Percentage(1.))), LengthOrPercentageOrAuto::Percentage(Percentage(1.))),
Importance::Normal), Importance::Normal),
(PropertyDeclaration::AnimationPlayState( (PropertyDeclaration::AnimationTimingFunction(
animation_play_state::SpecifiedValue( animation_timing_function::SpecifiedValue(
vec![animation_play_state::SingleSpecifiedValue::running])), vec![TimingFunction::ease()])),
Importance::Normal), Importance::Normal),
]))), ]))),
})), })),