Update range, meter and progress for consistency

This CL implements new looks for <input type=range>, <meter>, and <progress>.
NativeThemeAura::PaintProgressBar is added for <progress>.
New css rules are added in controls_refresh.css for <meter>.
NativeThemeAura::PaintSliderTrack is updated for <input type=range>.

Several constants (ex width/radius) are updated per design and cleaned up.

AlignSliderTrack is updated to use float instead of int to better align
the thumb and the track.

The high contrast test, range.html, is replaced with range_meter_progress.html
to better visualize the three related controls.

Note for some reason NativeThemeAura::PaintProgressBar is not called
in webtest mode when ForcedColors flag is enabled (The progress bar in
range_meter_progress-expected.png shows some old rendering) The issue
will be addressed in a separate CL.

Bug: 1001563
Change-Id: I9e6da39caf86c2b12187f5c56e0ef99989e3c0f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1817151Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Commit-Queue: Alex Keng <shihken@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#699637}

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

@@ -75,29 +75,36 @@ input[type="range" i]:disabled {
   color: #c5c5c5;
 }
 
+meter::-webkit-meter-inner-element::before,
+meter::-webkit-meter-inner-element::after {
+  display: block;
+  content: "";
+  height: 25%;
+}
+
 meter::-webkit-meter-bar {
   background: #efefef;
   border-width: 1px;
+  height: 50%;
   border-style: solid;
-  border-color: #cecece;
-  border-radius: 2px;
+  border-color: rgba(118, 118, 118, 0.3);
+  border-radius: 20px;
   box-sizing: border-box;
-  padding: 1px;
 }
 
 meter::-webkit-meter-optimum-value {
   background: #107c10;
-  border-radius: 1px 0px 0px 1px;
+  border-radius: 20px 0px 0px 20px;
 }
 
 meter::-webkit-meter-suboptimum-value {
   background: #ffb900;
-  border-radius: 1px 0px 0px 1px;
+  border-radius: 20px 0px 0px 20px;
 }
 
 meter::-webkit-meter-even-less-good-value {
   background: #d83b01;
-  border-radius: 1px 0px 0px 1px;
+  border-radius: 20px 0px 0px 20px;
 }
 
 input[type="date" i]::-webkit-calendar-picker-indicator,

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

@@ -178,21 +178,14 @@
     color: GrayText;
   }
 
-  progress::-webkit-progress-bar {
-    background: ButtonFace;
-  }
-
-  progress::-webkit-progress-value {
-    background: Highlight;
-  }
-
   meter::-webkit-meter-bar {
     background: ButtonFace;
+    border-color: WindowText;
   }
 
   meter::-webkit-meter-even-less-good-value,
   meter::-webkit-meter-optimum-value,
-  meter::-webkit-meter-suboptimal-value {
+  meter::-webkit-meter-suboptimum-value {
     background: Highlight;
   }
 }

third_party/blink/web_tests/fast/forms/controls-new-ui-high-contrast/range.html

-<input type=range /><br><br>
-<input type=range disabled />
-<script>
-    if (window.testRunner)
-        testRunner.setUseMockTheme(false);
-</script>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui-high-contrast/range_meter_progress.html

+<input type=range /><br><br>
+<input type=range disabled /><br><br>
+<progress max="100" value="50"></progress><br><br>
+<meter min="0" max="100" low="30" high="60" optimum="100" value="80"></meter><br><br>
+<meter min="0" max="100" low="30" high="60" optimum="100" value="45"></meter><br><br>
+<meter min="0" max="100" low="30" high="60" optimum="100" value="25"></meter><br><br>
+<script>
+  if (window.testRunner)
+    testRunner.setUseMockTheme(false);
+</script>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui/meter/meter-appearance-basic.html

@@ -10,7 +10,7 @@
   meter.optimumvalstyled::-webkit-meter-optimum-value { background: cadetblue; border-style: solid; border-width: 2px; border-color: blue; }
   meter.suboptimumvalstyled::-webkit-meter-suboptimum-value { background: cadetblue; border-style: solid; border-width: 2px; border-color: blue; }
   meter.evenlessgoodvalstyled::-webkit-meter-even-less-good-value { background: cadetblue; border-style: solid; border-width: 2px; border-color: blue; }
-  meter#bar-paddings::-webkit-meter-bar { padding: 5px; }
+  meter#bar-paddings::-webkit-meter-bar { padding: 2px; }
 </style>
 </head>
 <body>

third_party/blink/web_tests/fast/forms/controls-new-ui/progress/progress-appearance-basic.html

+<progress max="100" value="0"></progress><br><br>
+<progress max="100" value="1"></progress><br><br>
+<progress max="100" value="5"></progress><br><br>
+<progress max="100" value="50"></progress><br><br>
+<progress max="100" value="95"></progress><br><br>
+<progress max="100" value="99"></progress><br><br>
+<progress max="100" value="100"></progress><br><br>
+<progress max="100" value="50" style="height:30px"></progress><br><br>
+<script>
+if (window.testRunner)
+  testRunner.setUseMockTheme(false);
+</script>
+</body>
\ No newline at end of file

ui/native_theme/native_theme_aura.h

@@ -71,6 +71,11 @@ class NATIVE_THEME_EXPORT NativeThemeAura : public NativeThemeBase {
                                const gfx::Rect& rect,
                                const MenuItemExtraParams& menu_item,
                                ColorScheme color_scheme) const override;
+  void PaintProgressBar(cc::PaintCanvas* canvas,
+                        State state,
+                        const gfx::Rect& rect,
+                        const ProgressBarExtraParams& progress_bar,
+                        ColorScheme color_scheme) const override;
   void PaintArrowButton(cc::PaintCanvas* gc,
                         const gfx::Rect& rect,
                         Part direction,