beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Layout SVG <text> elements during layout (not while painting)

Browse source 
Previously, all SVG <text> elements were zero-sized boxes, that were
only actually positioned and sized during painting. This led to a number
of problems, the most visible of which being that text could not be
scaled based on the viewBox.

Which this patch, <text> elements get a correctly sized layout box,
that can be hit-tested and respects the SVG viewBox.

To share code with SVGGeometryElement's the PathData (from the prior
commit) has been split into a computed path and computed transforms.
The computed path is specific to geometry elements, but the computed
transforms are shared between all SVG graphics elements.
This commit is contained in:
MacDue 2023-10-29 19:11:46 +00:00 committed by Alexander Kalenik
parent dc9cb449b1
commit c93d367d95
Notes: sideshowbarker 2024-07-16 20:51:53 +09:00 
Author: https://github.com/MacDue
Commit: https://github.com/SerenityOS/serenity/commit/c93d367d95
Pull-request: https://github.com/SerenityOS/serenity/pull/21681
Reviewed-by: https://github.com/kalenikaliaksandr ✅
16 changed files with 209 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Layout/expected/css-namespace-tag-name-selector.txt
View file

@ -9,7 +9,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 2 from Box start: 0, length: 0, rect: [319,51 0x108]
SVGSVGBox <svg> at (9,9) content-size 300x150 [SVG] children: inline
InlineNode <a>
SVGTextBox <text> at (9,9) content-size 0x0 children: inline
SVGTextBox <text> at (29,9) content-size 198.90625x80 children: inline
TextNode <#text>
TextNode <#text>
Box <math> at (319,51) content-size 0x108 children: not-inline

30
Tests/LibWeb/Layout/expected/svg-text-with-viewbox.txt Normal file
View file

@ -0,0 +1,30 @@
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 784x261.328125 children: inline
line 0 width: 784, height: 261.328125, bottom: 261.328125, baseline: 261.328125
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 784x261.328125]
SVGSVGBox <svg> at (8,8) content-size 784x261.328125 [SVG] children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.small> at (73.34375,79.859375) content-size 50.265625x42.46875 children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.heavy> at (138.6875,24.328125) content-size 153.703125x98 children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.small> at (187.671875,145.1875) content-size 36.90625x42.46875 children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.Rrrrr> at (220.34375,57) content-size 526.609375x130.65625 children: inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x261.328125]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 784x261.328125]
SVGTextPaintable (SVGTextBox<text>.small) [73.34375,79.859375 50.265625x42.46875]
SVGTextPaintable (SVGTextBox<text>.heavy) [138.6875,24.328125 153.703125x98]
SVGTextPaintable (SVGTextBox<text>.small) [187.671875,145.1875 36.90625x42.46875]
SVGTextPaintable (SVGTextBox<text>.Rrrrr) [220.34375,57 526.609375x130.65625]

6
Tests/LibWeb/Layout/expected/svg/text-fill-none.txt
View file

@ -4,11 +4,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
line 0 width: 300, height: 150, bottom: 150, baseline: 150
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 300x150]
SVGSVGBox <svg> at (8,8) content-size 300x150 [SVG] children: not-inline
SVGTextBox <text> at (8,8) content-size 0x0 children: not-inline
SVGTextBox <text> at (8,-8) content-size 0x16 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x150]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x150]
SVGTextPaintable (SVGTextBox<text>) [8,8 0x0]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x150] overflow: [8,-8 300x166]
SVGTextPaintable (SVGTextBox<text>) [8,-8 0x16]

20
Tests/LibWeb/Layout/input/svg-text-with-viewbox.html Normal file
View file

@ -0,0 +1,20 @@
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small {
font: italic 13px sans-serif;
}
.heavy {
font: bold 30px sans-serif;
}
.Rrrrr {
font: italic 40px serif;
fill: red;
}
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 457 B

10
Userland/Libraries/LibWeb/Layout/LayoutState.cpp
View file

