[Media Controls] Fix abrupt transition after interacting with volume slider/mute button

Bug: 907666
Change-Id: Icbee5df7ce3b253407843dbbfd569117d3b866de
Reviewed-on: https://chromium-review.googlesource.com/c/1351601
Commit-Queue: Jazz Xu <jazzhsu@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611457}

third_party/blink/renderer/modules/media_controls/elements/media_control_panel_element.cc

@@ -64,6 +64,9 @@ class MediaControlPanelElement::TransitionEventListener final
 
  private:
   void Invoke(ExecutionContext* context, Event* event) override {
+    if (event->target() != element_)
+      return;
+
     if (event->type() == event_type_names::kTransitionend) {
       callback_.Run();
       return;

third_party/blink/renderer/modules/media_controls/elements/media_control_panel_element_test.cc

@@ -33,8 +33,8 @@ class MediaControlPanelElementTest : public PageTestBase {
   }
 
  protected:
-  void SimulateTransitionEnd() {
-    TriggerEvent(event_type_names::kTransitionend);
+  void SimulateTransitionEnd(Element& element) {
+    TriggerEvent(element, event_type_names::kTransitionend);
   }
 
   void ExpectPanelIsDisplayed() { EXPECT_TRUE(GetPanel().IsWanted()); }
@@ -55,9 +55,10 @@ class MediaControlPanelElementTest : public PageTestBase {
   HTMLMediaElement& GetMediaElement() { return *media_element_.Get(); }
 
  private:
-  void TriggerEvent(const AtomicString& name) {
+  void TriggerEvent(Element& element, const AtomicString& name) {
     Event* event = Event::Create(name);
-    GetPanel().DispatchEvent(*event);
+    event->SetTarget(&element);
+    GetPanel().FireEventListeners(*event);
   }
 
   Persistent<HTMLMediaElement> media_element_;
@@ -66,6 +67,9 @@ class MediaControlPanelElementTest : public PageTestBase {
 };
 
 TEST_F(MediaControlPanelElementTest, StateTransitions) {
+  Element* child_div = HTMLDivElement::Create(GetPanel().GetDocument());
+  GetPanel().ParserAppendChild(child_div);
+
   // Make sure we are displayed (we are already opaque).
   GetPanel().SetIsDisplayed(true);
   ExpectPanelIsDisplayed();
@@ -75,10 +79,15 @@ TEST_F(MediaControlPanelElementTest, StateTransitions) {
   EventListenerNotCreated();
   GetPanel().MakeTransparent();
 
-  // The event listener should now be attached so we should simulate the
-  // transition end and the panel will be hidden.
+  // The event listener should now be attached
   EventListenerAttached();
-  SimulateTransitionEnd();
+
+  // Simulate child div transition end and the panel should not be hidden
+  SimulateTransitionEnd(*child_div);
+  ExpectPanelIsDisplayed();
+
+  // Simulate panel transition end and the panel will be hidden
+  SimulateTransitionEnd(GetPanel());
   ExpectPanelIsNotDisplayed();
 
   // The event listener should be detached. We should now make the panel
@@ -89,7 +98,7 @@ TEST_F(MediaControlPanelElementTest, StateTransitions) {
   // The event listener should now be attached so we should simulate the
   // transition end event and the panel will be hidden.
   EventListenerAttached();
-  SimulateTransitionEnd();
+  SimulateTransitionEnd(GetPanel());
   ExpectPanelIsDisplayed();
 }