Ensure consistency of ButtonFace system color and button background.

According to CSS Color Module Level 4, ButtonFace is the background
color on default-syle button elements. This CL resolves the current
discrepancy, introduces additional tests and removes some ignored
code. With this CL, all button-related colors should behave as they
are supposed to.

Bug: 1299441
Change-Id: I56ee1b993383c37aa920128f59556b97d8d6508e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3535440
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/main@{#984005}

css/css-color/system-color-consistency.html

@@ -17,13 +17,16 @@
   <!-- Reference elements -->
   <!-- Buttons -->
   <div id="buttons">
-    <button name="button"></button><input type="submit" name="submit button"><input type="reset" name="reset button">
+    <button name="button"></button><input type="submit" name="submit button">
+    <input type="reset" name="reset button"><input type="color" name="color picker">
   </div>
   <mark id="mark">Marked text</mark>
   <script>
     for (let element of document.getElementById("buttons").children) {
       style = document.defaultView.getComputedStyle(element);
-      test_computed_value(`color`, `ButtonText`, style.getPropertyValue('color'), 'has the same color as text on a ' + element.name);
+      test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), 'resolves to the same color as the border-color of a ' + element.name);
+      test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name);
+      test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name);
     }
     // Mark and MarkText
     style = document.defaultView.getComputedStyle(document.getElementById('mark'));