@ -10,6 +10,7 @@
#include <LibWeb/Layout/LayoutState.h>
#include <LibWeb/Layout/TextNode.h>
#include <LibWeb/Layout/Viewport.h>
#include <LibWeb/Painting/SVGGeometryPaintable.h>
namespace Web::Layout {
@ -266,9 +267,14 @@ void LayoutState::commit(Box& root)
paintables_with_lines.append(paintable_with_lines);
}
if (used_values.svg_path_data().has_value() && is<Painting::SVGGeometryPaintable>(paintable_box)) {
if (used_values.computed_svg_transforms().has_value() && is<Painting::SVGGraphicsPaintable>(paintable_box)) {
auto& svg_graphics_paintable = static_cast<Painting::SVGGraphicsPaintable&>(paintable_box);
svg_graphics_paintable.set_computed_transforms(*used_values.computed_svg_transforms());
}
if (used_values.computed_svg_path().has_value() && is<Painting::SVGGeometryPaintable>(paintable_box)) {
auto& svg_geometry_paintable = static_cast<Painting::SVGGeometryPaintable&>(paintable_box);
svg_geometry_paintable.set_path_data(move(*used_values.svg_path_data()));
svg_geometry_paintable.set_computed_path(move(*used_values.computed_svg_path()));
}
}
}

12
Userland/Libraries/LibWeb/Layout/LayoutState.h
View file

