/src/serenity/Userland/Libraries/LibWeb/CSS/CSSTransition.cpp
Line | Count | Source |
1 | | /* |
2 | | * Copyright (c) 2024, Matthew Olsson <mattco@serenityos.org> |
3 | | * Copyright (c) 2024, Sam Atkins <sam@ladybird.org> |
4 | | * |
5 | | * SPDX-License-Identifier: BSD-2-Clause |
6 | | */ |
7 | | |
8 | | #include <LibWeb/Animations/DocumentTimeline.h> |
9 | | #include <LibWeb/Bindings/CSSTransitionPrototype.h> |
10 | | #include <LibWeb/Bindings/Intrinsics.h> |
11 | | #include <LibWeb/CSS/CSSStyleDeclaration.h> |
12 | | #include <LibWeb/CSS/CSSTransition.h> |
13 | | #include <LibWeb/CSS/Interpolation.h> |
14 | | #include <LibWeb/DOM/Document.h> |
15 | | #include <LibWeb/DOM/Element.h> |
16 | | #include <LibWeb/HTML/Scripting/TemporaryExecutionContext.h> |
17 | | |
18 | | namespace Web::CSS { |
19 | | |
20 | | JS_DEFINE_ALLOCATOR(CSSTransition); |
21 | | |
22 | | JS::NonnullGCPtr<CSSTransition> CSSTransition::start_a_transition(DOM::Element& element, PropertyID property_id, size_t transition_generation, |
23 | | double start_time, double end_time, NonnullRefPtr<CSSStyleValue const> start_value, NonnullRefPtr<CSSStyleValue const> end_value, |
24 | | NonnullRefPtr<CSSStyleValue const> reversing_adjusted_start_value, double reversing_shortening_factor) |
25 | 0 | { |
26 | 0 | auto& realm = element.realm(); |
27 | 0 | return realm.heap().allocate<CSSTransition>(realm, realm, element, property_id, transition_generation, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); |
28 | 0 | } |
29 | | |
30 | | Animations::AnimationClass CSSTransition::animation_class() const |
31 | 0 | { |
32 | 0 | return Animations::AnimationClass::CSSTransition; |
33 | 0 | } |
34 | | |
35 | | Optional<int> CSSTransition::class_specific_composite_order(JS::NonnullGCPtr<Animations::Animation> other_animation) const |
36 | 0 | { |
37 | 0 | auto other = JS::NonnullGCPtr { verify_cast<CSSTransition>(*other_animation) }; |
38 | | |
39 | | // Within the set of CSS Transitions, two animations A and B are sorted in composite order (first to last) as |
40 | | // follows: |
41 | | |
42 | | // 1. If neither A nor B has an owning element, sort based on their relative position in the global animation list. |
43 | 0 | if (!owning_element() && !other->owning_element()) |
44 | 0 | return global_animation_list_order() - other->global_animation_list_order(); |
45 | | |
46 | | // 2. Otherwise, if only one of A or B has an owning element, let the animation with an owning element sort first. |
47 | 0 | if (owning_element() && !other->owning_element()) |
48 | 0 | return -1; |
49 | 0 | if (!owning_element() && other->owning_element()) |
50 | 0 | return 1; |
51 | | |
52 | | // 3. Otherwise, if the owning element of A and B differs, sort A and B by tree order of their corresponding owning |
53 | | // elements. With regard to pseudo-elements, the sort order is as follows: |
54 | | // - element |
55 | | // - ::marker |
56 | | // - ::before |
57 | | // - any other pseudo-elements not mentioned specifically in this list, sorted in ascending order by the Unicode |
58 | | // codepoints that make up each selector |
59 | | // - ::after |
60 | | // - element children |
61 | 0 | if (owning_element().ptr() != other->owning_element().ptr()) { |
62 | | // FIXME: Actually sort by tree order |
63 | 0 | return {}; |
64 | 0 | } |
65 | | |
66 | | // 4. Otherwise, if A and B have different transition generation values, sort by their corresponding transition |
67 | | // generation in ascending order. |
68 | 0 | if (m_transition_generation != other->m_transition_generation) |
69 | 0 | return m_transition_generation - other->m_transition_generation; |
70 | | |
71 | | // FIXME: |
72 | | // 5. Otherwise, sort A and B in ascending order by the Unicode codepoints that make up the expanded transition |
73 | | // property name of each transition (i.e. without attempting case conversion and such that ‘-moz-column-width’ |
74 | | // sorts before ‘column-width’). |
75 | 0 | return {}; |
76 | 0 | } |
77 | | |
78 | | CSSTransition::CSSTransition(JS::Realm& realm, DOM::Element& element, PropertyID property_id, size_t transition_generation, |
79 | | double start_time, double end_time, NonnullRefPtr<CSSStyleValue const> start_value, NonnullRefPtr<CSSStyleValue const> end_value, |
80 | | NonnullRefPtr<CSSStyleValue const> reversing_adjusted_start_value, double reversing_shortening_factor) |
81 | 0 | : Animations::Animation(realm) |
82 | 0 | , m_transition_property(property_id) |
83 | 0 | , m_transition_generation(transition_generation) |
84 | 0 | , m_start_time(start_time) |
85 | 0 | , m_end_time(end_time) |
86 | 0 | , m_start_value(move(start_value)) |
87 | 0 | , m_end_value(move(end_value)) |
88 | 0 | , m_reversing_adjusted_start_value(move(reversing_adjusted_start_value)) |
89 | 0 | , m_reversing_shortening_factor(reversing_shortening_factor) |
90 | 0 | , m_keyframe_effect(Animations::KeyframeEffect::create(realm)) |
91 | 0 | { |
92 | | // FIXME: |
93 | | // Transitions generated using the markup defined in this specification are not added to the global animation list |
94 | | // when they are created. Instead, these animations are appended to the global animation list at the first moment |
95 | | // when they transition out of the idle play state after being disassociated from their owning element. Transitions |
96 | | // that have been disassociated from their owning element but are still idle do not have a defined composite order. |
97 | |
|
98 | 0 | set_start_time(start_time - element.document().timeline()->current_time().value()); |
99 | | |
100 | | // Construct a KeyframesEffect for our animation |
101 | 0 | m_keyframe_effect->set_target(&element); |
102 | 0 | m_keyframe_effect->set_start_delay(start_time); |
103 | 0 | m_keyframe_effect->set_iteration_duration(m_end_time - start_time); |
104 | 0 | m_keyframe_effect->set_timing_function(element.property_transition_attributes(property_id)->timing_function); |
105 | |
|
106 | 0 | auto key_frame_set = adopt_ref(*new Animations::KeyframeEffect::KeyFrameSet); |
107 | 0 | Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame initial_keyframe; |
108 | 0 | initial_keyframe.properties.set(property_id, m_start_value); |
109 | |
|
110 | 0 | Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame final_keyframe; |
111 | 0 | final_keyframe.properties.set(property_id, m_end_value); |
112 | |
|
113 | 0 | key_frame_set->keyframes_by_key.insert(0, initial_keyframe); |
114 | 0 | key_frame_set->keyframes_by_key.insert(100 * Animations::KeyframeEffect::AnimationKeyFrameKeyScaleFactor, final_keyframe); |
115 | |
|
116 | 0 | m_keyframe_effect->set_key_frame_set(key_frame_set); |
117 | 0 | set_timeline(element.document().timeline()); |
118 | 0 | set_owning_element(element); |
119 | 0 | set_effect(m_keyframe_effect); |
120 | 0 | element.associate_with_animation(*this); |
121 | 0 | element.set_transition(m_transition_property, *this); |
122 | |
|
123 | 0 | HTML::TemporaryExecutionContext context(element.document().relevant_settings_object()); |
124 | 0 | play().release_value_but_fixme_should_propagate_errors(); |
125 | 0 | } |
126 | | |
127 | | void CSSTransition::initialize(JS::Realm& realm) |
128 | 0 | { |
129 | 0 | Base::initialize(realm); |
130 | 0 | WEB_SET_PROTOTYPE_FOR_INTERFACE(CSSTransition); |
131 | 0 | } |
132 | | |
133 | | void CSSTransition::visit_edges(Cell::Visitor& visitor) |
134 | 0 | { |
135 | 0 | Base::visit_edges(visitor); |
136 | 0 | visitor.visit(m_cached_declaration); |
137 | 0 | visitor.visit(m_keyframe_effect); |
138 | 0 | } |
139 | | |
140 | | double CSSTransition::timing_function_output_at_time(double t) const |
141 | 0 | { |
142 | 0 | auto progress = (t - transition_start_time()) / (transition_end_time() - transition_start_time()); |
143 | | // FIXME: Is this before_flag value correct? |
144 | 0 | bool before_flag = t < transition_start_time(); |
145 | 0 | return m_keyframe_effect->timing_function().evaluate_at(progress, before_flag); |
146 | 0 | } |
147 | | |
148 | | NonnullRefPtr<CSSStyleValue const> CSSTransition::value_at_time(double t) const |
149 | 0 | { |
150 | | // https://drafts.csswg.org/css-transitions/#application |
151 | 0 | auto progress = timing_function_output_at_time(t); |
152 | 0 | auto result = interpolate_property(*m_keyframe_effect->target(), m_transition_property, m_start_value, m_end_value, progress); |
153 | 0 | if (result) |
154 | 0 | return result.release_nonnull(); |
155 | 0 | return m_start_value; |
156 | 0 | } |
157 | | |
158 | | } |