[Media Controls] Fix overflow menu won't close when click mute button.

This CL prevent fullscreen button and mute button in overflow menu from
swallowing event which causes the issue.

Bug: 941451
Change-Id: I0e0dc1203df86b0979110da0d78f24d391ae8efb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1626398
Commit-Queue: Jazz Xu <jazzhsu@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#663843}

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

@@ -68,6 +68,8 @@ void MediaControlFullscreenButtonElement::DefaultEventHandler(Event& event) {
       GetMediaControls().ExitFullscreen();
     else
       GetMediaControls().EnterFullscreen();
+
+    if (!IsOverflowElement())
       event.SetDefaultHandled();
   }
   MediaControlInputElement::DefaultEventHandler(event);

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

@@ -70,6 +70,8 @@ void MediaControlMuteButtonElement::DefaultEventHandler(Event& event) {
     }
 
     MediaElement().setMuted(!MediaElement().muted());
+
+    if (!IsOverflowElement())
       event.SetDefaultHandled();
   }
 

third_party/blink/web_tests/media/controls/overflow-menu-hide-on-click-item.html

@@ -3,6 +3,21 @@
 <script src='../../resources/testharness.js'></script>
 <script src='../../resources/testharnessreport.js'></script>
 <script src='../media-controls.js'></script>
+<style>
+
+/*
+ * We need to have the video small enough to have the mute button
+ * displayed in overflow menu. Meanwhile, we want the video element
+ * far from edge so that the overflow menu is fully displayed.
+ */
+video {
+  width: 150px;
+  position: absolute;
+  left: 400px;
+  top: 400px;
+}
+
+</style>
 <video controls></video>
 <script>
 async_test(t => {
@@ -14,6 +29,12 @@ async_test(t => {
   video.onloadeddata = t.step_func(() => {
     const menu = overflowMenu(video);
 
+    singleTapOnControl(overflowButton(video), t.step_func(() => {
+      assert_not_equals(getComputedStyle(menu).display, 'none');
+
+      singleTapOnControl(muteOverflowItem(video), t.step_func(() => {
+        assert_equals(getComputedStyle(menu).display, 'none');
+
         singleTapOnControl(overflowButton(video), t.step_func(() => {
           assert_not_equals(getComputedStyle(menu).display, 'none');
 
@@ -21,6 +42,8 @@ async_test(t => {
             assert_equals(getComputedStyle(menu).display, 'none');
           }));
         }));
+      }));
+    }));
   });
 });
 </script>