Ladybird/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-10 18:10:56 +09:00
Code Activity

LibWeb: Begin implementing the HTMLInputElement 'image' type state

Browse source 
This implements enough to represent <input type=image> with its loaded
source image (or fallback to its alt text, if applicable). This does not
implement acquring coordinates from user-activated click events on the
image.
This commit is contained in:
Timothy Flynn 2024-02-18 21:12:14 -05:00 • committed by Andreas Kling
parent 45a47cb32b
commit debb5690ce
Notes: sideshowbarker 2024-07-16 23:34:44 +09:00
7 changed files with 214 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,17 @@
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
TextNode <#text>
ImageBox <input> at (8,8) content-size 120x120 inline-block children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,144) 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]

3
Tests/LibWeb/Layout/input/input-image.html Normal file
View file

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

2
Tests/LibWeb/Text/expected/input-image.txt Normal file
View file

@ -0,0 +1,2 @@
../../Layout/input/120.png loaded
file:///i-do-no-exist-i-swear.png failed

31
Tests/LibWeb/Text/input/input-image.html Normal file
View file

@ -0,0 +1,31 @@
<script src="./include.js"></script>
<script type="text/javascript">
const SOURCES = ["../../Layout/input/120.png", "file:///i-do-no-exist-i-swear.png"];
const runTest = source => {
let input = document.createElement("input");
input.type = "image";
input.alt = "submit";
return new Promise((resolve, reject) => {
input.addEventListener("load", () => {
resolve(`${input.src} loaded`);
});
input.addEventListener("error", () => {
resolve(`${input.src} failed`);
});
input.setAttribute("src", source);
});
};
asyncTest(done => {
let promises = SOURCES.map(source => runTest(source));
Promise.allSettled(promises)
.then(results => results.map(result => result.value))
.then(results => results.sort())
.then(results => results.forEach(println))
.finally(done);
});
</script>

