Allow button to have writing mode vertical

This CL allows <button> and <input> types "button", "submit", "reset",
"file" to have writing-mode vertical for both the default native
appearance and when appearance is set to none.

We also put the change behind the feature flag
FormControlsVerticalWritingModeSupport so it can be turned on safely.

Change-Id: I1f6cc53a1eaef640e3d968d0e7ec5fc248879b50
Bug: 681917
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4617874
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: David Grogan <dgrogan@chromium.org>
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1159261}

third_party/blink/renderer/core/css/css_default_style_sheets.cc

@@ -37,6 +37,7 @@
 #include "third_party/blink/renderer/core/execution_context/execution_context.h"
 #include "third_party/blink/renderer/core/execution_context/security_context.h"
 #include "third_party/blink/renderer/core/frame/settings.h"
+#include "third_party/blink/renderer/core/html/forms/html_button_element.h"
 #include "third_party/blink/renderer/core/html/forms/html_text_area_element.h"
 #include "third_party/blink/renderer/core/html/html_anchor_element.h"
 #include "third_party/blink/renderer/core/html/html_html_element.h"
@@ -362,7 +363,8 @@ bool CSSDefaultStyleSheets::EnsureDefaultStyleSheetsForElement(
           FormControlsVerticalWritingModeSupportEnabled() &&
       !form_controls_not_vertical_style_sheet_ &&
       (IsA<HTMLProgressElement>(element) || IsA<HTMLMeterElement>(element) ||
-       IsA<HTMLInputElement>(element) || IsA<HTMLTextAreaElement>(element))) {
+       IsA<HTMLInputElement>(element) || IsA<HTMLTextAreaElement>(element) ||
+       IsA<HTMLButtonElement>(element))) {
     form_controls_not_vertical_style_sheet_ =
         ParseUASheet(UncompressResourceAsASCIIString(
             IDR_UASTYLE_FORM_CONTROLS_NOT_VERTICAL_CSS));

third_party/blink/renderer/core/css/form_controls_not_vertical.css

@@ -11,6 +11,6 @@
 
 /* TODO(crbug.com/681917): These form controls don't go vertical if
    FormControlsVerticalWritingModeSupport is disabled. */
-input[type="range"], input[type="color"], textarea, meter, progress {
+input[type="range"], input[type="color"],  input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], textarea, meter, progress, button:not(::-internal-selectmenu-button) {
   writing-mode: horizontal-tb !important;
 }

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

@@ -408,10 +408,7 @@ button {
 }
 
 /* Form controls don't go vertical. */
-input:not([type="range"]):not([type="color"]), select {
-    writing-mode: horizontal-tb !important;
-}
-button:not(::-internal-selectmenu-button) {
+input:not([type="range"]):not([type="color"]):not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="file"]), select {
     writing-mode: horizontal-tb !important;
 }
 
@@ -684,7 +681,8 @@ button {
     align-items: flex-start;
     text-align: center;
     cursor: default;
-    padding: 1px 6px;
+    padding-block: 1px;
+    padding-inline: 6px;
     border: 2px outset ButtonBorder;
     box-sizing: border-box;
     background-color: ButtonFace;

third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-item-compressible-002-expected.txt

@@ -1,68 +1,23 @@
 This is a testharness.js-based test.
 PASS .flexbox 1
 PASS .flexbox 2
-FAIL .flexbox 3 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="button" value="XXXXXXX" class="test1" data-expected-height="140">
-    </div>
-height expected 140 but got 100
-FAIL .flexbox 4 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="submit" value="XXXXXXX" class="test1" data-expected-height="140">
-    </div>
-height expected 140 but got 100
-FAIL .flexbox 5 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="reset" value="XXXXXXX" class="test1" data-expected-height="140">
-    </div>
-height expected 140 but got 100
+PASS .flexbox 3
+PASS .flexbox 4
+PASS .flexbox 5
 PASS .flexbox 6
 PASS .flexbox 7
-FAIL .flexbox 8 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="button" value="XXXXXXX" class="test2" data-expected-height="140">
-    </div>
-height expected 140 but got 100
-FAIL .flexbox 9 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="submit" value="XXXXXXX" class="test2" data-expected-height="140">
-    </div>
-height expected 140 but got 100
-FAIL .flexbox 10 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="reset" value="XXXXXXX" class="test2" data-expected-height="140">
-    </div>
-height expected 140 but got 100
+PASS .flexbox 8
+PASS .flexbox 9
+PASS .flexbox 10
 FAIL .flexbox 11 assert_equals: 
 <div class="flexbox">
       <div class="spacer"></div>
       <input type="text" class="test3" data-expected-height="140">
     </div>
 height expected 140 but got 100
 PASS .flexbox 12
-FAIL .flexbox 13 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="button" value="XXXXXXX" class="test3" data-expected-height="140">
-    </div>
-height expected 140 but got 100
-FAIL .flexbox 14 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="submit" value="XXXXXXX" class="test3" data-expected-height="140">
-    </div>
-height expected 140 but got 100
-FAIL .flexbox 15 assert_equals: 
-<div class="flexbox">
-      <div class="spacer"></div>
-      <input type="reset" value="XXXXXXX" class="test3" data-expected-height="140">
-    </div>
-height expected 140 but got 100
+PASS .flexbox 13
+PASS .flexbox 14
+PASS .flexbox 15
 Harness: the test ran to completion.
 

third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-item-compressible-002.html.ini

@@ -1,33 +1,3 @@
 [flex-item-compressible-002.html]
-  [.flexbox 10]
-    expected: FAIL
-
   [.flexbox 11]
     expected: FAIL
-
-  [.flexbox 12]
-    expected: FAIL
-
-  [.flexbox 13]
-    expected: FAIL
-
-  [.flexbox 14]
-    expected: FAIL
-
-  [.flexbox 15]
-    expected: FAIL
-
-  [.flexbox 3]
-    expected: FAIL
-
-  [.flexbox 4]
-    expected: FAIL
-
-  [.flexbox 5]
-    expected: FAIL
-
-  [.flexbox 8]
-    expected: FAIL
-
-  [.flexbox 9]
-    expected: FAIL

third_party/blink/web_tests/external/wpt/css/css-writing-modes/forms/button-appearance-native-horizontal.optional.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-none-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: horizontal-tb"></button>

third_party/blink/web_tests/external/wpt/css/css-writing-modes/forms/button-appearance-native-vertical.optional.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance native writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: vertical-rl"></button>

third_party/blink/web_tests/external/wpt/css/css-writing-modes/forms/button-appearance-none-horizontal.optional.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance none writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: horizontal-tb; appearance: none;"></button>

third_party/blink/web_tests/external/wpt/css/css-writing-modes/forms/button-appearance-none-vertical.optional.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-button-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Button appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="button-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="button-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="button-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The button element below should match the correct writing mode.</p>
+<button style="writing-mode: vertical-lr; appearance: none;"></button>