<button> should support display:inline-grid/grid/inline-flex/flex correctly

If 'display' property value is one of 'inline-grid', 'grid',
'inline-flex', and 'flex', <button> doesn't use LayoutButton.

This behavior follows https://html.spec.whatwg.org/C/#button-layout .

Bug: 700029
Change-Id: I017734ad773eed6531e0dc665f80b99e8f14d1d7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2040796
Commit-Queue: Kent Tamura <tkent@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#739189}

third_party/blink/renderer/core/html/forms/html_button_element.cc

@@ -44,8 +44,15 @@ void HTMLButtonElement::setType(const AtomicString& type) {
   setAttribute(html_names::kTypeAttr, type);
 }
 
-LayoutObject* HTMLButtonElement::CreateLayoutObject(const ComputedStyle&,
-                                                    LegacyLayout) {
+LayoutObject* HTMLButtonElement::CreateLayoutObject(const ComputedStyle& style,
+                                                    LegacyLayout legacy) {
+  // https://html.spec.whatwg.org/C/#button-layout
+  EDisplay display = style.Display();
+  if (display == EDisplay::kInlineGrid || display == EDisplay::kGrid ||
+      display == EDisplay::kInlineFlex || display == EDisplay::kFlex ||
+      display == EDisplay::kInlineLayoutCustom ||
+      display == EDisplay::kLayoutCustom)
+    return HTMLFormControlElement::CreateLayoutObject(style, legacy);
   return new LayoutButton(this);
 }
 

third_party/blink/web_tests/external/wpt/html/rendering/widgets/button-layout/flex.html

@@ -6,10 +6,30 @@
 #inline-flex { display: inline-flex }
 #flex { display: flex }
 #ref > div { display: flex }
+
+#flexstart {
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
+  height: 3em;
+}
+
+#stretch {
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: stretch;
+  height: 3em;
+}
 </style>
 <button id=inline-flex><div>1</div><div>2</div><div>3</div><div>4</div></button>
 <button id=flex><div>1</div><div>2</div><div>3</div><div>4</div></button>
 <button id=ref><div><div>1</div><div>2</div><div>3</div><div>4</div></div></button>
+
+<div><button id="flexstart"><span id="flexstart-item">abc</span></button></div>
+
+<div><button id="stretch"><span id="stretch-item">abc</span></button></div>
 <script>
 const ref = document.getElementById('ref');
 const expectedWidth = ref.clientWidth;
@@ -26,4 +46,16 @@ for (const elm of [document.getElementById('inline-flex'),
     assert_equals(height, expectedHeight, 'clientHeight');
   }, elm.id);
 }
+
+// crbug.com/700029
+test(() => {
+  assert_equals(document.getElementById('flexstart').offsetTop,
+    document.getElementById('flexstart-item').offsetTop);
+}, 'align-items:flex-start should work');
+
+// crbug.com/1004163
+test(() => {
+  assert_equals(document.getElementById('stretch').offsetHeight,
+    document.getElementById('stretch-item').offsetHeight);
+}, 'align-items:stretch should work');
 </script>

third_party/blink/web_tests/platform/linux/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 26 but got 19
-FAIL grid assert_equals: clientWidth expected 26 but got 19
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac-mac10.10/external/wpt/css/css-grid/grid-model/grid-button-001-expected.txt

-This is a testharness.js-based test.
-FAIL [data-expected-width] 1 assert_equals: 
-<span class="item1" data-expected-width="100">item 1</span>
-width expected 100 but got 33
-FAIL [data-expected-width] 2 assert_equals: 
-<span class="item2" data-expected-width="200">item 2</span>
-width expected 200 but got 33
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac-mac10.10/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 26 but got 20
-FAIL grid assert_equals: clientWidth expected 26 but got 20
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac-mac10.11/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 28 but got 21
-FAIL grid assert_equals: clientWidth expected 28 but got 21
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac-mac10.12/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 28 but got 21
-FAIL grid assert_equals: clientWidth expected 28 but got 21
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac-retina/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 28 but got 21
-FAIL grid assert_equals: clientWidth expected 28 but got 21
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac/external/wpt/css/css-grid/grid-model/grid-button-001-expected.txt

-This is a testharness.js-based test.
-FAIL [data-expected-width] 1 assert_equals: 
-<span class="item1" data-expected-width="100">item 1</span>
-width expected 100 but got 35
-FAIL [data-expected-width] 2 assert_equals: 
-<span class="item2" data-expected-width="200">item 2</span>
-width expected 200 but got 35
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/mac/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 28 but got 21
-FAIL grid assert_equals: clientWidth expected 28 but got 21
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win/external/wpt/css/css-grid/grid-model/grid-button-001-expected.txt

-This is a testharness.js-based test.
-FAIL [data-expected-width] 1 assert_equals: 
-<span class="item1" data-expected-width="100">item 1</span>
-width expected 100 but got 38
-FAIL [data-expected-width] 2 assert_equals: 
-<span class="item2" data-expected-width="200">item 2</span>
-width expected 200 but got 38
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 26 but got 19
-FAIL grid assert_equals: clientWidth expected 26 but got 19
-Harness: the test ran to completion.
-

third_party/blink/web_tests/platform/win7/external/wpt/html/rendering/widgets/button-layout/grid-expected.txt

-This is a testharness.js-based test.
-FAIL inline-grid assert_equals: clientWidth expected 26 but got 19
-FAIL grid assert_equals: clientWidth expected 26 but got 19
-Harness: the test ran to completion.
-