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

LibWeb: Add preliminary support for CSS animations

Browse source 
This partially implements CSS-Animations-1 (though there are references
to CSS-Animations-2).
Current limitations:
- Multi-selector keyframes are not supported.
- Most animation properties are ignored.
- Timing functions are not applied.
- Non-absolute values are not interpolated unless the target is also of
  the same non-absolute type (e.g. 10% -> 25%, but not 10% -> 20px).
- The JavaScript interface is left as an exercise for the next poor soul
  looking at this code.

With those said, this commit implements:
- Interpolation for most common types
- Proper keyframe resolution (including the synthetic from-keyframe
  containing the initial state)
- Properly driven animations, and proper style invalidation

Co-Authored-By: Andreas Kling <kling@serenityos.org>
This commit is contained in:
Ali Mohammad Pur 2023-05-26 23:30:54 +03:30 • committed by Andreas Kling
parent f07c4ffbc8
commit e90752cc21
31 changed files with 1062 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

36
Userland/Libraries/LibWeb/CSS/CSSRuleList.cpp
View file

@ -8,6 +8,7 @@
#include <LibWeb/Bindings/CSSRuleListPrototype.h>
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/CSSImportRule.h>
#include <LibWeb/CSS/CSSKeyframesRule.h>
#include <LibWeb/CSS/CSSMediaRule.h>
#include <LibWeb/CSS/CSSRule.h>
#include <LibWeb/CSS/CSSRuleList.h>
@ -141,6 +142,38 @@ void CSSRuleList::for_each_effective_style_rule(Function<void(CSSStyleRule const
case CSSRule::Type::Supports:
static_cast<CSSSupportsRule const&>(*rule).for_each_effective_style_rule(callback);
break;
case CSSRule::Type::Keyframe:
case CSSRule::Type::Keyframes:
break;
}
}
}
void CSSRuleList::for_each_effective_keyframes_at_rule(Function<void(CSSKeyframesRule const&)> const& callback) const
{
for (auto const& rule : m_rules) {
switch (rule->type()) {
case CSSRule::Type::FontFace:
break;
case CSSRule::Type::Import: {
auto const& import_rule = static_cast<CSSImportRule const&>(*rule);
if (import_rule.loaded_style_sheet())
import_rule.loaded_style_sheet()->for_each_effective_keyframes_at_rule(callback);
break;
}
case CSSRule::Type::Media:
static_cast<CSSMediaRule const&>(*rule).for_each_effective_keyframes_at_rule(callback);
break;
case CSSRule::Type::Style:
break;
case CSSRule::Type::Supports:
static_cast<CSSSupportsRule const&>(*rule).for_each_effective_keyframes_at_rule(callback);
break;
case CSSRule::Type::Keyframe:
break;
case CSSRule::Type::Keyframes:
callback(static_cast<CSSKeyframesRule const&>(*rule));
break;
}
}
}
@ -177,6 +210,9 @@ bool CSSRuleList::evaluate_media_queries(HTML::Window const& window)
any_media_queries_changed_match_state = true;
break;
}
case CSSRule::Type::Keyframe:
case CSSRule::Type::Keyframes:
break;
}
}