Fixes progress, range and select element styling in dark mode

Prior to this CL, progress and range have an alpha channel applied to
their borders. And the select element isn't styled correctly for dark
mode.

This CL fixes progress and range element by avoiding the application
of the alpha channel in dark mode. In addition, it styles the
multi-select element with colors specified in the dark mode design.


Bug: 1107289,1107287, 1111932
Change-Id: Ia55fabd46ad0f1ff4aa5de90cf88d2480b301962
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2368084Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Commit-Queue: Yu Han <yuzhehan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809035}

third_party/blink/renderer/core/html/resources/controls_refresh.css

@@ -203,20 +203,36 @@ select:-internal-list-box {
   border-radius: 2px;
 }
 
-select:-internal-list-box:enabled option:hover:enabled {
+select:-internal-list-box option:hover {
   background-color: initial;
 }
 
-/* option selected */
+/* option selected, list-box not focused */
 select:-internal-list-box option:checked,
-select:-internal-list-box:enabled option:checked:enabled:hover {
-  background-color: #cecece !important;
-  color: #101010 !important;
+select:-internal-list-box option:checked:hover {
+  background-color: -internal-light-dark(#cecece, #545454) !important;
+  color: -internal-light-dark(#101010, #FFFFFF) !important;
 }
 
-select:-internal-list-box:focus option:checked:enabled:hover {
-  background-color: -internal-active-list-box-selection !important;
-  color: -internal-active-list-box-selection-text !important;
+/* option selected, list-box focused */
+select:-internal-list-box:focus option:checked,
+select:-internal-list-box:focus option:checked:hover {
+  /* TODO(crbug.com/1129658): The dark mode color here should be handled
+     within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
+  background-color: -internal-light-dark(-internal-active-list-box-selection, #99C8FF) !important;
+  color: -internal-light-dark(-internal-active-list-box-selection-text, #FFFFFF) !important;
+}
+
+select:-internal-list-box:focus option:checked:disabled {
+  /* TODO(crbug.com/1129658): The dark mode color here should be handled
+     within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
+  background-color: -internal-light-dark(-internal-inactive-list-box-selection, rgba(59, 59, 59, 0.3)) !important;
+}
+
+select:-internal-list-box:disabled option:checked,
+select:-internal-list-box option:checked:disabled,
+select:-internal-list-box option:checked:disabled:hover {
+  color: -internal-light-dark(gray, #aaa) !important;
 }
 
 input::-webkit-datetime-edit-ampm-field:focus,

third_party/blink/web_tests/TestExpectations

@@ -6687,14 +6687,6 @@ crbug.com/1111937 virtual/dark-color-scheme/fast/forms/color-scheme/text-selecti
 crbug.com/1111922 virtual/dark-color-scheme/fast/forms/color-scheme/calendar-picker/date-picker-disabled-values.html [ Failure ]
 crbug.com/1096729 virtual/dark-color-scheme/fast/forms/color-scheme/color/color-suggestion-picker-appearance-with-scrollbar.html [ Failure ]
 crbug.com/1096729 virtual/dark-color-scheme/fast/forms/color-scheme/color/color-suggestion-picker-appearance.html [ Failure ]
-crbug.com/1107289 virtual/dark-color-scheme/fast/forms/color-scheme/progress/progress-appearance-basic.html [ Failure ]
-crbug.com/1107287 virtual/dark-color-scheme/fast/forms/color-scheme/range/range-appearance-basic.html [ Failure ]
-crbug.com/1107287 virtual/dark-color-scheme/fast/forms/color-scheme/range/range-pressed-state.html [ Failure ]
-crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/select/select-multiple-appearance-basic.html [ Failure ]
-crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/select/select-multiple-hover-focused-unselected.html [ Failure ]
-crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/select/select-multiple-hover-selected.html [ Failure ]
-crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/select/select-multiple-hover-unselected.html [ Failure ]
-crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/select/select-popup-appearance-basic.html [ Failure ]
 crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/suggestion-picker/date-suggestion-picker-appearance.html [ Failure ]
 crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/suggestion-picker/datetimelocal-suggestion-picker-appearance.html [ Failure ]
 crbug.com/1111932 virtual/dark-color-scheme/fast/forms/color-scheme/suggestion-picker/month-suggestion-picker-appearance.html [ Failure ]

ui/native_theme/native_theme_base.cc

@@ -1170,7 +1170,8 @@ void NativeThemeBase::PaintSliderTrack(cc::PaintCanvas* canvas,
     flags.setStyle(cc::PaintFlags::kStroke_Style);
     flags.setStrokeWidth(kBorderWidth);
     SkColor border_color = ControlsBorderColorForState(state, color_scheme);
-    if (!UsesHighContrastColors() && state != kDisabled)
+    if (!UsesHighContrastColors() && state != kDisabled &&
+        color_scheme != ColorScheme::kDark)
       border_color = SkColorSetA(border_color, 0x80);
     flags.setColor(border_color);
     track_rect.inset(kBorderWidth / 2, kBorderWidth / 2);
@@ -1334,7 +1335,7 @@ void NativeThemeBase::PaintProgressBar(
     flags.setStyle(cc::PaintFlags::kStroke_Style);
     flags.setStrokeWidth(kBorderWidth);
     SkColor border_color = GetControlColor(kBorder, color_scheme);
-    if (!UsesHighContrastColors())
+    if (!UsesHighContrastColors() && color_scheme != ColorScheme::kDark)
       border_color = SkColorSetA(border_color, 0x80);
     flags.setColor(border_color);
     track_rect.inset(kBorderWidth / 2, kBorderWidth / 2);