webvtt: Add background opacity in mac

To test, open a video that has a WebVTT captions file. For example, https://www.iandevlin.com/html5test/webvtt/html5-video-webvtt-sample.html is a nice example.

Introduce new background opacity text track property for webvtt captions and wire it to apply opacity to the WebVTT caption HTML element.

Bug: 897730
Change-Id: Ic8dabc2279117b7ff12eb75a9daa8d26c9d9bb25
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1592622
Commit-Queue: Abigail Klein <abigailbklein@google.com>
Auto-Submit: Abigail Klein <abigailbklein@google.com>
Reviewed-by: Avi Drissman <avi@chromium.org>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#659116}

ui/native_theme/caption_style_mac.mm

@@ -11,6 +11,7 @@
 #include "base/strings/stringprintf.h"
 #include "base/strings/sys_string_conversions.h"
 #include "skia/ext/skia_utils_mac.h"
+#include "third_party/skia/include/core/SkColor.h"
 #include "ui/gfx/color_utils.h"
 #include "ui/native_theme/caption_style.h"
 
@@ -44,12 +45,14 @@ std::string GetMAForegroundColorAsCSSColor() {
       skia::CGColorRefToSkColor(cg_color.get()));
 }
 
-std::string GetMABackgroundColorAsCSSColor() {
+std::string GetMABackgroundColorAndOpacityAsCSSColor() {
   base::ScopedCFTypeRef<CGColorRef> cg_color(
       MACaptionAppearanceCopyBackgroundColor(kUserDomain, nullptr));
+  float opacity = MACaptionAppearanceGetBackgroundOpacity(kUserDomain, nullptr);
 
-  return color_utils::SkColorToRgbaString(
-      skia::CGColorRefToSkColor(cg_color.get()));
+  SkColor rgba_color =
+      SkColorSetA(skia::CGColorRefToSkColor(cg_color.get()), 0xff * opacity);
+  return color_utils::SkColorToRgbaString(rgba_color);
 }
 
 // The MA text scale is a float between 0.0 and 2.0; this function converts it
@@ -122,7 +125,7 @@ CaptionStyle CaptionStyle::FromSystemSettings() {
   CaptionStyle style;
 
   style.text_color = GetMAForegroundColorAsCSSColor();
-  style.background_color = GetMABackgroundColorAsCSSColor();
+  style.background_color = GetMABackgroundColorAndOpacityAsCSSColor();
   style.text_size = GetMATextScaleAsCSSPercent();
   style.text_shadow = GetMATextEdgeStyleAsCSSShadow();