6
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -26,7 +26,7 @@ label {
} }
/* FIXME: This is a temporary hack until we can render a native-looking frame for these. */ /* FIXME: This is a temporary hack until we can render a native-looking frame for these. */
input:not([type=submit], input[type=button], input[type=reset], input[type=color], input[type=checkbox], input[type=radio], input[type=range]), textarea { input:not([type=submit], input[type=button], input[type=image], input[type=reset], input[type=color], input[type=checkbox], input[type=radio], input[type=range]), textarea {
border: 1px solid ButtonBorder; border: 1px solid ButtonBorder;
min-height: 16px; min-height: 16px;
width: attr(size ch, 20ch); width: attr(size ch, 20ch);
@ -55,6 +55,10 @@ button, input[type=submit], input[type=button], input[type=reset], select {
cursor: default; cursor: default;
} }
input[type=image] {
cursor: pointer;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover { button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
/* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened /* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
* version of our light ButtonFace color. Once we support `color-scheme: dark` * version of our light ButtonFace color. Once we support `color-scheme: dark`

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

@ -17,20 +17,24 @@
#include <LibWeb/DOM/Event.h> #include <LibWeb/DOM/Event.h>
#include <LibWeb/DOM/IDLEventListener.h> #include <LibWeb/DOM/IDLEventListener.h>
#include <LibWeb/DOM/ShadowRoot.h> #include <LibWeb/DOM/ShadowRoot.h>
#include <LibWeb/Fetch/Infrastructure/HTTP/Requests.h>
#include <LibWeb/HTML/BrowsingContext.h> #include <LibWeb/HTML/BrowsingContext.h>
#include <LibWeb/HTML/Dates.h> #include <LibWeb/HTML/Dates.h>
#include <LibWeb/HTML/DecodedImageData.h>
#include <LibWeb/HTML/EventNames.h> #include <LibWeb/HTML/EventNames.h>
#include <LibWeb/HTML/HTMLDivElement.h> #include <LibWeb/HTML/HTMLDivElement.h>
#include <LibWeb/HTML/HTMLFormElement.h> #include <LibWeb/HTML/HTMLFormElement.h>
#include <LibWeb/HTML/HTMLInputElement.h> #include <LibWeb/HTML/HTMLInputElement.h>
#include <LibWeb/HTML/Numbers.h> #include <LibWeb/HTML/Numbers.h>
#include <LibWeb/HTML/Scripting/Environments.h> #include <LibWeb/HTML/Scripting/Environments.h>
#include <LibWeb/HTML/SharedImageRequest.h>
#include <LibWeb/HTML/Window.h> #include <LibWeb/HTML/Window.h>
#include <LibWeb/Infra/CharacterTypes.h> #include <LibWeb/Infra/CharacterTypes.h>
#include <LibWeb/Infra/Strings.h> #include <LibWeb/Infra/Strings.h>
#include <LibWeb/Layout/BlockContainer.h> #include <LibWeb/Layout/BlockContainer.h>
#include <LibWeb/Layout/ButtonBox.h> #include <LibWeb/Layout/ButtonBox.h>
#include <LibWeb/Layout/CheckBox.h> #include <LibWeb/Layout/CheckBox.h>
#include <LibWeb/Layout/ImageBox.h>
#include <LibWeb/Layout/RadioButton.h> #include <LibWeb/Layout/RadioButton.h>
#include <LibWeb/Namespace.h> #include <LibWeb/Namespace.h>
#include <LibWeb/Page/Page.h> #include <LibWeb/Page/Page.h>
@ -66,6 +70,7 @@ void HTMLInputElement::visit_edges(Cell::Visitor& visitor)
visitor.visit(m_legacy_pre_activation_behavior_checked_element_in_group); visitor.visit(m_legacy_pre_activation_behavior_checked_element_in_group);
visitor.visit(m_selected_files); visitor.visit(m_selected_files);
visitor.visit(m_slider_thumb); visitor.visit(m_slider_thumb);
visitor.visit(m_image_request);
} }
JS::GCPtr<Layout::Node> HTMLInputElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style) JS::GCPtr<Layout::Node> HTMLInputElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
@ -76,6 +81,9 @@ JS::GCPtr<Layout::Node> HTMLInputElement::create_layout_node(NonnullRefPtr<CSS::
if (type_state() == TypeAttributeState::SubmitButton || type_state() == TypeAttributeState::Button || type_state() == TypeAttributeState::ResetButton || type_state() == TypeAttributeState::FileUpload) if (type_state() == TypeAttributeState::SubmitButton || type_state() == TypeAttributeState::Button || type_state() == TypeAttributeState::ResetButton || type_state() == TypeAttributeState::FileUpload)
return heap().allocate_without_realm<Layout::ButtonBox>(document(), *this, move(style)); return heap().allocate_without_realm<Layout::ButtonBox>(document(), *this, move(style));
if (type_state() == TypeAttributeState::ImageButton)
return heap().allocate_without_realm<Layout::ImageBox>(document(), *this, move(style), *this);
if (type_state() == TypeAttributeState::Checkbox) if (type_state() == TypeAttributeState::Checkbox)
return heap().allocate_without_realm<Layout::CheckBox>(document(), *this, move(style)); return heap().allocate_without_realm<Layout::CheckBox>(document(), *this, move(style));
@ -285,6 +293,23 @@ WebIDL::ExceptionOr<void> HTMLInputElement::run_input_activation_behavior(DOM::E
} else if (type_state() == TypeAttributeState::FileUpload || type_state() == TypeAttributeState::Color) { } else if (type_state() == TypeAttributeState::FileUpload || type_state() == TypeAttributeState::Color) {
show_the_picker_if_applicable(*this); show_the_picker_if_applicable(*this);
} }
// https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image):input-activation-behavior
else if (type_state() == TypeAttributeState::ImageButton) {
// 1. If the element does not have a form owner, then return.
auto* form = this->form();
if (!form)
return {};
// 2. If the element's node document is not fully active, then return.
if (!document().is_fully_active())
return {};
// FIXME: 3. If the user activated the control while explicitly selecting a coordinate, then set the element's selected
// coordinate to that coordinate.
// 4. Submit the element's form owner from the element with userInvolvement set to event's user navigation involvement.
TRY(form->submit_form(*this, { .user_involvement = user_navigation_involvement(event) }));
}
return {}; return {};
} }
@ -869,9 +894,77 @@ void HTMLInputElement::form_associated_element_attribute_changed(FlyString const
m_placeholder_text_node->set_data(placeholder()); m_placeholder_text_node->set_data(placeholder());
} else if (name == HTML::AttributeNames::readonly) { } else if (name == HTML::AttributeNames::readonly) {
handle_readonly_attribute(value); handle_readonly_attribute(value);
} else if (name == HTML::AttributeNames::src) {
handle_src_attribute(value.value_or({})).release_value_but_fixme_should_propagate_errors();
} else if (name == HTML::AttributeNames::alt) {
if (layout_node() && type_state() == TypeAttributeState::ImageButton)
did_update_alt_text(verify_cast<Layout::ImageBox>(*layout_node()));
} }
} }
// https://html.spec.whatwg.org/multipage/input.html#attr-input-src
WebIDL::ExceptionOr<void> HTMLInputElement::handle_src_attribute(StringView value)
{
auto& realm = this->realm();
auto& vm = realm.vm();
if (type_state() != TypeAttributeState::ImageButton)
return {};
// 1. Let url be the result of encoding-parsing a URL given the src attribute's value, relative to the element's
// node document.
auto url = document().parse_url(value);
// 2. If url is failure, then return.
if (!url.is_valid())
return {};
// 3. Let request be a new request whose URL is url, client is the element's node document's relevant settings
// object, destination is "image", initiator type is "input", credentials mode is "include", and whose
// use-URL-credentials flag is set.
auto request = Fetch::Infrastructure::Request::create(vm);
request->set_url(move(url));
request->set_client(&document().relevant_settings_object());
request->set_destination(Fetch::Infrastructure::Request::Destination::Image);
request->set_initiator_type(Fetch::Infrastructure::Request::InitiatorType::Input);
request->set_credentials_mode(Fetch::Infrastructure::Request::CredentialsMode::Include);
request->set_use_url_credentials(true);
// 4. Fetch request, with processResponseEndOfBody set to the following step given response response:
m_image_request = SharedImageRequest::get_or_create(realm, document().page(), request->url());
m_image_request->add_callbacks(
[this, &realm]() {
// 1. If the download was successful and the image is available, queue an element task on the user interaction
// task source given the input element to fire an event named load at the input element.
queue_an_element_task(HTML::Task::Source::UserInteraction, [this, &realm]() {
dispatch_event(DOM::Event::create(realm, HTML::EventNames::load));
});
m_load_event_delayer.clear();
document().invalidate_layout();
},
[this, &realm]() {
// 2. Otherwise, if the fetching process fails without a response from the remote server, or completes but the
// image is not a valid or supported image, then queue an element task on the user interaction task source
// given the input element to fire an event named error on the input element.
queue_an_element_task(HTML::Task::Source::UserInteraction, [this, &realm]() {
dispatch_event(DOM::Event::create(realm, HTML::EventNames::error));
});
m_load_event_delayer.clear();
});
if (m_image_request->needs_fetching()) {
m_image_request->fetch_image(realm, request);
}
// Fetching the image must delay the load event of the element's node document until the task that is queued by the
// networking task source once the resource has been fetched (defined below) has been run.
m_load_event_delayer.emplace(document());
return {};
}
HTMLInputElement::TypeAttributeState HTMLInputElement::parse_type_attribute(StringView type) HTMLInputElement::TypeAttributeState HTMLInputElement::parse_type_attribute(StringView type)
{ {
#define __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE(keyword, state) \ #define __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE(keyword, state) \
@ -1161,6 +1254,51 @@ void HTMLInputElement::legacy_cancelled_activation_behavior_was_not_called()
m_legacy_pre_activation_behavior_checked_element_in_group = nullptr; m_legacy_pre_activation_behavior_checked_element_in_group = nullptr;
} }
JS::GCPtr<DecodedImageData> HTMLInputElement::image_data() const
{
if (m_image_request)
return m_image_request->image_data();
return nullptr;
}
bool HTMLInputElement::is_image_available() const
{
return image_data() != nullptr;
}
Optional<CSSPixels> HTMLInputElement::intrinsic_width() const
{
if (auto image_data = this->image_data())
return image_data->intrinsic_width();
return {};
}
Optional<CSSPixels> HTMLInputElement::intrinsic_height() const
{
if (auto image_data = this->image_data())
return image_data->intrinsic_height();
return {};
}
Optional<CSSPixelFraction> HTMLInputElement::intrinsic_aspect_ratio() const
{
if (auto image_data = this->image_data())
return image_data->intrinsic_aspect_ratio();
return {};
}
RefPtr<Gfx::ImmutableBitmap> HTMLInputElement::current_image_bitmap(Gfx::IntSize size) const
{
if (auto image_data = this->image_data())
return image_data->bitmap(0, size);
return nullptr;
}
void HTMLInputElement::set_visible_in_viewport(bool)
{
// FIXME: Loosen grip on image data when it's not visible, e.g via volatile memory.
}
// https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex // https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex
i32 HTMLInputElement::default_tab_index_value() const i32 HTMLInputElement::default_tab_index_value() const
{ {

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

@ -8,10 +8,12 @@
#pragma once #pragma once
#include <LibWeb/DOM/DocumentLoadEventDelayer.h>
#include <LibWeb/DOM/Text.h> #include <LibWeb/DOM/Text.h>
#include <LibWeb/FileAPI/FileList.h> #include <LibWeb/FileAPI/FileList.h>
#include <LibWeb/HTML/FormAssociatedElement.h> #include <LibWeb/HTML/FormAssociatedElement.h>
#include <LibWeb/HTML/HTMLElement.h> #include <LibWeb/HTML/HTMLElement.h>
#include <LibWeb/Layout/ImageProvider.h>
#include <LibWeb/WebIDL/DOMException.h> #include <LibWeb/WebIDL/DOMException.h>
namespace Web::HTML { namespace Web::HTML {
@ -44,7 +46,8 @@ namespace Web::HTML {
class HTMLInputElement final class HTMLInputElement final
: public HTMLElement : public HTMLElement
, public FormAssociatedElement , public FormAssociatedElement
, public DOM::EditableTextNodeOwner { , public DOM::EditableTextNodeOwner
, public Layout::ImageProvider {
WEB_PLATFORM_OBJECT(HTMLInputElement, HTMLElement); WEB_PLATFORM_OBJECT(HTMLInputElement, HTMLElement);
JS_DECLARE_ALLOCATOR(HTMLInputElement); JS_DECLARE_ALLOCATOR(HTMLInputElement);
FORM_ASSOCIATED_ELEMENT(HTMLElement, HTMLInputElement) FORM_ASSOCIATED_ELEMENT(HTMLElement, HTMLInputElement)
@ -186,6 +189,14 @@ private:
// ^DOM::Element // ^DOM::Element
virtual i32 default_tab_index_value() const override; virtual i32 default_tab_index_value() const override;
// ^Layout::ImageProvider
virtual bool is_image_available() const override;
virtual Optional<CSSPixels> intrinsic_width() const override;
virtual Optional<CSSPixels> intrinsic_height() const override;
virtual Optional<CSSPixelFraction> intrinsic_aspect_ratio() const override;
virtual RefPtr<Gfx::ImmutableBitmap> current_image_bitmap(Gfx::IntSize = {}) const override;
virtual void set_visible_in_viewport(bool) override;
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
virtual void visit_edges(Cell::Visitor&) override; virtual void visit_edges(Cell::Visitor&) override;
@ -212,6 +223,7 @@ private:
void set_checked_within_group(); void set_checked_within_group();
void handle_readonly_attribute(Optional<String> const& value); void handle_readonly_attribute(Optional<String> const& value);
WebIDL::ExceptionOr<void> handle_src_attribute(StringView value);
// https://html.spec.whatwg.org/multipage/input.html#value-sanitization-algorithm // https://html.spec.whatwg.org/multipage/input.html#value-sanitization-algorithm
String value_sanitization_algorithm(String const&) const; String value_sanitization_algorithm(String const&) const;
@ -238,6 +250,11 @@ private:
void update_slider_thumb_element(); void update_slider_thumb_element();
JS::GCPtr<DOM::Element> m_slider_thumb; JS::GCPtr<DOM::Element> m_slider_thumb;
JS::GCPtr<DecodedImageData> image_data() const;
JS::GCPtr<SharedImageRequest> m_image_request;
Optional<DOM::DocumentLoadEventDelayer> m_load_event_delayer;
// https://html.spec.whatwg.org/multipage/input.html#dom-input-indeterminate // https://html.spec.whatwg.org/multipage/input.html#dom-input-indeterminate
bool m_indeterminate { false }; bool m_indeterminate { false };