Skip to content

GitLab

T
tangled
Commit c0c6eb86 authored by Yu Han's avatar Yu Han Committed by Commit Bot
Browse files
Options

Fixes input image type fallback content to respect display property. 

Prior to this CL, image input type will always use a Block layout when
the image src can't be loaded. This prevents web developers from
changing the layout via CSS display property.

This CL fixes the issue by creating a Layout object based on the CSS
computed styles. Web developers can change image's fallback text layout
via CSS display property. If none is passed in, it defaults to
inline-block, which is the default layout of the input image type.

Spec:
https://html.spec.whatwg.org/multipage/rendering.html#images-3:represents-5

Bug: 948066
Change-Id: I907432485472c472608b9d84d36fa2df29412f7c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2212963Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Yu Han <yuzhehan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779108}
parent 11bb3592
Hide whitespace changes
Inline Side-by-side
Showing with 43 additions and 2 deletions
third_party/blink/renderer/core/html/forms/image_input_type.cc
View file @ c0c6eb86
......@@ -38,7 +38,7 @@
#include "third_party/blink/renderer/core/layout/adjust_for_absolute_zoom.h"
#include "third_party/blink/renderer/core/layout/layout_block_flow.h"
#include "third_party/blink/renderer/core/layout/layout_image.h"
#include "third_party/blink/renderer/core/layout/layout_object_factory.h"
#include "third_party/blink/renderer/core/layout/layout_object.h"
#include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
namespace blink {
......@@ -111,7 +111,7 @@ bool ImageInputType::TypeShouldForceLegacyLayout() const {
LayoutObject* ImageInputType::CreateLayoutObject(const ComputedStyle& style,
LegacyLayout legacy) const {
if (use_fallback_content_)
return LayoutObjectFactory::CreateBlockFlow(GetElement(), style, legacy);
return LayoutObject::CreateObject(&GetElement(), style, legacy);
LayoutImage* image = new LayoutImage(&GetElement());
image->SetImageResource(MakeGarbageCollected<LayoutImageResource>());
return image;
......
third_party/blink/web_tests/external/wpt/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/input-image-inline-alt-ref.html 0 → 100644
View file @ c0c6eb86
<!DOCTYPE html>
<title>Input image type fallback content should respect display property.</title>
<meta name="author" title="Yu Han" href="mailto:yuzhehan@chromium.org">
<style>
div {
border:1px dashed blue;
line-height: 1em;
height: 100px;
width: 150px;
}
input {
font: 1em monospace;
line-height: 1em;
}
</style>
<div>
<input alt="This is a long ALT text which takes up few lines to display. And additional text to be inlined." type="image">
</div>
third_party/blink/web_tests/external/wpt/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/input-image-inline-alt.html 0 → 100644
View file @ c0c6eb86
<!DOCTYPE html>
<title>Input image type fallback content should respect display property.</title>
<meta name="author" title="Yu Han" href="mailto:yuzhehan@chromium.org">
<link rel="match" href="input-image-inline-alt-ref.html">
<link ref="help" href="https://html.spec.whatwg.org/multipage/rendering.html#images-3:represents-5">
<style>
div {
border:1px dashed blue;
font: 1em monospace;
line-height: 1em;
height: 100px;
width: 150px;
}
input {
display: inline;
font: 1em monospace;
line-height: 1em;
}
</style>
<div>
<input alt="This is a long ALT text which takes up few lines to display." type="image">
And additional text to be inlined.
</div>
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