From 218beb9218e901090436adcfef396401b4f44147 Mon Sep 17 00:00:00 2001 From: Martin Robinson Date: Thu, 21 May 2020 18:16:03 +0200 Subject: [PATCH] Improve ending of transitions For legacy reasons, transitions were marked as finished after updating the style. According to the spec, they should be marked as finished when animations are updated and before restyle. This change does that as well as preventing replacement of finished transitions. Having finished transitions survive a full restyle cycle and allowing the replacement of finished transition, could lead to issues were removed from the global list of animating transitions too soon: 1. A transitions finishes 2. Restyle 3. Transitions is marked as finished and events are queued 4. Restyle cancels finished transition and replaces it instead of clearing finished transition 5. Events are sent for the incorrectly canceled transition removing it completely from the list of running transitions due to the extra event. --- components/script/animations.rs | 3 +- components/style/animation.rs | 2 +- .../properties-value-inherit-001.html.ini | 225 ++++++++++++++++++ .../properties-value-inherit-003.html.ini | 24 ++ tests/wpt/mozilla/meta/MANIFEST.json | 2 +- .../faster-reversing-of-transitions.html | 43 ++++ 6 files changed, 296 insertions(+), 3 deletions(-) diff --git a/components/script/animations.rs b/components/script/animations.rs index 0c3f1c682062..d8b80338851b 100644 --- a/components/script/animations.rs +++ b/components/script/animations.rs @@ -55,6 +55,8 @@ impl Animations { ); } } + + Self::finish_running_animations(set, now, &mut update); } update } @@ -71,7 +73,6 @@ impl Animations { for set in sets.values_mut() { Self::handle_canceled_animations(set, now, &mut update); - Self::finish_running_animations(set, now, &mut update); Self::handle_new_animations(set, &mut update); } diff --git a/components/style/animation.rs b/components/style/animation.rs index cc198e0491f1..f792d852a9cb 100644 --- a/components/style/animation.rs +++ b/components/style/animation.rs @@ -889,7 +889,7 @@ impl ElementAnimationSet { if let Some(old_transition) = self .transitions .iter_mut() - .filter(|transition| transition.state != AnimationState::Canceled) + .filter(|transition| transition.state == AnimationState::Running) .find(|transition| transition.property_animation.property_id() == longhand_id) { // We always cancel any running transitions for the same property. diff --git a/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-001.html.ini b/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-001.html.ini index 5d20389c8e9f..e8f745a7c296 100644 --- a/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-001.html.ini +++ b/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-001.html.ini @@ -1,58 +1,283 @@ [properties-value-inherit-001.html] + [outline-width length(px) / values] + expected: FAIL + [background-position length(pt) / values] expected: FAIL [background-position length(pt) / events] expected: FAIL + [text-indent length(pc) / values] + expected: FAIL + + [outline-offset length(px) / values] + expected: FAIL + + [vertical-align length(in) / values] + expected: FAIL + + [outline-width length(pc) / events] + expected: FAIL + + [text-indent percentage(%) / events] + expected: FAIL + + [vertical-align length(px) / events] + expected: FAIL + [background-position length(px) / values] expected: FAIL + [text-shadow shadow(shadow) / events] + expected: FAIL + [background-position length(cm) / events] expected: FAIL [background-position length(mm) / values] expected: FAIL + [outline-offset length(mm) / events] + expected: FAIL + + [vertical-align length(in) / events] + expected: FAIL + + [vertical-align percentage(%) / values] + expected: FAIL + [background-position length(in) / events] expected: FAIL + [text-indent length(ex) / values] + expected: FAIL + + [text-indent length(mm) / events] + expected: FAIL + + [vertical-align length(em) / events] + expected: FAIL + + [vertical-align length(em) / values] + expected: FAIL + + [text-indent length(px) / values] + expected: FAIL + + [clip rectangle(rectangle) / values] + expected: FAIL + + [vertical-align length(cm) / events] + expected: FAIL + + [text-indent length(ex) / events] + expected: FAIL + + [outline-offset length(cm) / events] + expected: FAIL + [background-position length(em) / events] expected: FAIL + [vertical-align length(mm) / events] + expected: FAIL + + [outline-offset length(em) / events] + expected: FAIL + + [vertical-align length(ex) / events] + expected: FAIL + + [outline-width length(em) / events] + expected: FAIL + + [text-indent length(in) / events] + expected: FAIL + + [outline-offset length(ex) / values] + expected: FAIL + + [vertical-align length(pc) / values] + expected: FAIL + + [vertical-align length(cm) / values] + expected: FAIL + + [visibility visibility(keyword) / events] + expected: FAIL + + [vertical-align length(ex) / values] + expected: FAIL + + [text-indent length(pc) / events] + expected: FAIL + + [text-indent length(em) / events] + expected: FAIL + + [outline-offset length(mm) / values] + expected: FAIL + + [outline-offset length(pt) / values] + expected: FAIL + + [text-indent length(px) / events] + expected: FAIL + + [text-indent length(cm) / events] + expected: FAIL + + [vertical-align length(pt) / values] + expected: FAIL + [visibility visibility(keyword) / values] expected: FAIL + [outline-width length(cm) / events] + expected: FAIL + [background-position length(ex) / values] expected: FAIL + [clip rectangle(rectangle) / events] + expected: FAIL + + [text-indent length(mm) / values] + expected: FAIL + [background-position length(cm) / values] expected: FAIL + [text-indent length(pt) / events] + expected: FAIL + + [outline-offset length(in) / values] + expected: FAIL + + [outline-width length(pt) / values] + expected: FAIL + + [outline-width length(ex) / events] + expected: FAIL + + [outline-width length(mm) / events] + expected: FAIL + + [outline-width length(in) / values] + expected: FAIL + + [text-indent length(cm) / values] + expected: FAIL + + [outline-color color(rgba) / values] + expected: FAIL + [background-position length(ex) / events] expected: FAIL + [text-indent length(pt) / values] + expected: FAIL + + [vertical-align percentage(%) / events] + expected: FAIL + + [outline-width length(pt) / events] + expected: FAIL + + [outline-color color(rgba) / events] + expected: FAIL + + [text-shadow shadow(shadow) / values] + expected: FAIL + [background-position length(pc) / events] expected: FAIL + [outline-width length(in) / events] + expected: FAIL + + [outline-width length(ex) / values] + expected: FAIL + [background-position length(in) / values] expected: FAIL + [outline-width length(cm) / values] + expected: FAIL + + [outline-offset length(ex) / events] + expected: FAIL + + [outline-width length(mm) / values] + expected: FAIL + + [outline-width length(pc) / values] + expected: FAIL + + [vertical-align length(px) / values] + expected: FAIL + + [text-indent length(in) / values] + expected: FAIL + + [vertical-align length(pc) / events] + expected: FAIL + + [text-indent length(em) / values] + expected: FAIL + [background-position length(pc) / values] expected: FAIL [background-position percentage(%) / values] expected: FAIL + [vertical-align length(pt) / events] + expected: FAIL + + [outline-width length(em) / values] + expected: FAIL + + [outline-offset length(em) / values] + expected: FAIL + + [outline-offset length(pt) / events] + expected: FAIL + + [outline-offset length(cm) / values] + expected: FAIL + [background-position length(mm) / events] expected: FAIL + [vertical-align length(mm) / values] + expected: FAIL + + [text-indent percentage(%) / values] + expected: FAIL + + [outline-offset length(px) / events] + expected: FAIL + [background-position length(em) / values] expected: FAIL + [outline-offset length(in) / events] + expected: FAIL + + [outline-offset length(pc) / values] + expected: FAIL + + [outline-width length(px) / events] + expected: FAIL + [background-position percentage(%) / events] expected: FAIL [background-position length(px) / events] expected: FAIL + [outline-offset length(pc) / events] + expected: FAIL + diff --git a/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-003.html.ini b/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-003.html.ini index 681c017a2ee0..574b3842613b 100644 --- a/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-003.html.ini +++ b/tests/wpt/metadata-layout-2020/css/css-transitions/properties-value-inherit-003.html.ini @@ -1,7 +1,31 @@ [properties-value-inherit-003.html] + [text-indent length-em(em) / events] + expected: FAIL + + [vertical-align length-em(em) / values] + expected: FAIL + [background-position length-em(em) / events] expected: FAIL + [outline-width length-em(em) / values] + expected: FAIL + + [outline-offset length-em(em) / events] + expected: FAIL + [background-position length-em(em) / values] expected: FAIL + [outline-width length-em(em) / events] + expected: FAIL + + [text-indent length-em(em) / values] + expected: FAIL + + [outline-offset length-em(em) / values] + expected: FAIL + + [vertical-align length-em(em) / events] + expected: FAIL + diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json index 832db1e23acd..a9dfb3e3fc06 100644 --- a/tests/wpt/mozilla/meta/MANIFEST.json +++ b/tests/wpt/mozilla/meta/MANIFEST.json @@ -12871,7 +12871,7 @@ ] ], "faster-reversing-of-transitions.html": [ - "8471a18f962283afd8d6a81c8ab868e5c2eedd7d", + "e646a06405d3f32b37e94f797f7a99c6ca54254b", [ null, {} diff --git a/tests/wpt/mozilla/tests/css/animations/faster-reversing-of-transitions.html b/tests/wpt/mozilla/tests/css/animations/faster-reversing-of-transitions.html index 8471a18f9622..e646a06405d3 100644 --- a/tests/wpt/mozilla/tests/css/animations/faster-reversing-of-transitions.html +++ b/tests/wpt/mozilla/tests/css/animations/faster-reversing-of-transitions.html @@ -28,6 +28,12 @@ return element; } +function waitForFrame() { + return new Promise(resolve => { + window.requestAnimationFrame(resolve); + }); +} + test(function() { let testBinding = new window.TestBinding(); let div = createTransitionElement(); @@ -121,4 +127,41 @@ document.body.removeChild(div); }, "Non-reversed transition changes use the full transition-duration"); + +promise_test(async t => { + let testBinding = new window.TestBinding(); + let div = createTransitionElement(); + + let handledTransitionEnd = false; + div.addEventListener("transitionend", () => { + handledTransitionEnd = true; + }); + + let handledTransitionCancel = false; + div.addEventListener("transitioncancel", () => { + handledTransitionCancel = true; + }); + + // Start a transition and allow 30% of it to complete. + div.style.width = "110px"; + getComputedStyle(div).width; + + testBinding.advanceClock(10000); + getComputedStyle(div).width; + + div.style.transitionDuration = "1000s"; + div.style.width = "10px"; + + testBinding.advanceClock(1); + getComputedStyle(div).width; + + await waitForFrame(); + + // We should either have canceled the animation or it should have terminated. + assert_true(handledTransitionCancel || handledTransitionEnd); + assert_false(handledTransitionCancel && handledTransitionEnd); + + document.body.removeChild(div); +}, "Finished transitions are not reversed"); +