system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 18:46:18 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Update SVG <circle> element to use geometry properties

Browse source 
With this the `<circle>` element now correctly parses percentage sizes,
and resolves them relative to the viewport.

The rest of the geometry elements are still left TODO.
This commit is contained in:
MacDue 2024-03-03 20:47:10 +00:00 committed by Andreas Kling
parent 344eb98b3c
commit 74b655d035
6 changed files with 71 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Layout/expected/svg/objectBoundingBox-mask.txt
View file

@ -8,7 +8,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
SVGGeometryBox <rect> at (8,8) content-size 1x1 children: not-inline
TextNode <#text>
SVGGeometryBox <circle> at (8.09375,8.09375) content-size 0.796875x0.796875 children: not-inline
SVGGeometryBox <circle> at (8.09375,8.09375) content-size 0.8125x0.8125 children: not-inline
TextNode <#text>
TextNode <#text>
SVGGeometryBox <rect> at (8,8) content-size 200x200 children: not-inline

13
Tests/LibWeb/Layout/expected/svg/svg-circle-percentage-attr.txt Normal file
View file

@ -0,0 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x366 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x350 children: inline
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 784x350] baseline: 350
SVGSVGBox <svg> at (8,8) content-size 784x350 [SVG] children: not-inline
SVGGeometryBox <circle> at (250,28) content-size 300x300 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x366]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x350]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 784x350]
SVGPathPaintable (SVGGeometryBox<circle>) [250,28 300x300]

6
Tests/LibWeb/Layout/input/svg/svg-circle-percentage-attr.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html><svg height="350" width="100%"><circle
cx="50%"
cy="170"
r="150"
fill="black"
></circle></svg>

71
Userland/Libraries/LibWeb/SVG/SVGCircleElement.cpp
View file

