RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-14 09:34:59 +00:00
Code Issues Activity Actions

LibWeb: Support setting dimensions on input image buttons

Browse source 
Users are allowed to specify the height and width of an image button
directly in the HTML.
This commit is contained in:
Timothy Flynn 2024-02-19 07:31:47 -05:00 • committed by Andreas Kling
parent 3ea26327c7
commit 3f3db34587
4 changed files with 45 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

32
Tests/LibWeb/Layout/expected/input-image.txt
View file

@ -1,17 +1,31 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x120 children: not-inline
BlockContainer <form> at (8,8) content-size 784x120 children: inline
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 120x120] baseline: 120
BlockContainer <body> at (8,8) content-size 784x259 children: not-inline
BlockContainer <form> at (8,8) content-size 784x259 children: inline
frag 0 from ImageBox start: 0, length: 0, rect: [8,216 48x48] baseline: 48
frag 1 from TextNode start: 0, length: 1, rect: [56,250 8x17] baseline: 13.296875
" "
frag 2 from ImageBox start: 0, length: 0, rect: [64,200 64x64] baseline: 64
frag 3 from TextNode start: 0, length: 1, rect: [128,250 8x17] baseline: 13.296875
" "
frag 4 from ImageBox start: 0, length: 0, rect: [136,8 128x256] baseline: 256
TextNode <#text>
ImageBox <input> at (8,8) content-size 120x120 inline-block children: not-inline
ImageBox <input> at (8,216) content-size 48x48 inline-block children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,144) content-size 784x0 children: inline
ImageBox <input> at (64,200) content-size 64x64 inline-block children: not-inline
TextNode <#text>
ImageBox <input> at (136,8) content-size 128x256 inline-block children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,283) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x120] overflow: [8,8 784x136]
PaintableWithLines (BlockContainer<FORM>) [8,8 784x120]
ImagePaintable (ImageBox<INPUT>) [8,8 120x120]
PaintableWithLines (BlockContainer(anonymous)) [8,144 784x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x259] overflow: [8,8 784x275]
PaintableWithLines (BlockContainer<FORM>) [8,8 784x259]
ImagePaintable (ImageBox<INPUT>) [8,216 48x48]
TextPaintable (TextNode<#text>)
ImagePaintable (ImageBox<INPUT>) [64,200 64x64]
TextPaintable (TextNode<#text>)
ImagePaintable (ImageBox<INPUT>) [136,8 128x256]
PaintableWithLines (BlockContainer(anonymous)) [8,283 784x0]

2
Tests/LibWeb/Layout/input/input-image.html
View file

@ -1,3 +1,5 @@
<form>
<input type="image" src="120.png" alt="Image not found" width="48" height="48">
<input type="image" src="120.png" alt="Image not found" width="64" height="64">
<input type="image" src="120.png" alt="Image not found" width="128" height="256">
</form>

19
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -26,6 +26,7 @@
#include <LibWeb/HTML/HTMLFormElement.h>
#include <LibWeb/HTML/HTMLInputElement.h>
#include <LibWeb/HTML/Numbers.h>
#include <LibWeb/HTML/Parser/HTMLParser.h>
#include <LibWeb/HTML/Scripting/Environments.h>
#include <LibWeb/HTML/SharedImageRequest.h>
#include <LibWeb/HTML/Window.h>
@ -1311,6 +1312,24 @@ i32 HTMLInputElement::default_tab_index_value() const
return 0;
}
// https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image):the-input-element-11
void HTMLInputElement::apply_presentational_hints(CSS::StyleProperties& style) const
{
// The input element supports dimension attributes.
if (type_state() != TypeAttributeState::ImageButton)
return;
for_each_attribute([&](auto& name, auto& value) {
if (name == HTML::AttributeNames::width) {
if (auto parsed_value = parse_dimension_value(value))
style.set_property(CSS::PropertyID::Width, parsed_value.release_nonnull());
} else if (name == HTML::AttributeNames::height) {
if (auto parsed_value = parse_dimension_value(value))
style.set_property(CSS::PropertyID::Height, parsed_value.release_nonnull());
}
});
}
// https://html.spec.whatwg.org/multipage/input.html#the-size-attribute
unsigned HTMLInputElement::size() const
{

1
Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
View file

@ -194,6 +194,7 @@ private:
// ^DOM::Element
virtual i32 default_tab_index_value() const override;
virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
// ^Layout::ImageProvider
virtual bool is_image_available() const override;