diff --git a/Libraries/LibWeb/CSS/CSSTransition.cpp b/Libraries/LibWeb/CSS/CSSTransition.cpp index 6842b3e50e2..f4673e93ea4 100644 --- a/Libraries/LibWeb/CSS/CSSTransition.cpp +++ b/Libraries/LibWeb/CSS/CSSTransition.cpp @@ -20,11 +20,11 @@ namespace Web::CSS { GC_DEFINE_ALLOCATOR(CSSTransition); GC::Ref CSSTransition::start_a_transition(DOM::Element& element, Optional pseudo_element, PropertyID property_id, - size_t transition_generation, double start_time, double end_time, NonnullRefPtr start_value, + size_t transition_generation, double delay, double start_time, double end_time, NonnullRefPtr start_value, NonnullRefPtr end_value, NonnullRefPtr reversing_adjusted_start_value, double reversing_shortening_factor) { auto& realm = element.realm(); - return realm.create(realm, element, pseudo_element, property_id, transition_generation, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); + return realm.create(realm, element, pseudo_element, property_id, transition_generation, delay, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); } Animations::AnimationClass CSSTransition::animation_class() const @@ -76,13 +76,13 @@ Optional CSSTransition::class_specific_composite_order(GC::Ref pseudo_element, PropertyID property_id, size_t transition_generation, - double start_time, double end_time, NonnullRefPtr start_value, NonnullRefPtr end_value, + double delay, double start_time, double end_time, NonnullRefPtr start_value, NonnullRefPtr end_value, NonnullRefPtr reversing_adjusted_start_value, double reversing_shortening_factor) : Animations::Animation(realm) , m_transition_property(property_id) , m_transition_generation(transition_generation) - , m_start_time(start_time) - , m_end_time(end_time) + , m_start_time(start_time + delay) + , m_end_time(end_time + delay) , m_start_value(move(start_value)) , m_end_value(move(end_value)) , m_reversing_adjusted_start_value(move(reversing_adjusted_start_value)) @@ -95,14 +95,12 @@ CSSTransition::CSSTransition(JS::Realm& realm, DOM::Element& element, Optional

current_time().value()); - // Construct a KeyframesEffect for our animation m_keyframe_effect->set_target(&element); if (pseudo_element.has_value()) m_keyframe_effect->set_pseudo_element(Selector::PseudoElementSelector { pseudo_element.value() }); - m_keyframe_effect->set_start_delay(start_time); - m_keyframe_effect->set_iteration_duration(m_end_time - start_time); + m_keyframe_effect->set_start_delay(delay); + m_keyframe_effect->set_iteration_duration(end_time - start_time); m_keyframe_effect->set_timing_function(element.property_transition_attributes(pseudo_element, property_id)->timing_function); auto key_frame_set = adopt_ref(*new Animations::KeyframeEffect::KeyFrameSet); diff --git a/Libraries/LibWeb/CSS/CSSTransition.h b/Libraries/LibWeb/CSS/CSSTransition.h index 7f711893b3a..bc1ed4b24d3 100644 --- a/Libraries/LibWeb/CSS/CSSTransition.h +++ b/Libraries/LibWeb/CSS/CSSTransition.h @@ -23,7 +23,7 @@ class CSSTransition : public Animations::Animation { public: static GC::Ref start_a_transition(DOM::Element&, Optional, PropertyID, - size_t transition_generation, double start_time, double end_time, NonnullRefPtr start_value, + size_t transition_generation, double delay, double start_time, double end_time, NonnullRefPtr start_value, NonnullRefPtr end_value, NonnullRefPtr reversing_adjusted_start_value, double reversing_shortening_factor); StringView transition_property() const { return string_from_property_id(m_transition_property); } @@ -53,7 +53,7 @@ public: private: CSSTransition(JS::Realm&, DOM::Element&, Optional, PropertyID, size_t transition_generation, - double start_time, double end_time, NonnullRefPtr start_value, NonnullRefPtr end_value, + double delay, double start_time, double end_time, NonnullRefPtr start_value, NonnullRefPtr end_value, NonnullRefPtr reversing_adjusted_start_value, double reversing_shortening_factor); virtual void initialize(JS::Realm&) override; diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp index 4cb9ab97e4d..1a45dfa4c96 100644 --- a/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -1410,11 +1410,11 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_ bool has_running_transition = existing_transition && !existing_transition->is_finished(); bool has_completed_transition = existing_transition && existing_transition->is_finished(); - auto start_a_transition = [&](auto start_time, auto end_time, auto const& start_value, auto const& end_value, auto const& reversing_adjusted_start_value, auto reversing_shortening_factor) { + auto start_a_transition = [&](auto delay, auto start_time, auto end_time, auto const& start_value, auto const& end_value, auto const& reversing_adjusted_start_value, auto reversing_shortening_factor) { dbgln_if(CSS_TRANSITIONS_DEBUG, "Starting a transition of {} from {} to {}", string_from_property_id(property_id), start_value->to_string(), end_value->to_string()); auto transition = CSSTransition::start_a_transition(element, pseudo_element, property_id, - document().transition_generation(), start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); + document().transition_generation(), delay, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); // Immediately set the property's value to the transition's current value, to prevent single-frame jumps. collect_animation_into(element, {}, as(*transition->effect()), new_style, AnimationRefresh::No); }; @@ -1440,8 +1440,11 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_ element.remove_transition(pseudo_element, property_id); // and start a transition whose: + // AD-HOC: We pass delay to the constructor separately so we can use it to construct the contained KeyframeEffect + auto delay = matching_transition_properties->delay; + // - start time is the time of the style change event plus the matching transition delay, - auto start_time = style_change_event_time + matching_transition_properties->delay; + auto start_time = style_change_event_time; // - end time is the start time plus the matching transition duration, auto end_time = start_time + matching_transition_properties->duration; @@ -1458,7 +1461,7 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_ // - reversing shortening factor is 1. double reversing_shortening_factor = 1; - start_a_transition(start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); + start_a_transition(delay, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); } // 2. Otherwise, if the element has a completed transition for the property @@ -1524,13 +1527,15 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_ auto term_2 = 1 - existing_transition->reversing_shortening_factor(); double reversing_shortening_factor = clamp(abs(term_1 + term_2), 0.0, 1.0); + // AD-HOC: We pass delay to the constructor separately so we can use it to construct the contained KeyframeEffect + auto delay = (matching_transition_properties->delay >= 0 + ? (matching_transition_properties->delay) + : (reversing_shortening_factor * matching_transition_properties->delay)); + // - start time is the time of the style change event plus: // 1. if the matching transition delay is nonnegative, the matching transition delay, or // 2. if the matching transition delay is negative, the product of the new transition’s reversing shortening factor and the matching transition delay, - auto start_time = style_change_event_time - + (matching_transition_properties->delay >= 0 - ? (matching_transition_properties->delay) - : (reversing_shortening_factor * matching_transition_properties->delay)); + auto start_time = style_change_event_time; // - end time is the start time plus the product of the matching transition duration and the new transition’s reversing shortening factor, auto end_time = start_time + (matching_transition_properties->duration * reversing_shortening_factor); @@ -1541,7 +1546,7 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_ // - end value is the value of the property in the after-change style, auto const& end_value = after_change_value; - start_a_transition(start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); + start_a_transition(delay, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); } // 4. Otherwise, @@ -1553,8 +1558,11 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_ // running or completed transition for a property at once. element.remove_transition(pseudo_element, property_id); + // AD-HOC: We pass delay to the constructor separately so we can use it to construct the contained KeyframeEffect + auto delay = matching_transition_properties->delay; + // - start time is the time of the style change event plus the matching transition delay, - auto start_time = style_change_event_time + matching_transition_properties->delay; + auto start_time = style_change_event_time; // - end time is the start time plus the matching transition duration, auto end_time = start_time + matching_transition_properties->duration; @@ -1571,7 +1579,7 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_ // - reversing shortening factor is 1. double reversing_shortening_factor = 1; - start_a_transition(start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); + start_a_transition(delay, start_time, end_time, start_value, end_value, reversing_adjusted_start_value, reversing_shortening_factor); } } } diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-currentTime.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-currentTime.tentative.txt index 414c4f49704..7e703dd4cb7 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-currentTime.tentative.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-currentTime.tentative.txt @@ -2,10 +2,10 @@ Harness status: OK Found 5 tests -1 Pass -4 Fail +2 Pass +3 Fail Pass currentTime can be used to seek a CSS transition Fail Skipping forwards through transition -Fail Skipping backwards through transition +Pass Skipping backwards through transition Fail Setting currentTime to null on a CSS transition throws Fail Transition reversing behavior respects currentTime and uses the transition's current position. \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-effect.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-effect.tentative.txt index a9d3151c23b..256ddc876ab 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-effect.tentative.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-effect.tentative.txt @@ -2,8 +2,8 @@ Harness status: OK Found 10 tests -6 Pass -4 Fail +7 Pass +3 Fail Pass After setting a transition's effect to null, it still reports the original transition property Pass After setting a transition's effect to null, it becomes finished Pass After setting a transition's effect to null, style is updated @@ -11,6 +11,6 @@ Fail After setting a transition's effect to null, a new transition can be starte Fail After setting a transition's effect to null, it should be possible to interrupt that transition Pass After setting a new keyframe effect with a shorter duration, the transition becomes finished Pass After setting a new keyframe effect targeting different properties, the transition continues to report the original transition property -Fail After setting a new keyframe effect on a play-pending transition, the transition remains pending +Pass After setting a new keyframe effect on a play-pending transition, the transition remains pending Pass A transition with no effect still returns the original transitionProperty Fail A transition with a replaced effect still exhibits the regular transition reversing behavior \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-ready.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-ready.tentative.txt index dcf46f31338..40233613e6e 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-ready.tentative.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-ready.tentative.txt @@ -2,6 +2,7 @@ Harness status: OK Found 2 tests -2 Fail +1 Pass +1 Fail Fail ready promise is rejected when a transition is canceled by updating transition-property -Fail ready promise is rejected when a transition is canceled by changing the transition property to something not interpolable \ No newline at end of file +Pass ready promise is rejected when a transition is canceled by changing the transition property to something not interpolable \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-startTime.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-startTime.tentative.txt index 8da302613bf..aab11907ea2 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-startTime.tentative.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/CSSTransition-startTime.tentative.txt @@ -2,10 +2,10 @@ Harness status: OK Found 5 tests -3 Pass -2 Fail +4 Pass +1 Fail Pass The start time of a newly-created transition is unresolved Fail The start time of transitions is based on when they are generated Pass The start time of a transition can be set Pass The start time can be set to seek a transition -Fail Seeking a transition using start time dispatches transition events \ No newline at end of file +Pass Seeking a transition using start time dispatches transition events \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/event-dispatch.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/event-dispatch.tentative.txt index ddf566f5785..632a6cf7bd2 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/event-dispatch.tentative.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/event-dispatch.tentative.txt @@ -2,27 +2,27 @@ Harness status: OK Found 30 tests -6 Pass -24 Fail +12 Pass +18 Fail Pass Idle -> Pending or Before Pass Idle -> Before -Fail Idle or Pending -> Active +Pass Idle or Pending -> Active Pass Idle or Pending -> After Fail Before -> Idle (display: none) Fail Before -> Idle (Animation.timeline = null) -Fail Before -> Active -Fail Before -> After +Pass Before -> Active +Pass Before -> After Fail Active -> Idle, no delay (display: none) Fail Active -> Idle, no delay (Animation.timeline = null) Fail Active -> Idle, with positive delay (display: none) Fail Active -> Idle, with positive delay (Animation.timeline = null) Fail Active -> Idle, with negative delay (display: none) Fail Active -> Idle, with negative delay (Animation.timeline = null) -Fail Active -> Before -Fail Active -> After +Pass Active -> Before +Pass Active -> After Pass After -> Before Pass After -> Active -Fail Calculating the interval start and end time with negative start delay. +Pass Calculating the interval start and end time with negative start delay. Fail Calculating the interval start and end time with negative end delay. Fail Call Animation.cancel after canceling transition. Fail Restart transition after canceling transition immediately diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/inherit-height-transition.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/inherit-height-transition.txt index bf3cd3ca2a8..588af2171ec 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/inherit-height-transition.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/inherit-height-transition.txt @@ -2,5 +2,5 @@ Harness status: OK Found 1 tests -1 Fail -Fail Transitioned height, explicitly inherited down two DOM levels, should inherit correctly \ No newline at end of file +1 Pass +Pass Transitioned height, explicitly inherited down two DOM levels, should inherit correctly \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-001.txt index 7756bd4487e..3eb7e8481d2 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-001.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-001.txt @@ -2,8 +2,8 @@ Harness status: OK Found 560 tests -557 Pass -3 Fail +558 Pass +2 Fail Pass background-color color(rgba) / values Pass background-color color(rgba) / events Pass background-position-x length(pt) / values @@ -560,7 +560,7 @@ Pass vertical-align percentage(%) / values Pass vertical-align percentage(%) / events Pass opacity number[0,1](zero-to-one) / values Pass opacity number[0,1](zero-to-one) / events -Fail visibility visibility(keyword) / values +Pass visibility visibility(keyword) / values Pass visibility visibility(keyword) / events Fail z-index integer(integer) / values Fail z-index integer(integer) / events \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-001.txt index 7f60528a6dc..8b3b8aff42c 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-001.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-001.txt @@ -502,7 +502,7 @@ Pass text-indent length(in) / values Pass text-indent length(in) / events Pass text-indent percentage(%) / values Pass text-indent percentage(%) / events -Pass text-shadow shadow(shadow) / values +Fail text-shadow shadow(shadow) / values Fail text-shadow shadow(shadow) / events Pass outline-color color(rgba) / values Pass outline-color color(rgba) / events @@ -560,7 +560,7 @@ Pass vertical-align percentage(%) / values Pass vertical-align percentage(%) / events Pass opacity number[0,1](zero-to-one) / values Pass opacity number[0,1](zero-to-one) / events -Fail visibility visibility(keyword) / values +Pass visibility visibility(keyword) / values Pass visibility visibility(keyword) / events Pass z-index integer(integer) / values Pass z-index integer(integer) / events \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-002.txt index f3698939b5e..7e68423c929 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-002.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/properties-value-inherit-002.txt @@ -2,8 +2,7 @@ Harness status: OK Found 560 tests -559 Pass -1 Fail +560 Pass Pass background-color color(rgba) / values Pass background-color color(rgba) / events Pass background-position-x length(pt) / values @@ -560,7 +559,7 @@ Pass vertical-align percentage(%) / values Pass vertical-align percentage(%) / events Pass opacity number[0,1](zero-to-one) / values Pass opacity number[0,1](zero-to-one) / events -Fail visibility visibility(keyword) / values +Pass visibility visibility(keyword) / values Pass visibility visibility(keyword) / events Pass z-index integer(integer) / values Pass z-index integer(integer) / events \ No newline at end of file