RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-30 18:08:12 +00:00
Code Issues Activity Actions

LibWeb: Allow auto as animation-duration and make that the default

Browse source 
This is a spec change: 2a7cc4b58f
This commit is contained in:
Sam Atkins 2023-06-09 14:25:32 +01:00 • committed by Andreas Kling
parent c4c35ce9b9
commit 7a2c8d30b9
3 changed files with 19 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -67,9 +67,12 @@
"animation-duration": { "animation-duration": {
"affects-layout": true, "affects-layout": true,
"inherited": false, "inherited": false,
"initial": "0s", "initial": "auto",
"valid-types": [ "valid-types": [
"time [0,∞]" "time [0,∞]"
],
"valid-identifiers": [
"auto"
] ]
}, },
"animation-fill-mode": { "animation-fill-mode": {

18
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -1090,7 +1090,11 @@ StyleComputer::AnimationStepTransition StyleComputer::Animation::step(CSS::Time
remaining_delay = CSS::Time { 0, CSS::Time::Type::Ms }; remaining_delay = CSS::Time { 0, CSS::Time::Type::Ms };
time_step_ms -= delay_ms; time_step_ms -= delay_ms;
auto added_progress = time_step_ms / duration.to_milliseconds(); // "auto": For time-driven animations, equivalent to 0s.
// https://www.w3.org/TR/2023/WD-css-animations-2-20230602/#valdef-animation-duration-auto
auto used_duration = duration.value_or(CSS::Time { 0, CSS::Time::Type::S });
auto added_progress = time_step_ms / used_duration.to_milliseconds();
auto new_progress = progress.as_fraction() + added_progress; auto new_progress = progress.as_fraction() + added_progress;
auto changed_iteration = false; auto changed_iteration = false;
if (new_progress >= 1) { if (new_progress >= 1) {
@ -1498,9 +1502,15 @@ ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM
auto active_animation = m_active_animations.get(animation_key); auto active_animation = m_active_animations.get(animation_key);
if (!active_animation.has_value()) { if (!active_animation.has_value()) {
// New animation! // New animation!
CSS::Time duration { 0, CSS::Time::Type::S }; Optional<CSS::Time> duration;
if (auto duration_value = style.maybe_null_property(PropertyID::AnimationDuration); duration_value && duration_value->is_time()) if (auto duration_value = style.maybe_null_property(PropertyID::AnimationDuration); duration_value) {
duration = duration_value->as_time().time(); if (duration_value->is_time()) {
duration = duration_value->as_time().time();
} else if (duration_value->is_identifier() && duration_value->as_identifier().id() == ValueID::Auto) {
// We use empty optional to represent "auto".
duration = {};
}
}
CSS::Time delay { 0, CSS::Time::Type::S }; CSS::Time delay { 0, CSS::Time::Type::S };
if (auto delay_value = style.maybe_null_property(PropertyID::AnimationDelay); delay_value && delay_value->is_time()) if (auto delay_value = style.maybe_null_property(PropertyID::AnimationDelay); delay_value && delay_value->is_time())

2
Userland/Libraries/LibWeb/CSS/StyleComputer.h
View file

@ -199,7 +199,7 @@ private:
struct Animation { struct Animation {
String name; String name;
CSS::Time duration; Optional<CSS::Time> duration; // "auto" if not set.
CSS::Time delay; CSS::Time delay;
Optional<size_t> iteration_count; // Infinite if not set. Optional<size_t> iteration_count; // Infinite if not set.
CSS::AnimationDirection direction; CSS::AnimationDirection direction;