mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-06 16:19:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb/SVG: Implement SVGImageElement

Browse source 
This element allows images to be embedded within SVGs.
This commit is contained in:
Tim Ledbetter 2024-08-20 15:12:55 +01:00 • committed by Andreas Kling
commit 03bbc2b111
Notes: github-actions[bot] 2024-08-29 04:29:33 +00:00
17 changed files with 490 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
Tests/LibWeb/Ref/assets/rectangle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 B

47
Tests/LibWeb/Ref/reference/svg-image-positioning-ref.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect width="150" height="100" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect width="150" height="100" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect width="150" height="100" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect width="150" height="100" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect width="250" height="166" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect width="300" height="250" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect x="50" width="150" height="100" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect y="50" width="150" height="100" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect x="50" y="50" width="150" height="100" fill="green" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<rect x="-50" y="-50" width="150" height="100" fill="green" />
</svg>

50
Tests/LibWeb/Ref/svg-image-positioning.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<link rel="match" href="reference/svg-image-positioning-ref.html" />
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" width="150" height="100" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" width="0" height="100" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" width="150" height="0" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" height="100" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" width="150" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" width="250" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" height="250" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" x="50" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" y="50" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" x="50" y="50" />
</svg>
<svg width="300" height="300">
<rect x="0" y="0" width="250" height="250" fill="red" />
<image href="assets/rectangle.png" x="-50" y="-50" />
</svg>

1
Tests/LibWeb/Text/expected/all-window-properties.txt
View file

@ -287,6 +287,7 @@ SVGGElement
SVGGeometryElement SVGGeometryElement
SVGGradientElement SVGGradientElement
SVGGraphicsElement SVGGraphicsElement
SVGImageElement
SVGLength SVGLength
SVGLineElement SVGLineElement
SVGLinearGradientElement SVGLinearGradientElement

2
Userland/Libraries/LibWeb/CMakeLists.txt
View file