@ -11,7 +11,7 @@
#include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/LineBox.h>
#include <LibWeb/Painting/PaintableBox.h>
#include <LibWeb/Painting/SVGGeometryPaintable.h>
#include <LibWeb/Painting/SVGGraphicsPaintable.h>
namespace Web::Layout {
@ -124,8 +124,11 @@ struct LayoutState {
void set_table_cell_coordinates(Painting::PaintableBox::TableCellCoordinates const& table_cell_coordinates) { m_table_cell_coordinates = table_cell_coordinates; }
auto const& table_cell_coordinates() const { return m_table_cell_coordinates; }
void set_svg_path_data(Painting::SVGGeometryPaintable::PathData const& svg_path_data) { m_svg_path_data = svg_path_data; }
auto& svg_path_data() const { return m_svg_path_data; }
void set_computed_svg_path(Gfx::Path const& svg_path) { m_computed_svg_path = svg_path; }
auto& computed_svg_path() { return m_computed_svg_path; }
void set_computed_svg_transforms(Painting::SVGGraphicsPaintable::ComputedTransforms const& computed_transforms) { m_computed_svg_transforms = computed_transforms; }
auto const& computed_svg_transforms() const { return m_computed_svg_transforms; }
private:
AvailableSize available_width_inside() const;
@ -151,7 +154,8 @@ struct LayoutState {
Optional<Painting::PaintableBox::BordersDataWithElementKind> m_override_borders_data;
Optional<Painting::PaintableBox::TableCellCoordinates> m_table_cell_coordinates;
Optional<Painting::SVGGeometryPaintable::PathData> m_svg_path_data;
Optional<Gfx::Path> m_computed_svg_path;
Optional<Painting::SVGGraphicsPaintable::ComputedTransforms> m_computed_svg_transforms;
};
// Commits the used values produced by layout and builds a paintable tree.

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

@ -135,8 +135,6 @@ static ViewBoxTransform scale_and_align_viewbox_content(SVG::PreserveAspectRatio
static bool should_ensure_creation_of_paintable(Node const& node)
{
if (is<SVGTextBox>(node))
return true;
if (is<SVGGraphicsBox>(node))
return true;
if (node.dom_node()) {
@ -166,46 +164,87 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
return IterationDecision::Continue;
});
auto compute_viewbox_transform = [&](auto const& viewbox) -> Gfx::AffineTransform {
if (!viewbox.has_value())
return {};
// FIXME: This should allow just one of width or height to be specified.
// E.g. We should be able to layout <svg width="100%"> where height is unspecified/auto.
if (!svg_box_state.has_definite_width() || !svg_box_state.has_definite_height()) {
dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Attempting to layout indefinitely sized SVG with a viewbox -- this likely won't work!");
}
auto scale_width = svg_box_state.has_definite_width() ? svg_box_state.content_width() / viewbox->width : 1;
auto scale_height = svg_box_state.has_definite_height() ? svg_box_state.content_height() / viewbox->height : 1;
// The initial value for preserveAspectRatio is xMidYMid meet.
auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
auto viewbox_offset_and_scale = scale_and_align_viewbox_content(preserve_aspect_ratio, *viewbox, { scale_width, scale_height }, svg_box_state);
CSSPixelPoint offset = viewbox_offset_and_scale.offset;
return Gfx::AffineTransform {}.translate(offset.to_type<float>()).scale(viewbox_offset_and_scale.scale_factor, viewbox_offset_and_scale.scale_factor).translate({ -viewbox->min_x, -viewbox->min_y });
};
box.for_each_in_subtree([&](Node const& descendant) {
if (is<SVGGeometryBox>(descendant)) {
auto const& geometry_box = static_cast<SVGGeometryBox const&>(descendant);
auto& geometry_box_state = m_state.get_mutable(geometry_box);
auto& dom_node = const_cast<SVGGeometryBox&>(geometry_box).dom_node();
if (is<SVGGraphicsBox>(descendant)) {
auto const& graphics_box = static_cast<SVGGraphicsBox const&>(descendant);
auto& graphics_box_state = m_state.get_mutable(graphics_box);
auto& dom_node = const_cast<SVGGraphicsBox&>(graphics_box).dom_node();
auto& path = dom_node.get_path();
auto svg_transform = dom_node.get_transform();
Gfx::AffineTransform viewbox_transform;
Gfx::AffineTransform viewbox_transform = compute_viewbox_transform(dom_node.view_box());
graphics_box_state.set_computed_svg_transforms(Painting::SVGGraphicsPaintable::ComputedTransforms(viewbox_transform, svg_transform));
auto to_css_pixels_transform = Gfx::AffineTransform {}.multiply(viewbox_transform).multiply(svg_transform);
double viewbox_scale = 1;
auto maybe_view_box = dom_node.view_box();
if (maybe_view_box.has_value()) {
// FIXME: This should allow just one of width or height to be specified.
// E.g. We should be able to layout <svg width="100%"> where height is unspecified/auto.
if (!svg_box_state.has_definite_width() || !svg_box_state.has_definite_height()) {
dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Attempting to layout indefinitely sized SVG with a viewbox -- this likely won't work!");
if (is<SVGGeometryBox>(descendant)) {
auto path = static_cast<SVG::SVGGeometryElement&>(dom_node).get_path();
auto path_bounding_box = to_css_pixels_transform.map(path.bounding_box()).to_type<CSSPixels>();
// Stroke increases the path's size by stroke_width/2 per side.
CSSPixels stroke_width = CSSPixels::nearest_value_for(graphics_box.dom_node().visible_stroke_width() * viewbox_transform.x_scale());
path_bounding_box.inflate(stroke_width, stroke_width);
graphics_box_state.set_content_offset(path_bounding_box.top_left());
graphics_box_state.set_content_width(path_bounding_box.width());
graphics_box_state.set_content_height(path_bounding_box.height());
graphics_box_state.set_computed_svg_path(move(path));
} else if (is<SVGTextBox>(descendant)) {
auto& text_element = static_cast<SVG::SVGTextPositioningElement&>(dom_node);
// FIXME: Support arbitrary path transforms for fonts.
// FIMXE: This assumes transform->x_scale() == transform->y_scale().
auto& scaled_font = graphics_box.scaled_font(to_css_pixels_transform.x_scale());
auto text_contents = text_element.text_contents();
auto text_offset = text_element.get_offset().transformed(to_css_pixels_transform).to_type<CSSPixels>();
auto text_width = CSSPixels::nearest_value_for(scaled_font.width(Utf8View { text_contents }));
// https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties
switch (text_element.text_anchor().value_or(SVG::TextAnchor::Start)) {
case SVG::TextAnchor::Start:
// The rendered characters are aligned such that the start of the resulting rendered text is at the initial
// current text position.
break;
case SVG::TextAnchor::Middle: {
// The rendered characters are shifted such that the geometric middle of the resulting rendered text
// (determined from the initial and final current text position before applying the text-anchor property)
// is at the initial current text position.
text_offset.translate_by(-text_width / 2, 0);
break;
}
case SVG::TextAnchor::End: {
// The rendered characters are shifted such that the end of the resulting rendered text (final current text
// position before applying the text-anchor property) is at the initial current text position.
text_offset.translate_by(-text_width, 0);
break;
}
default:
VERIFY_NOT_REACHED();
}
auto view_box = maybe_view_box.value();
auto scale_width = svg_box_state.has_definite_width() ? svg_box_state.content_width() / view_box.width : 1;
auto scale_height = svg_box_state.has_definite_height() ? svg_box_state.content_height() / view_box.height : 1;
// The initial value for preserveAspectRatio is xMidYMid meet.
auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
auto viewbox_offset_and_scale = scale_and_align_viewbox_content(preserve_aspect_ratio, view_box, { scale_width, scale_height }, svg_box_state);
viewbox_transform = Gfx::AffineTransform {}.translate(viewbox_offset_and_scale.offset.to_type<float>()).scale(viewbox_offset_and_scale.scale_factor, viewbox_offset_and_scale.scale_factor).translate({ -view_box.min_x, -view_box.min_y });
viewbox_scale = viewbox_offset_and_scale.scale_factor;
auto text_height = CSSPixels::nearest_value_for(scaled_font.pixel_size());
graphics_box_state.set_content_offset(text_offset.translated(0, -text_height));
graphics_box_state.set_content_width(text_width);
graphics_box_state.set_content_height(text_height);
}
// Stroke increases the path's size by stroke_width/2 per side.
auto path_transform = Gfx::AffineTransform {}.multiply(viewbox_transform).multiply(svg_transform);
auto path_bounding_box = path_transform.map(path.bounding_box()).to_type<CSSPixels>();
CSSPixels stroke_width = CSSPixels::nearest_value_for(static_cast<double>(geometry_box.dom_node().visible_stroke_width()) * viewbox_scale);
path_bounding_box.inflate(stroke_width, stroke_width);
geometry_box_state.set_content_offset(path_bounding_box.top_left());
geometry_box_state.set_content_width(path_bounding_box.width());
geometry_box_state.set_content_height(path_bounding_box.height());
geometry_box_state.set_svg_path_data(Painting::SVGGeometryPaintable::PathData(path, viewbox_transform, svg_transform));
} else if (is<SVGSVGBox>(descendant)) {
SVGFormattingContext nested_context(m_state, static_cast<SVGSVGBox const&>(descendant), this);
nested_context.run(static_cast<SVGSVGBox const&>(descendant), layout_mode, available_space);

21
Userland/Libraries/LibWeb/Layout/SVGTextBox.cpp
View file

@ -15,27 +15,6 @@ SVGTextBox::SVGTextBox(DOM::Document& document, SVG::SVGTextPositioningElement&
{
}
CSSPixelPoint SVGTextBox::viewbox_origin() const
{
auto* svg_box = dom_node().first_ancestor_of_type<SVG::SVGSVGElement>();
if (!svg_box || !svg_box->view_box().has_value())
return { 0, 0 };
return { svg_box->view_box().value().min_x, svg_box->view_box().value().min_y };
}
Optional<Gfx::AffineTransform> SVGTextBox::layout_transform() const
{
// FIXME: Since text layout boxes are currently 0x0 it is not possible handle viewBox scaling here.
auto& geometry_element = dom_node();
auto transform = geometry_element.get_transform();
auto* svg_box = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>();
auto origin = viewbox_origin().to_type<float>();
Gfx::FloatPoint paint_offset = {};
if (svg_box && svg_box->view_box().has_value())
paint_offset = svg_box->paintable_box()->absolute_rect().location().to_type<float>();
return Gfx::AffineTransform {}.translate(paint_offset).translate(-origin).multiply(transform);
}
JS::GCPtr<Painting::Paintable> SVGTextBox::create_paintable() const
{
return Painting::SVGTextPaintable::create(*this);

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

@ -22,8 +22,6 @@ public:
SVG::SVGTextPositioningElement& dom_node() { return static_cast<SVG::SVGTextPositioningElement&>(SVGGraphicsBox::dom_node()); }
SVG::SVGTextPositioningElement const& dom_node() const { return static_cast<SVG::SVGTextPositioningElement const&>(SVGGraphicsBox::dom_node()); }
Optional<Gfx::AffineTransform> layout_transform() const;
virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
private:

13
Userland/Libraries/LibWeb/Painting/SVGGeometryPaintable.cpp
View file

@ -6,7 +6,6 @@
*/
#include <LibGfx/AntiAliasingPainter.h>
#include <LibWeb/Layout/ImageBox.h>
#include <LibWeb/Painting/SVGGeometryPaintable.h>
#include <LibWeb/SVG/SVGSVGElement.h>
@ -30,9 +29,9 @@ Layout::SVGGeometryBox const& SVGGeometryPaintable::layout_box() const
Optional<HitTestResult> SVGGeometryPaintable::hit_test(CSSPixelPoint position, HitTestType type) const
{
auto result = SVGGraphicsPaintable::hit_test(position, type);
if (!result.has_value() || !path_data().has_value())
if (!result.has_value() || !computed_path().has_value())
return {};
auto transformed_bounding_box = path_data()->svg_to_css_pixels_transform().map_to_quad(path_data()->computed_path().bounding_box());
auto transformed_bounding_box = computed_transforms().svg_to_css_pixels_transform().map_to_quad(computed_path()->bounding_box());
if (!transformed_bounding_box.contains(position.to_type<float>()))
return {};
return result;
@ -52,7 +51,7 @@ static Gfx::Painter::WindingRule to_gfx_winding_rule(SVG::FillRule fill_rule)
void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
{
if (!is_visible() || !path_data().has_value())
if (!is_visible() || !computed_path().has_value())
return;
SVGGraphicsPaintable::paint(context, phase);
@ -71,8 +70,8 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
auto offset = context.floored_device_point(svg_element_rect.location()).to_type<int>().to_type<float>();
auto maybe_view_box = geometry_element.view_box();
auto paint_transform = path_data()->svg_to_device_pixels_transform(context, context.svg_transform());
Gfx::Path path = path_data()->computed_path().copy_transformed(paint_transform);
auto paint_transform = computed_transforms().svg_to_device_pixels_transform(context);
Gfx::Path path = computed_path()->copy_transformed(paint_transform);
// Fills are computed as though all subpaths are closed (https://svgwg.org/svg2-draft/painting.html#FillProperties)
auto closed_path = [&] {
@ -95,7 +94,7 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
SVG::SVGPaintContext paint_context {
.viewport = svg_viewport,
.path_bounding_box = path_data()->computed_path().bounding_box(),
.path_bounding_box = computed_path()->bounding_box(),
.transform = paint_transform
};

43
Userland/Libraries/LibWeb/Painting/SVGGeometryPaintable.h
View file

@ -15,41 +15,6 @@ class SVGGeometryPaintable final : public SVGGraphicsPaintable {
JS_CELL(SVGGeometryPaintable, SVGGraphicsPaintable);
public:
class PathData {
public:
PathData(Gfx::Path path, Gfx::AffineTransform svg_to_viewbox_transform, Gfx::AffineTransform svg_transform)
: m_computed_path(move(path))
, m_svg_to_viewbox_transform(svg_to_viewbox_transform)
, m_svg_transform(svg_transform)
{
}
Gfx::Path const& computed_path() const { return m_computed_path; }
Gfx::AffineTransform const& svg_to_viewbox_transform() const { return m_svg_to_viewbox_transform; }
Gfx::AffineTransform const& svg_transform() const { return m_svg_transform; }
Gfx::AffineTransform svg_to_css_pixels_transform(
Optional<Gfx::AffineTransform const&> additional_svg_transform = {}) const
{
return Gfx::AffineTransform {}.multiply(svg_to_viewbox_transform()).multiply(additional_svg_transform.value_or(Gfx::AffineTransform {})).multiply(svg_transform());
}
Gfx::AffineTransform svg_to_device_pixels_transform(
PaintContext const& context,
Gfx::AffineTransform const& additional_svg_transform) const
{
auto css_scale = context.device_pixels_per_css_pixel();
return Gfx::AffineTransform {}.scale({ css_scale, css_scale }).multiply(svg_to_css_pixels_transform(additional_svg_transform));
}
private:
Gfx::Path m_computed_path;
Gfx::AffineTransform m_svg_to_viewbox_transform;
Gfx::AffineTransform m_svg_transform;
};
static JS::NonnullGCPtr<SVGGeometryPaintable> create(Layout::SVGGeometryBox const&);
virtual Optional<HitTestResult> hit_test(CSSPixelPoint, HitTestType) const override;
@ -58,17 +23,17 @@ public:
Layout::SVGGeometryBox const& layout_box() const;
void set_path_data(PathData path_data)
void set_computed_path(Gfx::Path path)
{
m_path_data = move(path_data);
m_computed_path = move(path);
}
Optional<PathData> const& path_data() const { return m_path_data; }
Optional<Gfx::Path> const& computed_path() const { return m_computed_path; }
protected:
SVGGeometryPaintable(Layout::SVGGeometryBox const&);
Optional<PathData> m_path_data = {};
Optional<Gfx::Path> m_computed_path = {};
};
}

42
Userland/Libraries/LibWeb/Painting/SVGGraphicsPaintable.h
View file

@ -15,6 +15,36 @@ class SVGGraphicsPaintable : public SVGPaintable {
JS_CELL(SVGGraphicsPaintable, SVGPaintable);
public:
class ComputedTransforms {
public:
ComputedTransforms(Gfx::AffineTransform svg_to_viewbox_transform, Gfx::AffineTransform svg_transform)
: m_svg_to_viewbox_transform(svg_to_viewbox_transform)
, m_svg_transform(svg_transform)
{
}
ComputedTransforms() = default;
Gfx::AffineTransform const& svg_to_viewbox_transform() const { return m_svg_to_viewbox_transform; }
Gfx::AffineTransform const& svg_transform() const { return m_svg_transform; }
Gfx::AffineTransform svg_to_css_pixels_transform(
Optional<Gfx::AffineTransform const&> additional_svg_transform = {}) const
{
return Gfx::AffineTransform {}.multiply(svg_to_viewbox_transform()).multiply(additional_svg_transform.value_or(Gfx::AffineTransform {})).multiply(svg_transform());
}
Gfx::AffineTransform svg_to_device_pixels_transform(PaintContext const& context) const
{
auto css_scale = context.device_pixels_per_css_pixel();
return Gfx::AffineTransform {}.scale({ css_scale, css_scale }).multiply(svg_to_css_pixels_transform(context.svg_transform()));
}
private:
Gfx::AffineTransform m_svg_to_viewbox_transform {};
Gfx::AffineTransform m_svg_transform {};
};
static JS::NonnullGCPtr<SVGGraphicsPaintable> create(Layout::SVGGraphicsBox const&);
Layout::SVGGraphicsBox const& layout_box() const;
@ -25,8 +55,20 @@ public:
virtual Optional<Gfx::Bitmap::MaskKind> get_mask_type() const override;
virtual RefPtr<Gfx::Bitmap> calculate_mask(PaintContext&, CSSPixelRect const& masking_area) const override;
void set_computed_transforms(ComputedTransforms computed_transforms)
{
m_computed_transforms = computed_transforms;
}
ComputedTransforms const& computed_transforms() const
{
return m_computed_transforms;
}
protected:
SVGGraphicsPaintable(Layout::SVGGraphicsBox const&);
ComputedTransforms m_computed_transforms;
};
}

61
Userland/Libraries/LibWeb/Painting/SVGTextPaintable.cpp
View file

@ -19,13 +19,6 @@ SVGTextPaintable::SVGTextPaintable(Layout::SVGTextBox const& layout_box)
{
}
Optional<HitTestResult> SVGTextPaintable::hit_test(CSSPixelPoint position, HitTestType type) const
{
(void)position;
(void)type;
return {};
}
void SVGTextPaintable::paint(PaintContext& context, PaintPhase phase) const
{
if (!is_visible())
@ -45,57 +38,13 @@ void SVGTextPaintable::paint(PaintContext& context, PaintPhase phase) const
return;
auto& painter = context.painter();
auto& text_element = layout_box().dom_node();
auto const* svg_element = text_element.shadow_including_first_ancestor_of_type<SVG::SVGSVGElement>();
auto svg_element_rect = svg_element->paintable_box()->absolute_rect();
RecordingPainterStateSaver save_painter { painter };
auto svg_context_offset = context.floored_device_point(svg_element_rect.location()).to_type<int>();
painter.translate(svg_context_offset);
auto const& dom_node = layout_box().dom_node();
auto paint_transform = computed_transforms().svg_to_device_pixels_transform(context);
auto& scaled_font = layout_box().scaled_font(paint_transform.x_scale());
auto text_rect = context.enclosing_device_rect(absolute_rect()).to_type<int>();
auto text_contents = dom_node.text_contents();
auto child_text_content = dom_node.child_text_content();
auto maybe_transform = layout_box().layout_transform();
if (!maybe_transform.has_value())
return;
auto transform = Gfx::AffineTransform(context.svg_transform()).multiply(*maybe_transform);
// FIXME: Support arbitrary path transforms for fonts.
// FIMXE: This assumes transform->x_scale() == transform->y_scale().
auto& scaled_font = layout_node().scaled_font(static_cast<float>(context.device_pixels_per_css_pixel()) * transform.x_scale());
Utf8View text_content { child_text_content };
auto text_offset = context.floored_device_point(dom_node.get_offset().transformed(transform).to_type<CSSPixels>());
// FIXME: Once SVGFormattingContext does text layout this logic should move there.
// https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties
switch (text_element.text_anchor().value_or(SVG::TextAnchor::Start)) {
case SVG::TextAnchor::Start:
// The rendered characters are aligned such that the start of the resulting rendered text is at the initial
// current text position.
break;
case SVG::TextAnchor::Middle: {
// The rendered characters are shifted such that the geometric middle of the resulting rendered text
// (determined from the initial and final current text position before applying the text-anchor property)
// is at the initial current text position.
text_offset.translate_by(-scaled_font.width(text_content) / 2, 0);
break;
}
case SVG::TextAnchor::End: {
// The rendered characters are shifted such that the end of the resulting rendered text (final current text
// position before applying the text-anchor property) is at the initial current text position.
text_offset.translate_by(-scaled_font.width(text_content), 0);
break;
}
default:
VERIFY_NOT_REACHED();
}
painter.draw_text_run(text_offset.to_type<int>(), text_content, scaled_font, layout_node().computed_values().fill()->as_color(), context.enclosing_device_rect(svg_element_rect).to_type<int>());
painter.draw_text_run(text_rect.bottom_left(), Utf8View { text_contents }, scaled_font, layout_node().computed_values().fill()->as_color(), text_rect);
}
}

2
Userland/Libraries/LibWeb/Painting/SVGTextPaintable.h
View file

@ -17,8 +17,6 @@ class SVGTextPaintable final : public SVGGraphicsPaintable {
public:
static JS::NonnullGCPtr<SVGTextPaintable> create(Layout::SVGTextBox const&);
virtual Optional<HitTestResult> hit_test(CSSPixelPoint, HitTestType) const override;
virtual void paint(PaintContext&, PaintPhase) const override;
Layout::SVGTextBox const& layout_box() const

7
Userland/Libraries/LibWeb/SVG/SVGTextContentElement.cpp
View file

@ -45,10 +45,15 @@ Optional<TextAnchor> SVGTextContentElement::text_anchor() const
}
}
DeprecatedString SVGTextContentElement::text_contents() const
{
return child_text_content().trim_whitespace();
}
// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getNumberOfChars
WebIDL::ExceptionOr<int> SVGTextContentElement::get_number_of_chars() const
{
auto chars = TRY_OR_THROW_OOM(vm(), utf8_to_utf16(child_text_content()));
auto chars = TRY_OR_THROW_OOM(vm(), utf8_to_utf16(text_contents()));
return static_cast<int>(chars.size());
}

2
Userland/Libraries/LibWeb/SVG/SVGTextContentElement.h
View file

@ -21,6 +21,8 @@ public:
Optional<TextAnchor> text_anchor() const;
DeprecatedString text_contents() const;
protected:
SVGTextContentElement(DOM::Document&, DOM::QualifiedName);