Commit d04cef4c authored by Kent Tamura's avatar Kent Tamura Committed by Commit Bot

input[type=file]: display:inline-flex/flex/inline-grid/grid should not affect the internal layout

In LayoutNG, we use LayoutNGBlockFlow for input[type=file]. If
flex/grid is specified, NGBlockLayoutAlgorithm is applied but children
are blockified. So the internal [Choose File] button and
"No file chosen" text were placed on different lines.

This CL fixes it by adding "display" adjustment code.

Bug: 1119312
Change-Id: Id15bfa5a047f56ee00adb43d74e6b3d09f1f6433
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2371066Reviewed-by: default avatarKoji Ishii <kojii@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801209}
parent 8d0ea12d
......@@ -50,6 +50,7 @@
#include "third_party/blink/renderer/core/html/html_table_cell_element.h"
#include "third_party/blink/renderer/core/html/media/html_media_element.h"
#include "third_party/blink/renderer/core/html_names.h"
#include "third_party/blink/renderer/core/input_type_names.h"
#include "third_party/blink/renderer/core/layout/layout_object.h"
#include "third_party/blink/renderer/core/layout/layout_replaced.h"
#include "third_party/blink/renderer/core/layout/layout_theme.h"
......@@ -349,6 +350,17 @@ static void AdjustStyleForHTMLElement(ComputedStyle& style,
return;
}
if (const auto* input = DynamicTo<HTMLInputElement>(element)) {
if (input->type() == input_type_names::kFile) {
if (style.Display() == EDisplay::kFlex ||
style.Display() == EDisplay::kGrid)
style.SetDisplay(EDisplay::kBlock);
else if (style.Display() == EDisplay::kInlineFlex ||
style.Display() == EDisplay::kInlineGrid)
style.SetDisplay(EDisplay::kInlineBlock);
}
}
if (IsA<HTMLTextAreaElement>(element)) {
// Textarea considers overflow visible as auto.
style.SetOverflowX(style.OverflowX() == EOverflow::kVisible
......
<!DOCTYPE html>
<body>
<div>Flex <input type=file style="display:block"></div>
<div>Inline-flex <input type=file style="display:inline-block"></div>
<div>Grid <input type=file style="display:block"></div>
<div>Inline-grid <input type=file style="display:inline-block"></div>
<div>Table <input type=file style="display:block"></div>
<div>Inline-table <input type=file style="display:inline-block"></div>
<div>Block <input type=file style="display:block"></div>
<div>Inline <input type=file style="display:inline-block"></div>
</body>
<!DOCTYPE html>
<body>
<!-- crbug.com/1119312. Only block/inline diffrence should be applied. -->
<div>Flex <input type=file style="display:flex"></div>
<div>Inline-flex <input type=file style="display:inline-flex"></div>
<div>Grid <input type=file style="display:grid"></div>
<div>Inline-grid <input type=file style="display:inline-grid"></div>
<div>Table <input type=file style="display:table"></div>
<div>Inline-table <input type=file style="display:inline-table"></div>
<div>Block <input type=file style="display:block"></div>
<div>Inline <input type=file style="display:inline"></div>
</body>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment