mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-22 17:29:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Don't resolve UnresolvedStyleValues in set_keyframes

Browse source 
If the custom property related to this UnresolvedStyleValue changed
we would not reflect the up to date value in the animation.
This commit is contained in:
Callum Law 2025-08-28 01:56:47 +12:00 • committed by Sam Atkins
commit 3b8c2a97c0
Notes: github-actions[bot] 2025-08-28 08:31:25 +00:00
3 changed files with 18 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/Animations/KeyframeEffect.cpp
View file

@ -869,7 +869,6 @@ WebIDL::ExceptionOr<void> KeyframeEffect::set_keyframes(Optional<GC::Root<JS::Ob
auto keyframe_set = adopt_ref(*new KeyFrameSet);
m_target_properties.clear();
auto target = this->target();
for (auto& keyframe : m_keyframes) {
Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame resolved_keyframe;
@ -877,9 +876,6 @@ WebIDL::ExceptionOr<void> KeyframeEffect::set_keyframes(Optional<GC::Root<JS::Ob
auto key = static_cast<u64>(keyframe.computed_offset.value() * 100 * AnimationKeyFrameKeyScaleFactor);
for (auto [property_id, property_value] : keyframe.parsed_properties()) {
if (property_value->is_unresolved() && target)
property_value = CSS::Parser::Parser::resolve_unresolved_style_value(CSS::Parser::ParsingParams { target->document() }, *target, pseudo_element_type(), property_id, property_value->as_unresolved());
resolved_keyframe.properties.set(property_id, property_value);
CSS::StyleComputer::for_each_property_expanding_shorthands(property_id, property_value, [&](CSS::PropertyID longhand_id, CSS::StyleValue const&) {
m_target_properties.set(longhand_id);

1
Tests/LibWeb/Text/expected/css/animation-changing-custom-property.txt Normal file
View file

@ -0,0 +1 @@
rgb(0, 64, 0)

17
Tests/LibWeb/Text/input/css/animation-changing-custom-property.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<div id="foo" style="--foo: red"></div>
<script src="../include.js"></script>
<script>
test(() => {
const anim = foo.animate([{ color: "black" }, { color: "var(--foo)" }], 1000);
foo.style = "--foo: green";
anim.pause();
anim.currentTime = 500;
println(getComputedStyle(foo).color);
});
</script>
</html>