style: Ensure we cancel transitions without the need of an extra flush

When something switches to display: none, right now we rely on
StopAnimationsForElementsWithoutFrames(), which posts a restyle and the
previous ProcessPendingRestyles call was papering over it.

For other elements in the display none subtree it doesn't matter,
because we don't keep their styles around, but for the display: none
element themselves we do need to update transitions on time.

We could, possibly more generally, remove
StopAnimationsForElementsWithoutFrames() altogether and cancel
animations when we clear style data, perhaps... But that's probably
worth a follow-up.

Differential Revision: https://phabricator.services.mozilla.com/D151600

components/style/gecko/wrapper.rs

@@ -1515,6 +1515,12 @@ impl<'le> TElement for GeckoElement<'le> {
 
         let after_change_ui_style = after_change_style.get_ui();
         let existing_transitions = self.css_transitions_info();
+
+        if after_change_style.get_box().clone_display().is_none() {
+            // We need to cancel existing transitions.
+            return !existing_transitions.is_empty();
+        }
+
         let mut transitions_to_keep = LonghandIdSet::new();
         for transition_property in after_change_style.transition_properties() {
             let physical_longhand = transition_property

components/style/matching.rs

@@ -347,7 +347,7 @@ trait PrivateMatchMethods: TElement {
             return false;
         }
 
-        if new_style.clone_display().is_none() || old_style.clone_display().is_none() {
+        if old_style.clone_display().is_none() {
             return false;
         }