@ -5,9 +5,12 @@
*/
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/Parser/Parser.h>
#include <LibWeb/Layout/Node.h>
#include <LibWeb/SVG/AttributeNames.h>
#include <LibWeb/SVG/AttributeParser.h>
#include <LibWeb/SVG/SVGCircleElement.h>
#include <LibWeb/SVG/SVGViewport.h>
namespace Web::SVG {
@ -24,34 +27,38 @@ void SVGCircleElement::initialize(JS::Realm& realm)
set_prototype(&Bindings::ensure_web_prototype<Bindings::SVGCircleElementPrototype>(realm, "SVGCircleElement"_fly_string));
}
void SVGCircleElement::attribute_changed(FlyString const& name, Optional<String> const& value)
void SVGCircleElement::apply_presentational_hints(CSS::StyleProperties& style) const
{
SVGGeometryElement::attribute_changed(name, value);
Base::apply_presentational_hints(style);
auto parsing_context = CSS::Parser::ParsingContext { document(), CSS::Parser::ParsingContext::Mode::SVGPresentationAttribute };
if (name == SVG::AttributeNames::cx) {
m_center_x = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::cy) {
m_center_y = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::r) {
m_radius = AttributeParser::parse_positive_length(value.value_or(String {}));
m_path.clear();
}
auto cx_attribute = attribute(SVG::AttributeNames::cx);
if (auto cx_value = parse_css_value(parsing_context, cx_attribute.value_or(String {}), CSS::PropertyID::Cx))
style.set_property(CSS::PropertyID::Cx, cx_value.release_nonnull());
auto cy_attribute = attribute(SVG::AttributeNames::cy);
if (auto cy_value = parse_css_value(parsing_context, cy_attribute.value_or(String {}), CSS::PropertyID::Cy))
style.set_property(CSS::PropertyID::Cy, cy_value.release_nonnull());
auto r_attribute = attribute(SVG::AttributeNames::r);
if (auto r_value = parse_css_value(parsing_context, r_attribute.value_or(String {}), CSS::PropertyID::R))
style.set_property(CSS::PropertyID::R, r_value.release_nonnull());
}
Gfx::Path SVGCircleElement::get_path(CSSPixelSize viewport_size)
{
float cx = m_center_x.value_or(0);
float cy = m_center_y.value_or(0);
float r = m_radius.value_or(0);
Gfx::Path path;
auto* node = layout_node();
auto cx = float(node->computed_values().cx().to_px(*node, viewport_size.width()));
auto cy = float(node->computed_values().cy().to_px(*node, viewport_size.height()));
// Percentages refer to the normalized diagonal of the current SVG viewport
// (see Units: https://svgwg.org/svg2-draft/coords.html#Units)
auto r = float(node->computed_values().r().to_px(*node, normalized_diagonal_length(viewport_size)));
// A zero radius disables rendering.
if (r == 0)
return {};
Gfx::Path path;
bool large_arc = false;
bool sweep = true;
@ -76,31 +83,37 @@ Gfx::Path SVGCircleElement::get_path(CSSPixelSize viewport_size)
// https://www.w3.org/TR/SVG11/shapes.html#CircleElementCXAttribute
JS::NonnullGCPtr<SVGAnimatedLength> SVGCircleElement::cx() const
{
// FIXME: Populate the unit type when it is parsed (0 here is "unknown").
// FIXME: Create a proper animated value when animations are supported.
auto base_length = SVGLength::create(realm(), 0, m_center_x.value_or(0));
auto anim_length = SVGLength::create(realm(), 0, m_center_x.value_or(0));
return SVGAnimatedLength::create(realm(), move(base_length), move(anim_length));
auto make_length = [&] {
if (auto cx = computed_css_values()->length_percentage(CSS::PropertyID::Cx); cx.has_value())
return SVGLength::from_length_percentage(realm(), *cx);
return SVGLength::create(realm(), 0, 0.0f);
};
return SVGAnimatedLength::create(realm(), make_length(), make_length());
}
// https://www.w3.org/TR/SVG11/shapes.html#CircleElementCYAttribute
JS::NonnullGCPtr<SVGAnimatedLength> SVGCircleElement::cy() const
{
// FIXME: Populate the unit type when it is parsed (0 here is "unknown").
// FIXME: Create a proper animated value when animations are supported.
auto base_length = SVGLength::create(realm(), 0, m_center_y.value_or(0));
auto anim_length = SVGLength::create(realm(), 0, m_center_y.value_or(0));
return SVGAnimatedLength::create(realm(), move(base_length), move(anim_length));
auto make_length = [&] {
if (auto cy = computed_css_values()->length_percentage(CSS::PropertyID::Cy); cy.has_value())
return SVGLength::from_length_percentage(realm(), *cy);
return SVGLength::create(realm(), 0, 0.0f);
};
return SVGAnimatedLength::create(realm(), make_length(), make_length());
}
// https://www.w3.org/TR/SVG11/shapes.html#CircleElementRAttribute
JS::NonnullGCPtr<SVGAnimatedLength> SVGCircleElement::r() const
{
// FIXME: Populate the unit type when it is parsed (0 here is "unknown").
// FIXME: Create a proper animated value when animations are supported.
auto base_length = SVGLength::create(realm(), 0, m_radius.value_or(0));
auto anim_length = SVGLength::create(realm(), 0, m_radius.value_or(0));
return SVGAnimatedLength::create(realm(), move(base_length), move(anim_length));
auto make_length = [&] {
if (auto r = computed_css_values()->length_percentage(CSS::PropertyID::R); r.has_value())
return SVGLength::from_length_percentage(realm(), *r);
return SVGLength::create(realm(), 0, 0.0f);
};
return SVGAnimatedLength::create(realm(), make_length(), make_length());
}
}

6
Userland/Libraries/LibWeb/SVG/SVGCircleElement.h
View file

@ -18,7 +18,7 @@ class SVGCircleElement final : public SVGGeometryElement {
public:
virtual ~SVGCircleElement() override = default;
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
@ -30,10 +30,6 @@ private:
SVGCircleElement(DOM::Document&, DOM::QualifiedName);
virtual void initialize(JS::Realm&) override;
Optional<float> m_center_x;
Optional<float> m_center_y;
Optional<float> m_radius;
};
}

8
Userland/Libraries/LibWeb/SVG/SVGViewport.h
View file

@ -6,6 +6,7 @@
#pragma once
#include <AK/Math.h>
#include <LibWeb/SVG/AttributeParser.h>
#include <LibWeb/SVG/ViewBox.h>
@ -18,4 +19,11 @@ public:
virtual ~SVGViewport() = default;
};
inline CSSPixels normalized_diagonal_length(CSSPixelSize viewport_size)
{
if (viewport_size.width() == viewport_size.height())
return viewport_size.width();
return sqrt((viewport_size.width() * viewport_size.width()) + (viewport_size.height() * viewport_size.height())) / CSSPixels::nearest_value_for(AK::Sqrt2<float>);
}
}