2020-01-18 09:38:21 +01:00
|
|
|
/*
|
2022-03-09 23:53:41 +01:00
|
|
|
* Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
|
2020-01-18 09:38:21 +01:00
|
|
|
*
|
2021-04-22 01:24:48 -07:00
|
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
2020-01-18 09:38:21 +01:00
|
|
|
*/
|
|
|
|
|
2020-02-14 23:28:42 +01:00
|
|
|
#include <LibGfx/Bitmap.h>
|
2021-07-30 19:31:46 +01:00
|
|
|
#include <LibWeb/CSS/Parser/Parser.h>
|
2021-09-24 13:49:57 +02:00
|
|
|
#include <LibWeb/CSS/StyleComputer.h>
|
2020-03-07 10:32:51 +01:00
|
|
|
#include <LibWeb/DOM/Document.h>
|
2020-04-14 20:10:48 +02:00
|
|
|
#include <LibWeb/DOM/Event.h>
|
2020-11-21 19:15:57 +00:00
|
|
|
#include <LibWeb/HTML/EventNames.h>
|
2020-07-26 15:08:16 +02:00
|
|
|
#include <LibWeb/HTML/HTMLImageElement.h>
|
2022-03-26 14:29:52 +01:00
|
|
|
#include <LibWeb/HTML/Parser/HTMLParser.h>
|
2020-11-22 15:53:01 +01:00
|
|
|
#include <LibWeb/Layout/ImageBox.h>
|
2020-06-01 20:42:50 +02:00
|
|
|
#include <LibWeb/Loader/ResourceLoader.h>
|
2022-03-10 23:13:37 +01:00
|
|
|
#include <LibWeb/Painting/PaintableBox.h>
|
2019-10-05 22:07:45 +02:00
|
|
|
|
2020-07-28 18:20:36 +02:00
|
|
|
namespace Web::HTML {
|
2020-03-07 10:27:02 +01:00
|
|
|
|
2022-02-18 21:00:52 +01:00
|
|
|
HTMLImageElement::HTMLImageElement(DOM::Document& document, DOM::QualifiedName qualified_name)
|
2022-03-23 18:55:54 -04:00
|
|
|
: HTMLElement(document, move(qualified_name))
|
2021-04-14 10:39:12 -04:00
|
|
|
, m_image_loader(*this)
|
2019-10-05 22:07:45 +02:00
|
|
|
{
|
2020-06-13 22:22:54 +02:00
|
|
|
m_image_loader.on_load = [this] {
|
2021-10-18 10:37:26 +02:00
|
|
|
set_needs_style_update(true);
|
2022-03-16 23:12:18 +01:00
|
|
|
this->document().set_needs_layout();
|
2021-09-09 01:06:01 +02:00
|
|
|
queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
|
|
|
|
dispatch_event(DOM::Event::create(EventNames::load));
|
|
|
|
});
|
2020-06-13 22:22:54 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
m_image_loader.on_fail = [this] {
|
2021-01-09 14:02:45 +01:00
|
|
|
dbgln("HTMLImageElement: Resource did fail: {}", src());
|
2021-10-18 10:37:26 +02:00
|
|
|
set_needs_style_update(true);
|
2022-03-16 23:12:18 +01:00
|
|
|
this->document().set_needs_layout();
|
2021-09-09 01:06:01 +02:00
|
|
|
queue_an_element_task(HTML::Task::Source::DOMManipulation, [this] {
|
|
|
|
dispatch_event(DOM::Event::create(EventNames::error));
|
|
|
|
});
|
2020-06-13 22:22:54 +02:00
|
|
|
};
|
2020-06-14 19:26:25 +02:00
|
|
|
|
|
|
|
m_image_loader.on_animate = [this] {
|
|
|
|
if (layout_node())
|
|
|
|
layout_node()->set_needs_display();
|
|
|
|
};
|
2019-10-05 22:07:45 +02:00
|
|
|
}
|
|
|
|
|
2022-03-14 13:21:51 -06:00
|
|
|
HTMLImageElement::~HTMLImageElement() = default;
|
2019-10-05 23:20:35 +02:00
|
|
|
|
2020-07-26 20:01:35 +02:00
|
|
|
void HTMLImageElement::apply_presentational_hints(CSS::StyleProperties& style) const
|
2020-07-22 01:16:27 +02:00
|
|
|
{
|
|
|
|
for_each_attribute([&](auto& name, auto& value) {
|
|
|
|
if (name == HTML::AttributeNames::width) {
|
2022-03-26 11:39:33 +01:00
|
|
|
if (auto parsed_value = parse_dimension_value(value))
|
2020-07-22 01:16:27 +02:00
|
|
|
style.set_property(CSS::PropertyID::Width, parsed_value.release_nonnull());
|
|
|
|
} else if (name == HTML::AttributeNames::height) {
|
2022-03-26 11:39:33 +01:00
|
|
|
if (auto parsed_value = parse_dimension_value(value))
|
2020-07-22 01:16:27 +02:00
|
|
|
style.set_property(CSS::PropertyID::Height, parsed_value.release_nonnull());
|
2022-03-26 11:43:27 +01:00
|
|
|
} else if (name == HTML::AttributeNames::hspace) {
|
|
|
|
if (auto parsed_value = parse_dimension_value(value)) {
|
|
|
|
style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
|
|
|
|
style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
|
|
|
|
}
|
|
|
|
} else if (name == HTML::AttributeNames::vspace) {
|
|
|
|
if (auto parsed_value = parse_dimension_value(value)) {
|
|
|
|
style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
|
|
|
|
style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
|
|
|
|
}
|
2020-07-22 01:16:27 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-04-01 20:58:27 +03:00
|
|
|
void HTMLImageElement::parse_attribute(FlyString const& name, String const& value)
|
2019-10-06 23:03:51 +11:00
|
|
|
{
|
2020-06-04 16:04:52 +02:00
|
|
|
HTMLElement::parse_attribute(name, value);
|
2019-10-06 23:03:51 +11:00
|
|
|
|
2021-05-24 17:53:38 +02:00
|
|
|
if (name == HTML::AttributeNames::src && !value.is_empty())
|
2021-09-09 18:08:56 +02:00
|
|
|
m_image_loader.load(document().parse_url(value));
|
2020-06-02 20:27:26 +02:00
|
|
|
}
|
|
|
|
|
2022-02-05 13:17:01 +01:00
|
|
|
RefPtr<Layout::Node> HTMLImageElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
|
2019-10-05 23:20:35 +02:00
|
|
|
{
|
2022-04-11 00:38:23 +02:00
|
|
|
auto display = style->display();
|
|
|
|
auto layout_node = adopt_ref(*new Layout::ImageBox(document(), *this, move(style), m_image_loader));
|
|
|
|
if (display.is_block_outside())
|
|
|
|
layout_node->set_inline(false);
|
|
|
|
return layout_node;
|
2020-06-13 22:22:54 +02:00
|
|
|
}
|
|
|
|
|
2022-04-01 20:58:27 +03:00
|
|
|
Gfx::Bitmap const* HTMLImageElement::bitmap() const
|
2019-10-05 23:41:14 +02:00
|
|
|
{
|
2021-01-29 22:30:48 +01:00
|
|
|
return m_image_loader.bitmap(m_image_loader.current_frame_index());
|
2019-10-05 23:41:14 +02:00
|
|
|
}
|
2019-12-18 20:57:18 +01:00
|
|
|
|
2022-02-25 18:42:37 +01:00
|
|
|
// https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-width
|
|
|
|
unsigned HTMLImageElement::width() const
|
|
|
|
{
|
|
|
|
const_cast<DOM::Document&>(document()).update_layout();
|
|
|
|
|
|
|
|
// Return the rendered width of the image, in CSS pixels, if the image is being rendered.
|
2022-03-09 23:53:41 +01:00
|
|
|
if (auto* paint_box = this->paint_box())
|
|
|
|
return paint_box->content_width();
|
2022-02-25 18:42:37 +01:00
|
|
|
|
|
|
|
// ...or else the density-corrected intrinsic width and height of the image, in CSS pixels,
|
|
|
|
// if the image has intrinsic dimensions and is available but not being rendered.
|
|
|
|
if (m_image_loader.has_image())
|
|
|
|
return m_image_loader.width();
|
|
|
|
|
|
|
|
// ...or else 0, if the image is not available or does not have intrinsic dimensions.
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
void HTMLImageElement::set_width(unsigned width)
|
|
|
|
{
|
|
|
|
set_attribute(HTML::AttributeNames::width, String::number(width));
|
|
|
|
}
|
|
|
|
|
|
|
|
// https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-height
|
|
|
|
unsigned HTMLImageElement::height() const
|
|
|
|
{
|
|
|
|
const_cast<DOM::Document&>(document()).update_layout();
|
|
|
|
|
|
|
|
// Return the rendered height of the image, in CSS pixels, if the image is being rendered.
|
2022-03-09 23:53:41 +01:00
|
|
|
if (auto* paint_box = this->paint_box())
|
|
|
|
return paint_box->content_height();
|
2022-02-25 18:42:37 +01:00
|
|
|
|
|
|
|
// ...or else the density-corrected intrinsic height and height of the image, in CSS pixels,
|
|
|
|
// if the image has intrinsic dimensions and is available but not being rendered.
|
|
|
|
if (m_image_loader.has_image())
|
|
|
|
return m_image_loader.height();
|
|
|
|
|
|
|
|
// ...or else 0, if the image is not available or does not have intrinsic dimensions.
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
void HTMLImageElement::set_height(unsigned height)
|
|
|
|
{
|
|
|
|
set_attribute(HTML::AttributeNames::height, String::number(height));
|
|
|
|
}
|
|
|
|
|
2022-04-12 13:20:43 -03:00
|
|
|
// https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalwidth
|
|
|
|
unsigned HTMLImageElement::natural_width() const
|
|
|
|
{
|
|
|
|
// Return the density-corrected intrinsic width of the image, in CSS pixels,
|
|
|
|
// if the image has intrinsic dimensions and is available.
|
|
|
|
if (m_image_loader.has_image())
|
|
|
|
return m_image_loader.width();
|
|
|
|
|
|
|
|
// ...or else 0.
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
// https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-naturalheight
|
|
|
|
unsigned HTMLImageElement::natural_height() const
|
|
|
|
{
|
|
|
|
// Return the density-corrected intrinsic height of the image, in CSS pixels,
|
|
|
|
// if the image has intrinsic dimensions and is available.
|
|
|
|
if (m_image_loader.has_image())
|
|
|
|
return m_image_loader.height();
|
|
|
|
|
|
|
|
// ...or else 0.
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
2020-03-07 10:27:02 +01:00
|
|
|
}
|