Skip to content

GitLab

T
tangled
Commit 93ef4d0a authored by Kent Tamura's avatar Kent Tamura Committed by Commit Bot
Browse files
Options

Reland "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 skipping children blockify if the parent box is
input[type=file].
The original approach was wrong because it exposed adjusted 'display'
value via getComputedStyle().


Original change's description:
> 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/+/2371066
> Reviewed-by: Koji Ishii <kojii@chromium.org>
> Commit-Queue: Kent Tamura <tkent@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#801209}

Bug: 1119312
Change-Id: I1df3580882dff125d1860dab9754d6707d4eedc4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2371727
Auto-Submit: Kent Tamura <tkent@chromium.org>
Reviewed-by: default avatarYoshifumi Inoue <yosin@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801281}
parent b307f910
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 2 deletions
third_party/blink/renderer/core/css/resolver/style_adjuster.cc
View file @ 93ef4d0a
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
#include "third_party/blink/renderer/core/html/html_table_cell_element.h" #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/media/html_media_element.h"
#include "third_party/blink/renderer/core/html_names.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_object.h"
#include "third_party/blink/renderer/core/layout/layout_replaced.h" #include "third_party/blink/renderer/core/layout/layout_replaced.h"
#include "third_party/blink/renderer/core/layout/layout_theme.h" #include "third_party/blink/renderer/core/layout/layout_theme.h"
...@@ -102,6 +103,16 @@ void AdjustBackgroundForForcedColorsMode(StyleResolverState& state, ...@@ -102,6 +103,16 @@ void AdjustBackgroundForForcedColorsMode(StyleResolverState& state,
style.SetBackgroundColor(bg_color); style.SetBackgroundColor(bg_color);
} }
bool HostIsInputFile(const Element* element) {
if (!element || !element->IsInUserAgentShadowRoot())
return false;
if (const Element* shadow_host = element->OwnerShadowHost()) {
if (const auto* input = DynamicTo<HTMLInputElement>(shadow_host))
return input->type() == input_type_names::kFile;
}
return false;
}
} // namespace } // namespace
static EDisplay EquivalentBlockDisplay(EDisplay display) { static EDisplay EquivalentBlockDisplay(EDisplay display) {
...@@ -433,9 +444,10 @@ void StyleAdjuster::AdjustOverflow(ComputedStyle& style) { ...@@ -433,9 +444,10 @@ void StyleAdjuster::AdjustOverflow(ComputedStyle& style) {
static void AdjustStyleForDisplay(ComputedStyle& style, static void AdjustStyleForDisplay(ComputedStyle& style,
const ComputedStyle& layout_parent_style, const ComputedStyle& layout_parent_style,
const Element* element,
Document* document) { Document* document) {
// Blockify the children of flex, grid or LayoutCustom containers. // Blockify the children of flex, grid or LayoutCustom containers.
if (layout_parent_style.BlockifiesChildren()) { if (layout_parent_style.BlockifiesChildren() && !HostIsInputFile(element)) {
style.SetIsInBlockifyingDisplay(); style.SetIsInBlockifyingDisplay();
if (style.Display() != EDisplay::kContents) { if (style.Display() != EDisplay::kContents) {
style.SetDisplay(EquivalentBlockDisplay(style.Display())); style.SetDisplay(EquivalentBlockDisplay(style.Display()));
...@@ -637,7 +649,7 @@ void StyleAdjuster::AdjustComputedStyle(StyleResolverState& state, ...@@ -637,7 +649,7 @@ void StyleAdjuster::AdjustComputedStyle(StyleResolverState& state,
AdjustStyleForFirstLine(style); AdjustStyleForFirstLine(style);
AdjustStyleForMarker(style, parent_style, state.GetElement()); AdjustStyleForMarker(style, parent_style, state.GetElement());
AdjustStyleForDisplay(style, layout_parent_style, AdjustStyleForDisplay(style, layout_parent_style, element,
element ? &element->GetDocument() : nullptr); element ? &element->GetDocument() : nullptr);
// If this is a child of a LayoutNGCustom, we need the name of the parent // If this is a child of a LayoutNGCustom, we need the name of the parent
......
third_party/blink/web_tests/fast/forms/file/file-display-expected.html 0 → 100644
View file @ 93ef4d0a
<!DOCTYPE html>
<body>
<div>Flex <input type=file style="display:block">flex</div>
<div>Inline-flex <input type=file style="display:inline-block">inline-flex</div>
<div>Grid <input type=file style="display:block">grid</div>
<div>Inline-grid <input type=file style="display:inline-block">inline-grid</div>
<div>Table <input type=file style="display:block">table</div>
<div>Inline-table <input type=file style="display:inline-block">inline-table</div>
<div>Block <input type=file style="display:block">block</div>
<div>Inline <input type=file style="display:inline-block">inline</div>
</body>
third_party/blink/web_tests/fast/forms/file/file-display.html 0 → 100644
View file @ 93ef4d0a
<!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>
<script>
for (let input of document.querySelectorAll('input')) {
let text = document.createTextNode(getComputedStyle(input).display);
input.parentNode.insertBefore(text, input.nextSibling);
}
</script>
</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