Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LibWeb/CSS+Animations+DOM: Add support for TransitionEvents #3024

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

LibWeb/CSS+Animations+DOM: Add support for TransitionEvents #3024

wants to merge 6 commits into from
+540 −8

Conversation

LucasChollet
Copy link
Contributor

I started to work on this to make these two tests pass:

  • css/css-color/animation/opacity-animation-ending-correctly-001.html
  • css/css-color/animation/opacity-animation-ending-correctly-002.html

This is now done, and these tests are passing, we still can't run them with our internal runner though.

There are also some improvements on other WPT tests, unfortunately there are some flakiness and they sometimes crash. The crash is reproducible on master, so I suppose that it is unrelated to my changes.

Here is a detailed diff between master and the top of my PR on the following directories: css-color, css-animations, css-transitions:

Tests:
Total: 599 -> 599 (0)

Tests Status Summary:
  PASS         269 ->   272 (3)
  OK           236 ->   241 (5)
  CRASH          6 ->     5 (-1)
  ERROR          3 ->     3 (0)
  FAIL          57 ->    57 (0)
  TIMEOUT       28 ->    21 (-7)

Detailed Test Summary:
  New: 0
  Removed: 0
  Changed status:
    OK->CRASH: 1 
    TIMEOUT->PASS: 3 
    CRASH->OK: 2 
    TIMEOUT->OK: 4 

  Regressions:
    /css/css-animations/CSSAnimation-canceling.tentative.html: CRASH

  Improvements:
    /css/css-animations/CSSAnimation-effect.tentative.html: OK
    /css/css-animations/event-dispatch.tentative.html: OK
    /css/css-color/animation/opacity-animation-ending-correctly-001.html: PASS
    /css/css-color/animation/opacity-animation-ending-correctly-002.html: PASS
    /css/css-transitions/before-load-001.html: OK
    /css/css-transitions/events-005.html: OK
    /css/css-transitions/inherit-height-transition.html: OK
    /css/css-transitions/root-color-transition.html: PASS
    /css/css-transitions/transitioncancel-002.html: OK

Subtests:
Total: 14947 -> 14978 (31)

Subtests Status Summary:
  PASS        6998 ->  7069 (71)
  FAIL        6675 ->  6641 (-34)
  TIMEOUT      335 ->   331 (-4)
  NOTRUN       939 ->   937 (-2)

Detailed Subtest Summary:
  New: 40
    PASS: 17
    FAIL: 23

  New Details:
    Passing:
      /css/css-animations/CSSAnimation-effect.tentative.html::A play-pending animation's effect whose effect is replaced still exits the pending state (PASS)
      /css/css-animations/CSSAnimation-effect.tentative.html::After replacing a finished animation's effect with a longer one it fires an animationstart event (PASS)
      /css/css-animations/CSSAnimation-effect.tentative.html::Replacing an animation's effect with a shorter one that should have already finished, the animation finishes immediately (PASS)
      /css/css-animations/CSSAnimation-effect.tentative.html::Replacing an animation's effect with an effect that targets a different property should update both properties (PASS)
      /css/css-animations/event-dispatch.tentative.html::Active -> Before (PASS)
      /css/css-animations/event-dispatch.tentative.html::After -> Idle, display: none (PASS)
      /css/css-animations/event-dispatch.tentative.html::Before -> Active (PASS)
      /css/css-animations/event-dispatch.tentative.html::Call Animation.cancel after canceling animation. (PASS)
      /css/css-animations/event-dispatch.tentative.html::Call Animation.cancel after restarting animation immediately. (PASS)
      /css/css-animations/event-dispatch.tentative.html::Idle -> Active (PASS)
      /css/css-animations/event-dispatch.tentative.html::Redundant change, active -> after, then back (PASS)
      /css/css-animations/event-dispatch.tentative.html::Redundant change, active -> before, then back (PASS)
      /css/css-animations/event-dispatch.tentative.html::Redundant change, after -> active, then back (PASS)
      /css/css-animations/event-dispatch.tentative.html::Redundant change, after -> before, then back (PASS)
      /css/css-animations/event-dispatch.tentative.html::Redundant change, before -> active, then back (PASS)
      /css/css-animations/event-dispatch.tentative.html::Redundant change, before -> after, then back (PASS)
      /css/css-animations/event-dispatch.tentative.html::Set null target effect after canceling the animation. (PASS)
    Non-passing:
      /css/css-animations/CSSAnimation-effect.tentative.html::CSS animation events are dispatched at the original element even after setting an effect with a different target element (FAIL)
      /css/css-animations/CSSAnimation-effect.tentative.html::Replacing the effect of a CSSAnimation causes subsequent changes to corresponding animation-* properties to be ignored (FAIL)
      /css/css-animations/CSSAnimation-effect.tentative.html::Setting a null effect on a running animation fires an animationend event (FAIL)
      /css/css-animations/CSSAnimation-effect.tentative.html::Setting animation-composition sets the composite property on the effect (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Active -> Active (backwards) (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Active -> Active (forwards) (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Active -> After (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Active -> Idle -> Active: animationstart is fired by restarting animation (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Active -> Idle, calling Animation.cancel() (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Active -> Idle, display: none (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Active -> Idle, setting Animation.timeline = null (FAIL)
      /css/css-animations/event-dispatch.tentative.html::After -> Active (FAIL)
      /css/css-animations/event-dispatch.tentative.html::After -> Before (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Before -> After (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Cancel the animation after clearing the target effect. (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Idle -> After (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Negative playbackRate sanity test(Before -> Active -> Before) (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Replacing a running animation should get animationcancel earlier than animationstart (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Restart animation after canceling animation immediately. (FAIL)
      /css/css-animations/event-dispatch.tentative.html::Set timeline and play transition after clearing the timeline. (FAIL)
      /css/css-animations/event-dispatch.tentative.html::The cancel event should be fired before the new start event if both have the same position in the animation list (FAIL)
      /css/css-animations/event-dispatch.tentative.html::The cancel event with an earlier position in animation list should be fired earlier (FAIL)
      /css/css-animations/event-dispatch.tentative.html::The order of the cancel events follows the relative positions in the animation list at the point when they were cancelled (FAIL)
  Removed: 9
    PASS: 6
    FAIL: 3

  Removed Details:
    Passing:
      /css/css-animations/CSSAnimation-canceling.tentative.html::After canceling an animation, it can still be re-used (PASS)
      /css/css-animations/CSSAnimation-canceling.tentative.html::After canceling an animation, it can still be seeked (PASS)
      /css/css-animations/CSSAnimation-canceling.tentative.html::After canceling an animation, updating animation properties doesn't make it live again (PASS)
      /css/css-animations/CSSAnimation-canceling.tentative.html::After canceling an animation, updating animation-play-state doesn't make it live again (PASS)
      /css/css-animations/CSSAnimation-canceling.tentative.html::Animated style is cleared after canceling a filling CSS animation (PASS)
      /css/css-animations/CSSAnimation-canceling.tentative.html::Animated style is cleared after canceling a running CSS animation (PASS)
    Non-passing:
      /css/css-animations/CSSAnimation-canceling.tentative.html::Setting animation-name to 'none' cancels the animation (FAIL)
      /css/css-animations/CSSAnimation-canceling.tentative.html::Setting display:none on an ancestor element cancels animations on descendants (FAIL)
      /css/css-animations/CSSAnimation-canceling.tentative.html::Setting display:none on an element cancel its animations (FAIL)
  Changed status:
    PASS->FAIL: 2 
    FAIL->PASS: 61 
    TIMEOUT->PASS: 1 
    TIMEOUT->FAIL: 3 
    NOTRUN->FAIL: 2 

  Regressions:
    /css/css-transitions/events-007.html::transitionend should not be fired if the element is made display:none during the transition: FAIL
    /css/css-transitions/non-rendered-element-001.html::Transitions do not run on an element not being rendered: FAIL

  Improvements:
    /css/css-transitions/before-load-001.html::CSS Transitions Test: Transitioning before load event: PASS
    /css/css-transitions/event-dispatch.tentative.html::After -> Active: PASS
    /css/css-transitions/event-dispatch.tentative.html::After -> Before: PASS
    /css/css-transitions/event-dispatch.tentative.html::Cancel the transition after it finishes: PASS
    /css/css-transitions/event-dispatch.tentative.html::Idle -> Before: PASS
    /css/css-transitions/event-dispatch.tentative.html::Idle -> Pending or Before: PASS
    /css/css-transitions/event-dispatch.tentative.html::Idle or Pending -> After: PASS
    /css/css-transitions/events-005.html::padding, padding-left: FAIL
    /css/css-transitions/events-005.html::padding-left, padding: FAIL
    /css/css-transitions/idlharness.html::Stringification of new TransitionEvent("transitionend"): PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface object length: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface object name: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: attribute elapsedTime: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: attribute propertyName: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: attribute pseudoElement: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: existence and properties of interface object: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: existence and properties of interface prototype object: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: existence and properties of interface prototype object's "constructor" property: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: existence and properties of interface prototype object's @@unscopables property: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: new TransitionEvent("transitionend") must inherit property "elapsedTime" with the proper type: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: new TransitionEvent("transitionend") must inherit property "propertyName" with the proper type: PASS
    /css/css-transitions/idlharness.html::TransitionEvent interface: new TransitionEvent("transitionend") must inherit property "pseudoElement" with the proper type: PASS
    /css/css-transitions/idlharness.html::TransitionEvent must be primary interface of new TransitionEvent("transitionend"): PASS
    /css/css-transitions/transitionevent-interface.html::Missing type argument: PASS
    /css/css-transitions/transitionevent-interface.html::TransitionEvent.pseudoElement initialized from the dictionary: PASS
    /css/css-transitions/transitionevent-interface.html::TransitionEventInit properties set value: PASS
    /css/css-transitions/transitionevent-interface.html::animationEventInit argument is empty dictionary: PASS
    /css/css-transitions/transitionevent-interface.html::animationEventInit argument is null: PASS
    /css/css-transitions/transitionevent-interface.html::animationEventInit argument is undefined: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime cannot be set to 'sample': PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime cannot be set to -Infinity: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime cannot be set to Infinity: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime cannot be set to NaN: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime cannot be set to [0.5, 1.0]: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime cannot be set to an object: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime has default value of 0.0: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime is readonly: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to '': PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to -0.5: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to 0.5: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to [0.5]: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to []: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to an object with a valueOf function: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to false: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to null: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to true: PASS
    /css/css-transitions/transitionevent-interface.html::elapsedTime set to undefined: PASS
    /css/css-transitions/transitionevent-interface.html::event type set to undefined: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName has default value of empty string: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName is readonly: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to 'sample': PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to [1, 2, 3]: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to []: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to a number: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to an object: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to an object with a valueOf function: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to false: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to null: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to true: PASS
    /css/css-transitions/transitionevent-interface.html::propertyName set to undefined: PASS
    /css/css-transitions/transitionevent-interface.html::the event inherts from Event: PASS
    /css/css-transitions/transitionevent-interface.html::the event is an instance of TransitionEvent: PASS
    /css/css-transitions/transitionevent-interface.html::type argument is null: PASS
    /css/css-transitions/transitionevent-interface.html::type argument is string: PASS

@LucasChollet
LibWeb/CSS: Add the TransitionEvent type
fbe4a48
@LucasChollet
LibWeb/Animations: Don't try to associate animations to null timelines
4ee4129 
The input to `set_timeline` is user controlled, it can be null.
@LucasChollet
LibWeb/Animations: Consider CSSTransitions in is_replaceable()
2d19b4b
@LucasChollet
LibWeb/Animations: Don't assume that animations have an effect
44c3e39 
I agree that the spec definition of this function isn't super clear
about that, but from "Web Animations 1 - 4.5. Animations"[1]:

An animation is a timing node that binds an animation effect child,
called its associated effect, to a timeline parent so that it runs. Both
of these associations are optional and configurable such that an
animation can have no associated effect or timeline at a given moment.

[1]: https://drafts.csswg.org/web-animations-1/#animations
@LucasChollet
LibWeb/CSS: Don't assume that animations have an associated effect
5fe4a48 
... when computing properties.
@LucasChollet
LibWeb/DOM: Fire transition[cancel,start,run,end] events
1add5a3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AtkinsSJ AtkinsSJ Awaiting requested review from AtkinsSJ AtkinsSJ is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@LucasChollet