@ -525,6 +525,7 @@ set(SOURCES
Layout/SVGForeignObjectBox.cpp Layout/SVGForeignObjectBox.cpp
Layout/SVGGeometryBox.cpp Layout/SVGGeometryBox.cpp
Layout/SVGGraphicsBox.cpp Layout/SVGGraphicsBox.cpp
Layout/SVGImageBox.cpp
Layout/SVGSVGBox.cpp Layout/SVGSVGBox.cpp
Layout/SVGMaskBox.cpp Layout/SVGMaskBox.cpp
Layout/SVGClipBox.cpp Layout/SVGClipBox.cpp
@ -659,6 +660,7 @@ set(SOURCES
SVG/SVGGeometryElement.cpp SVG/SVGGeometryElement.cpp
SVG/SVGGraphicsElement.cpp SVG/SVGGraphicsElement.cpp
SVG/SVGGradientElement.cpp SVG/SVGGradientElement.cpp
SVG/SVGImageElement.cpp
SVG/SVGPathElement.cpp SVG/SVGPathElement.cpp
SVG/SVGCircleElement.cpp SVG/SVGCircleElement.cpp
SVG/SVGEllipseElement.cpp SVG/SVGEllipseElement.cpp

3
Userland/Libraries/LibWeb/DOM/ElementFactory.cpp
View file

@ -92,6 +92,7 @@
#include <LibWeb/SVG/SVGEllipseElement.h> #include <LibWeb/SVG/SVGEllipseElement.h>
#include <LibWeb/SVG/SVGForeignObjectElement.h> #include <LibWeb/SVG/SVGForeignObjectElement.h>
#include <LibWeb/SVG/SVGGElement.h> #include <LibWeb/SVG/SVGGElement.h>
#include <LibWeb/SVG/SVGImageElement.h>
#include <LibWeb/SVG/SVGLineElement.h> #include <LibWeb/SVG/SVGLineElement.h>
#include <LibWeb/SVG/SVGLinearGradientElement.h> #include <LibWeb/SVG/SVGLinearGradientElement.h>
#include <LibWeb/SVG/SVGMaskElement.h> #include <LibWeb/SVG/SVGMaskElement.h>
@ -488,6 +489,8 @@ static JS::GCPtr<SVG::SVGElement> create_svg_element(JS::Realm& realm, Document&
return realm.heap().allocate<SVG::SVGScriptElement>(realm, document, move(qualified_name)); return realm.heap().allocate<SVG::SVGScriptElement>(realm, document, move(qualified_name));
if (local_name == SVG::TagNames::a) if (local_name == SVG::TagNames::a)
return realm.heap().allocate<SVG::SVGAElement>(realm, document, move(qualified_name)); return realm.heap().allocate<SVG::SVGAElement>(realm, document, move(qualified_name));
if (local_name == SVG::TagNames::image)
return realm.heap().allocate<SVG::SVGImageElement>(realm, document, move(qualified_name));
return nullptr; return nullptr;
} }

16
Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp
View file

@ -16,11 +16,13 @@
#include <LibWeb/Layout/SVGClipBox.h> #include <LibWeb/Layout/SVGClipBox.h>
#include <LibWeb/Layout/SVGFormattingContext.h> #include <LibWeb/Layout/SVGFormattingContext.h>
#include <LibWeb/Layout/SVGGeometryBox.h> #include <LibWeb/Layout/SVGGeometryBox.h>
#include <LibWeb/Layout/SVGImageBox.h>
#include <LibWeb/Layout/SVGMaskBox.h> #include <LibWeb/Layout/SVGMaskBox.h>
#include <LibWeb/SVG/SVGAElement.h> #include <LibWeb/SVG/SVGAElement.h>
#include <LibWeb/SVG/SVGClipPathElement.h> #include <LibWeb/SVG/SVGClipPathElement.h>
#include <LibWeb/SVG/SVGForeignObjectElement.h> #include <LibWeb/SVG/SVGForeignObjectElement.h>
#include <LibWeb/SVG/SVGGElement.h> #include <LibWeb/SVG/SVGGElement.h>
#include <LibWeb/SVG/SVGImageElement.h>
#include <LibWeb/SVG/SVGMaskElement.h> #include <LibWeb/SVG/SVGMaskElement.h>
#include <LibWeb/SVG/SVGSVGElement.h> #include <LibWeb/SVG/SVGSVGElement.h>
#include <LibWeb/SVG/SVGSymbolElement.h> #include <LibWeb/SVG/SVGSymbolElement.h>
@ -405,6 +407,8 @@ void SVGFormattingContext::layout_graphics_element(SVGGraphicsBox const& graphic
// 5.2. Grouping: the ‘g’ element // 5.2. Grouping: the ‘g’ element
// The ‘g’ element is a container element for grouping together related graphics elements. // The ‘g’ element is a container element for grouping together related graphics elements.
layout_container_element(graphics_box); layout_container_element(graphics_box);
} else if (is<SVGImageBox>(graphics_box)) {
layout_image_element(static_cast<SVGImageBox const&>(graphics_box));
} else { } else {
// Assume this is a path-like element. // Assume this is a path-like element.
layout_path_like_element(graphics_box); layout_path_like_element(graphics_box);
@ -417,6 +421,18 @@ void SVGFormattingContext::layout_graphics_element(SVGGraphicsBox const& graphic
layout_mask_or_clip(*clip_box); layout_mask_or_clip(*clip_box);
} }
void SVGFormattingContext::layout_image_element(SVGImageBox const& image_box)
{
auto& box_state = m_state.get_mutable(image_box);
auto bounding_box = image_box.dom_node().bounding_box();
box_state.set_content_x(bounding_box.x());
box_state.set_content_y(bounding_box.y());
box_state.set_content_width(bounding_box.width());
box_state.set_content_height(bounding_box.height());
box_state.set_has_definite_width(true);
box_state.set_has_definite_height(true);
}
void SVGFormattingContext::layout_mask_or_clip(SVGBox const& mask_or_clip) void SVGFormattingContext::layout_mask_or_clip(SVGBox const& mask_or_clip)
{ {
SVG::SVGUnits content_units {}; SVG::SVGUnits content_units {};

2
Userland/Libraries/LibWeb/Layout/SVGFormattingContext.h
View file

@ -9,6 +9,7 @@
#include <LibGfx/DeprecatedPath.h> #include <LibGfx/DeprecatedPath.h>
#include <LibWeb/Forward.h> #include <LibWeb/Forward.h>
#include <LibWeb/Layout/FormattingContext.h> #include <LibWeb/Layout/FormattingContext.h>
#include <LibWeb/Layout/SVGImageBox.h>
#include <LibWeb/Layout/SVGSVGBox.h> #include <LibWeb/Layout/SVGSVGBox.h>
#include <LibWeb/Layout/SVGTextBox.h> #include <LibWeb/Layout/SVGTextBox.h>
#include <LibWeb/Layout/SVGTextPathBox.h> #include <LibWeb/Layout/SVGTextPathBox.h>
@ -31,6 +32,7 @@ private:
void layout_graphics_element(SVGGraphicsBox const&); void layout_graphics_element(SVGGraphicsBox const&);
void layout_path_like_element(SVGGraphicsBox const&); void layout_path_like_element(SVGGraphicsBox const&);
void layout_mask_or_clip(SVGBox const&); void layout_mask_or_clip(SVGBox const&);
void layout_image_element(SVGImageBox const& image_box);
[[nodiscard]] Gfx::Path compute_path_for_text(SVGTextBox const&); [[nodiscard]] Gfx::Path compute_path_for_text(SVGTextBox const&);
[[nodiscard]] Gfx::Path compute_path_for_text_path(SVGTextPathBox const&); [[nodiscard]] Gfx::Path compute_path_for_text_path(SVGTextPathBox const&);

24
Userland/Libraries/LibWeb/Layout/SVGImageBox.cpp Normal file
View file

@ -0,0 +1,24 @@
/*
* Copyright (c) 2024, Tim Ledbetter <tim.ledbetter@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/Layout/SVGImageBox.h>
#include <LibWeb/Painting/ImagePaintable.h>
#include <LibWeb/Painting/SVGGraphicsPaintable.h>
#include <LibWeb/Painting/StackingContext.h>
namespace Web::Layout {
SVGImageBox::SVGImageBox(DOM::Document& document, SVG::SVGGraphicsElement& element, NonnullRefPtr<CSS::StyleProperties> properties)
: SVGGraphicsBox(document, element, properties)
{
}
JS::GCPtr<Painting::Paintable> SVGImageBox::create_paintable() const
{
return Painting::ImagePaintable::create(*this);
}
}

28
Userland/Libraries/LibWeb/Layout/SVGImageBox.h Normal file
View file

@ -0,0 +1,28 @@
/*
* Copyright (c) 2024, Tim Ledbetter <tim.ledbetter@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibJS/Heap/GCPtr.h>
#include <LibWeb/Layout/SVGGraphicsBox.h>
#include <LibWeb/SVG/SVGImageElement.h>
namespace Web::Layout {
class SVGImageBox : public SVGGraphicsBox {
JS_CELL(SVGImageBox, SVGGraphicsBox);
public:
SVGImageBox(DOM::Document&, SVG::SVGGraphicsElement&, NonnullRefPtr<CSS::StyleProperties>);
virtual ~SVGImageBox() override = default;
SVG::SVGImageElement& dom_node() { return static_cast<SVG::SVGImageElement&>(SVGGraphicsBox::dom_node()); }
SVG::SVGImageElement const& dom_node() const { return static_cast<SVG::SVGImageElement const&>(SVGGraphicsBox::dom_node()); }
virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
};
}

18
Userland/Libraries/LibWeb/Painting/ImagePaintable.cpp
View file

@ -10,7 +10,6 @@
#include <LibWeb/HTML/DecodedImageData.h> #include <LibWeb/HTML/DecodedImageData.h>
#include <LibWeb/HTML/HTMLImageElement.h> #include <LibWeb/HTML/HTMLImageElement.h>
#include <LibWeb/HTML/ImageRequest.h> #include <LibWeb/HTML/ImageRequest.h>
#include <LibWeb/Layout/ImageBox.h>
#include <LibWeb/Painting/BorderRadiusCornerClipper.h> #include <LibWeb/Painting/BorderRadiusCornerClipper.h>
#include <LibWeb/Painting/ImagePaintable.h> #include <LibWeb/Painting/ImagePaintable.h>
#include <LibWeb/Platform/FontPlugin.h> #include <LibWeb/Platform/FontPlugin.h>
@ -19,17 +18,23 @@ namespace Web::Painting {
JS_DEFINE_ALLOCATOR(ImagePaintable); JS_DEFINE_ALLOCATOR(ImagePaintable);
JS::NonnullGCPtr<ImagePaintable> ImagePaintable::create(Layout::SVGImageBox const& layout_box)
{
return layout_box.heap().allocate_without_realm<ImagePaintable>(layout_box, layout_box.dom_node(), false, String {}, true);
}
JS::NonnullGCPtr<ImagePaintable> ImagePaintable::create(Layout::ImageBox const& layout_box) JS::NonnullGCPtr<ImagePaintable> ImagePaintable::create(Layout::ImageBox const& layout_box)
{ {
auto alt = layout_box.dom_node().get_attribute_value(HTML::AttributeNames::alt); auto alt = layout_box.dom_node().get_attribute_value(HTML::AttributeNames::alt);
return layout_box.heap().allocate_without_realm<ImagePaintable>(layout_box, move(alt)); return layout_box.heap().allocate_without_realm<ImagePaintable>(layout_box, layout_box.image_provider(), layout_box.renders_as_alt_text(), move(alt), false);
} }
ImagePaintable::ImagePaintable(Layout::ImageBox const& layout_box, String alt_text) ImagePaintable::ImagePaintable(Layout::Box const& layout_box, Layout::ImageProvider const& image_provider, bool renders_as_alt_text, String alt_text, bool is_svg_image)
: PaintableBox(layout_box) : PaintableBox(layout_box)
, m_renders_as_alt_text(layout_box.renders_as_alt_text()) , m_renders_as_alt_text(renders_as_alt_text)
, m_alt_text(move(alt_text)) , m_alt_text(move(alt_text))
, m_image_provider(layout_box.image_provider()) , m_image_provider(image_provider)
, m_is_svg_image(is_svg_image)
{ {
const_cast<DOM::Document&>(layout_box.document()).register_viewport_client(*this); const_cast<DOM::Document&>(layout_box.document()).register_viewport_client(*this);
} }
@ -74,7 +79,8 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
auto scale_y = 0.0f; auto scale_y = 0.0f;
Gfx::IntRect bitmap_intersect = bitmap_rect; Gfx::IntRect bitmap_intersect = bitmap_rect;
switch (computed_values().object_fit()) { auto object_fit = m_is_svg_image ? CSS::ObjectFit::Contain : computed_values().object_fit();
switch (object_fit) {
case CSS::ObjectFit::Fill: case CSS::ObjectFit::Fill:
scale_x = (float)image_int_rect.width() / bitmap_rect.width(); scale_x = (float)image_int_rect.width() / bitmap_rect.width();
scale_y = (float)image_int_rect.height() / bitmap_rect.height(); scale_y = (float)image_int_rect.height() / bitmap_rect.height();

8
Userland/Libraries/LibWeb/Painting/ImagePaintable.h
View file

@ -7,6 +7,7 @@
#pragma once #pragma once
#include <LibWeb/Layout/ImageBox.h> #include <LibWeb/Layout/ImageBox.h>
#include <LibWeb/Layout/SVGImageBox.h>
#include <LibWeb/Painting/PaintableBox.h> #include <LibWeb/Painting/PaintableBox.h>
namespace Web::Painting { namespace Web::Painting {
@ -18,7 +19,8 @@ class ImagePaintable final
JS_DECLARE_ALLOCATOR(ImagePaintable); JS_DECLARE_ALLOCATOR(ImagePaintable);
public: public:
static JS::NonnullGCPtr<ImagePaintable> create(Layout::ImageBox const&); static JS::NonnullGCPtr<ImagePaintable> create(Layout::ImageBox const& layout_box);
static JS::NonnullGCPtr<ImagePaintable> create(Layout::SVGImageBox const& layout_box);
virtual void paint(PaintContext&, PaintPhase) const override; virtual void paint(PaintContext&, PaintPhase) const override;
@ -30,12 +32,14 @@ private:
// ^Document::ViewportClient // ^Document::ViewportClient
virtual void did_set_viewport_rect(CSSPixelRect const&) final; virtual void did_set_viewport_rect(CSSPixelRect const&) final;
ImagePaintable(Layout::ImageBox const&, String alt_text); ImagePaintable(Layout::Box const& layout_box, Layout::ImageProvider const& image_provider, bool renders_as_alt_text, String alt_text, bool is_svg_image);
bool m_renders_as_alt_text { false }; bool m_renders_as_alt_text { false };
String m_alt_text; String m_alt_text;
Layout::ImageProvider const& m_image_provider; Layout::ImageProvider const& m_image_provider;
bool m_is_svg_image { false };
}; };
} }

217
Userland/Libraries/LibWeb/SVG/SVGImageElement.cpp Normal file
View file

@ -0,0 +1,217 @@
/*
* Copyright (c) 2024, Tim Ledbetter <tim.ledbetter@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "SVGImageElement.h"
#include <LibJS/Heap/Heap.h>
#include <LibWeb/Bindings/SVGImageElementPrototype.h>
#include <LibWeb/DOM/DocumentObserver.h>
#include <LibWeb/HTML/PotentialCORSRequest.h>
#include <LibWeb/HTML/SharedResourceRequest.h>
#include <LibWeb/Layout/SVGImageBox.h>
#include <LibWeb/SVG/SVGDecodedImageData.h>
namespace Web::SVG {
SVGImageElement::SVGImageElement(DOM::Document& document, DOM::QualifiedName qualified_name)
: SVGGraphicsElement(document, move(qualified_name))
{
}
void SVGImageElement::initialize(JS::Realm& realm)
{
Base::initialize(realm);
WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGImageElement);
m_document_observer = realm.heap().allocate<DOM::DocumentObserver>(realm, realm, document());
m_document_observer->set_document_completely_loaded([this]() mutable {
// FIXME: This is a hack to make SVG images appear when the document has finished loading
document().invalidate_layout();
});
}
void SVGImageElement::visit_edges(Cell::Visitor& visitor)
{
Base::visit_edges(visitor);
SVGURIReferenceMixin::visit_edges(visitor);
visitor.visit(m_x);
visitor.visit(m_y);
visitor.visit(m_width);
visitor.visit(m_height);
visitor.visit(m_resource_request);
visitor.visit(m_document_observer);
}
void SVGImageElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value)
{
SVGGraphicsElement::attribute_changed(name, old_value, value);
if (name == SVG::AttributeNames::x) {
auto parsed_value = AttributeParser::parse_coordinate(value.value_or(String {}));
MUST(x()->base_val()->set_value(parsed_value.value_or(0)));
} else if (name == SVG::AttributeNames::y) {
auto parsed_value = AttributeParser::parse_coordinate(value.value_or(String {}));
MUST(y()->base_val()->set_value(parsed_value.value_or(0)));
} else if (name == SVG::AttributeNames::width) {
auto parsed_value = AttributeParser::parse_coordinate(value.value_or(String {}));
MUST(width()->base_val()->set_value(parsed_value.value_or(0)));
} else if (name == SVG::AttributeNames::height) {
auto parsed_value = AttributeParser::parse_coordinate(value.value_or(String {}));
MUST(height()->base_val()->set_value(parsed_value.value_or(0)));
} else if (name == SVG::AttributeNames::href) {
process_the_url(value);
}
}
// https://svgwg.org/svg2-draft/embedded.html#__svg__SVGImageElement__x
JS::NonnullGCPtr<SVG::SVGAnimatedLength> SVGImageElement::x()
{
if (!m_x) {
auto& realm = this->realm();
m_x = SVGAnimatedLength::create(realm, SVGLength::create(realm, 0, 0), SVGLength::create(realm, 0, 0));
}
return *m_x;
}
// https://svgwg.org/svg2-draft/embedded.html#__svg__SVGImageElement__y
JS::NonnullGCPtr<SVG::SVGAnimatedLength> SVGImageElement::y()
{
if (!m_y) {
auto& realm = this->realm();
m_y = SVGAnimatedLength::create(realm, SVGLength::create(realm, 0, 0), SVGLength::create(realm, 0, 0));
}
return *m_y;
}
// https://svgwg.org/svg2-draft/embedded.html#__svg__SVGImageElement__width
JS::NonnullGCPtr<SVG::SVGAnimatedLength> SVGImageElement::width()
{
if (!m_width) {
auto& realm = this->realm();
m_width = SVGAnimatedLength::create(realm, SVGLength::create(realm, 0, intrinsic_width().value_or(0).to_double()), SVGLength::create(realm, 0, 0));
}
return *m_width;
}
// https://svgwg.org/svg2-draft/embedded.html#__svg__SVGImageElement__height
JS::NonnullGCPtr<SVG::SVGAnimatedLength> SVGImageElement::height()
{
if (!m_height) {
auto& realm = this->realm();
m_height = SVGAnimatedLength::create(realm, SVGLength::create(realm, 0, intrinsic_height().value_or(0).to_double()), SVGLength::create(realm, 0, 0));
}
return *m_height;
}
Gfx::Rect<CSSPixels> SVGImageElement::bounding_box() const
{
Optional<CSSPixels> width;
if (attribute(HTML::AttributeNames::width).has_value())
width = CSSPixels { m_width->base_val()->value() };
Optional<CSSPixels> height;
if (attribute(HTML::AttributeNames::height).has_value())
height = CSSPixels { m_height->base_val()->value() };
if (!height.has_value() && width.has_value() && intrinsic_aspect_ratio().has_value())
height = width.value() / intrinsic_aspect_ratio().value();
if (!width.has_value() && height.has_value() && intrinsic_aspect_ratio().has_value())
width = height.value() * intrinsic_aspect_ratio().value();
if (!width.has_value() && intrinsic_width().has_value())
width = intrinsic_width();
if (!height.has_value() && intrinsic_height().has_value())
height = intrinsic_height();
return {
CSSPixels { m_x ? m_x->base_val()->value() : 0 },
CSSPixels { m_y ? m_y->base_val()->value() : 0 },
width.value_or(0),
height.value_or(0),
};
}
// https://www.w3.org/TR/SVG2/linking.html#processingURL
void SVGImageElement::process_the_url(Optional<String> const& href)
{
m_href = document().url().complete_url(href.value_or(String {}));
if (!m_href.is_valid())
return;
fetch_the_document(m_href);
}
// https://svgwg.org/svg2-draft/linking.html#processingURL-fetch
void SVGImageElement::fetch_the_document(URL::URL const& url)
{
m_load_event_delayer.emplace(document());
m_resource_request = HTML::SharedResourceRequest::get_or_create(realm(), document().page(), url);
m_resource_request->add_callbacks(
[this] {
m_load_event_delayer.clear();
},
[this] {
m_load_event_delayer.clear();
});
if (m_resource_request->needs_fetching()) {
auto request = HTML::create_potential_CORS_request(vm(), url, Fetch::Infrastructure::Request::Destination::Image, HTML::CORSSettingAttribute::NoCORS);
request->set_client(&document().relevant_settings_object());
m_resource_request->fetch_resource(realm(), request);
}
}
JS::GCPtr<Layout::Node> SVGImageElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
{
return heap().allocate_without_realm<Layout::SVGImageBox>(document(), *this, move(style));
}
bool SVGImageElement::is_image_available() const
{
return m_resource_request && m_resource_request->image_data();
}
Optional<CSSPixels> SVGImageElement::intrinsic_width() const
{
if (!m_resource_request)
return {};
if (auto image_data = m_resource_request->image_data())
return image_data->intrinsic_width();
return {};
}
Optional<CSSPixels> SVGImageElement::intrinsic_height() const
{
if (!m_resource_request)
return {};
if (auto image_data = m_resource_request->image_data())
return image_data->intrinsic_height();
return {};
}
Optional<CSSPixelFraction> SVGImageElement::intrinsic_aspect_ratio() const
{
if (!m_resource_request)
return {};
if (auto image_data = m_resource_request->image_data())
return image_data->intrinsic_aspect_ratio();
return {};
}
RefPtr<Gfx::ImmutableBitmap> SVGImageElement::current_image_bitmap(Gfx::IntSize size) const
{
if (!m_resource_request)
return {};
if (auto data = m_resource_request->image_data())
return data->bitmap(0, size);
return {};
}
}

65
Userland/Libraries/LibWeb/SVG/SVGImageElement.h Normal file
View file

@ -0,0 +1,65 @@
/*
* Copyright (c) 2024, Tim Ledbetter <tim.ledbetter@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibJS/Heap/GCPtr.h>
#include <LibWeb/Layout/ImageProvider.h>
#include <LibWeb/SVG/SVGAnimatedLength.h>
#include <LibWeb/SVG/SVGGraphicsElement.h>
namespace Web::SVG {
class SVGImageElement
: public SVGGraphicsElement
, public SVGURIReferenceMixin<SupportsXLinkHref::Yes>
, public Layout::ImageProvider {
WEB_PLATFORM_OBJECT(SVGImageElement, SVGElement);
public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value) override;
JS::NonnullGCPtr<SVG::SVGAnimatedLength> x();
JS::NonnullGCPtr<SVG::SVGAnimatedLength> y();
JS::NonnullGCPtr<SVG::SVGAnimatedLength> width();
JS::NonnullGCPtr<SVG::SVGAnimatedLength> height();
Gfx::Rect<CSSPixels> bounding_box() const;
// ^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 JS::NonnullGCPtr<DOM::Element const> to_html_element() const override { return *this; }
protected:
SVGImageElement(DOM::Document&, DOM::QualifiedName);
virtual void initialize(JS::Realm&) override;
virtual void visit_edges(Cell::Visitor&) override;
void process_the_url(Optional<String> const& href);
void fetch_the_document(URL::URL const& url);
private:
virtual JS::GCPtr<Layout::Node> create_layout_node(NonnullRefPtr<CSS::StyleProperties>) override;
JS::GCPtr<SVG::SVGAnimatedLength> m_x;
JS::GCPtr<SVG::SVGAnimatedLength> m_y;
JS::GCPtr<SVG::SVGAnimatedLength> m_width;
JS::GCPtr<SVG::SVGAnimatedLength> m_height;
URL::URL m_href;
JS::GCPtr<HTML::SharedResourceRequest> m_resource_request;
Optional<DOM::DocumentLoadEventDelayer> m_load_event_delayer;
JS::GCPtr<DOM::DocumentObserver> m_document_observer;
};
}

15
Userland/Libraries/LibWeb/SVG/SVGImageElement.idl Normal file
View file

@ -0,0 +1,15 @@
#import <SVG/SVGGraphicsElement.idl>
#import <SVG/SVGURIReference.idl>
// https://svgwg.org/svg2-draft/embedded.html#InterfaceSVGImageElement
[Exposed=Window]
interface SVGImageElement : SVGGraphicsElement {
[SameObject] readonly attribute SVGAnimatedLength x;
[SameObject] readonly attribute SVGAnimatedLength y;
[SameObject] readonly attribute SVGAnimatedLength width;
[SameObject] readonly attribute SVGAnimatedLength height;
[FIXME, SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
[Reflect=crossorigin, Enumerated=CORSSettingsAttribute] attribute DOMString? crossOrigin;
};
SVGImageElement includes SVGURIReference;

1
Userland/Libraries/LibWeb/SVG/TagNames.h
View file

@ -16,6 +16,7 @@ namespace Web::SVG::TagNames {
__ENUMERATE_SVG_TAG(circle) \ __ENUMERATE_SVG_TAG(circle) \
__ENUMERATE_SVG_TAG(ellipse) \ __ENUMERATE_SVG_TAG(ellipse) \
__ENUMERATE_SVG_TAG(g) \ __ENUMERATE_SVG_TAG(g) \
__ENUMERATE_SVG_TAG(image) \
__ENUMERATE_SVG_TAG(line) \ __ENUMERATE_SVG_TAG(line) \
__ENUMERATE_SVG_TAG(path) \ __ENUMERATE_SVG_TAG(path) \
__ENUMERATE_SVG_TAG(polygon) \ __ENUMERATE_SVG_TAG(polygon) \

1
Userland/Libraries/LibWeb/idl_files.cmake
View file

@ -278,6 +278,7 @@ libweb_js_bindings(SVG/SVGGElement)
libweb_js_bindings(SVG/SVGGeometryElement) libweb_js_bindings(SVG/SVGGeometryElement)
libweb_js_bindings(SVG/SVGGradientElement) libweb_js_bindings(SVG/SVGGradientElement)
libweb_js_bindings(SVG/SVGGraphicsElement) libweb_js_bindings(SVG/SVGGraphicsElement)
libweb_js_bindings(SVG/SVGImageElement)
libweb_js_bindings(SVG/SVGCircleElement) libweb_js_bindings(SVG/SVGCircleElement)
libweb_js_bindings(SVG/SVGEllipseElement) libweb_js_bindings(SVG/SVGEllipseElement)
libweb_js_bindings(SVG/SVGForeignObjectElement) libweb_js_bindings(SVG/SVGForeignObjectElement)