RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 16:27:35 +00:00
Code Issues Activity Actions

LibWeb: Add SVG <rect> element and test case :^)

Browse source
This commit is contained in:
Sam Atkins 2022-02-11 15:52:42 +00:00 • committed by Andreas Kling
parent aa2f20fb60
commit 1dde6a0a2b
11 changed files with 225 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Base/res/html/misc/svg.html
View file

@ -11,7 +11,7 @@
</style> </style>
</head> </head>
<body> <body>
<svg width="800" height="400"> <svg width="800" height="800">
<path d="M 10 10 h 100 l -50 80 z" fill="green" stroke="black" stroke-width="3"></path> <path d="M 10 10 h 100 l -50 80 z" fill="green" stroke="black" stroke-width="3"></path>
<path d="M 60 10 h 100 l -50 80 z" fill="red" stroke="blue" stroke-width="3"></path> <path d="M 60 10 h 100 l -50 80 z" fill="red" stroke="blue" stroke-width="3"></path>
<path d="M 110 10 h 100 l -50 80 z" class="css"></path> <path d="M 110 10 h 100 l -50 80 z" class="css"></path>
@ -40,6 +40,13 @@
a 10,30 20 0,1 30,10 l 30,10 a 10,30 20 0,1 30,10 l 30,10
a 10,40 20 0,1 30,10 l 30,10 z"></path> a 10,40 20 0,1 30,10 l 30,10 z"></path>
</g> </g>
<!-- Based on https://svgwg.org/svg2-draft/shapes.html#RectElement -->
<rect x="50" y="420" width="120" height="60" fill="yellow" stroke="navy" stroke-width="3" />
<rect x="250" y="420" width="120" height="60" rx="15" fill="green" />
<g transform="translate(450 450) rotate(-30)">
<rect x="0" y="0" width="120" height="60" rx="15" fill="none" stroke="purple" stroke-width="9" />
</g>
</svg> </svg>
</body> </body>
</html> </html>

4
Userland/Libraries/LibWeb/Bindings/NodeWrapperFactory.cpp
View file

@ -83,6 +83,7 @@
#include <LibWeb/Bindings/NodeWrapper.h> #include <LibWeb/Bindings/NodeWrapper.h>
#include <LibWeb/Bindings/NodeWrapperFactory.h> #include <LibWeb/Bindings/NodeWrapperFactory.h>
#include <LibWeb/Bindings/SVGPathElementWrapper.h> #include <LibWeb/Bindings/SVGPathElementWrapper.h>
#include <LibWeb/Bindings/SVGRectElementWrapper.h>
#include <LibWeb/Bindings/SVGSVGElementWrapper.h> #include <LibWeb/Bindings/SVGSVGElementWrapper.h>
#include <LibWeb/Bindings/TextWrapper.h> #include <LibWeb/Bindings/TextWrapper.h>
#include <LibWeb/DOM/Document.h> #include <LibWeb/DOM/Document.h>
@ -157,6 +158,7 @@
#include <LibWeb/HTML/HTMLUnknownElement.h> #include <LibWeb/HTML/HTMLUnknownElement.h>
#include <LibWeb/HTML/HTMLVideoElement.h> #include <LibWeb/HTML/HTMLVideoElement.h>
#include <LibWeb/SVG/SVGPathElement.h> #include <LibWeb/SVG/SVGPathElement.h>
#include <LibWeb/SVG/SVGRectElement.h>
#include <LibWeb/SVG/SVGSVGElement.h> #include <LibWeb/SVG/SVGSVGElement.h>
namespace Web::Bindings { namespace Web::Bindings {
@ -311,6 +313,8 @@ NodeWrapper* wrap(JS::GlobalObject& global_object, DOM::Node& node)
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGSVGElement>(node))); return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGSVGElement>(node)));
if (is<SVG::SVGPathElement>(node)) if (is<SVG::SVGPathElement>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGPathElement>(node))); return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGPathElement>(node)));
if (is<SVG::SVGRectElement>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGRectElement>(node)));
if (is<DOM::Element>(node)) if (is<DOM::Element>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<DOM::Element>(node))); return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<DOM::Element>(node)));
if (is<DOM::DocumentFragment>(node)) if (is<DOM::DocumentFragment>(node))

3
Userland/Libraries/LibWeb/Bindings/WindowObjectHelper.h
View file

@ -255,6 +255,8 @@
#include <LibWeb/Bindings/SVGGraphicsElementPrototype.h> #include <LibWeb/Bindings/SVGGraphicsElementPrototype.h>
#include <LibWeb/Bindings/SVGPathElementConstructor.h> #include <LibWeb/Bindings/SVGPathElementConstructor.h>
#include <LibWeb/Bindings/SVGPathElementPrototype.h> #include <LibWeb/Bindings/SVGPathElementPrototype.h>
#include <LibWeb/Bindings/SVGRectElementConstructor.h>
#include <LibWeb/Bindings/SVGRectElementPrototype.h>
#include <LibWeb/Bindings/SVGSVGElementConstructor.h> #include <LibWeb/Bindings/SVGSVGElementConstructor.h>
#include <LibWeb/Bindings/SVGSVGElementPrototype.h> #include <LibWeb/Bindings/SVGSVGElementPrototype.h>
#include <LibWeb/Bindings/ScreenConstructor.h> #include <LibWeb/Bindings/ScreenConstructor.h>
@ -435,6 +437,7 @@
ADD_WINDOW_OBJECT_INTERFACE(SVGGeometryElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGGeometryElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGGraphicsElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGGraphicsElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGPathElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGPathElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGRectElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGSVGElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGSVGElement) \
ADD_WINDOW_OBJECT_INTERFACE(Text) \ ADD_WINDOW_OBJECT_INTERFACE(Text) \
ADD_WINDOW_OBJECT_INTERFACE(TextEncoder) \ ADD_WINDOW_OBJECT_INTERFACE(TextEncoder) \

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

@ -271,6 +271,7 @@ set(SOURCES
SVG/SVGGeometryElement.cpp SVG/SVGGeometryElement.cpp
SVG/SVGGraphicsElement.cpp SVG/SVGGraphicsElement.cpp
SVG/SVGPathElement.cpp SVG/SVGPathElement.cpp
SVG/SVGRectElement.cpp
SVG/SVGSVGElement.cpp SVG/SVGSVGElement.cpp
SVG/TagNames.cpp SVG/TagNames.cpp
SVG/ViewBox.cpp SVG/ViewBox.cpp
@ -513,6 +514,7 @@ libweb_js_wrapper(SVG/SVGElement)
libweb_js_wrapper(SVG/SVGGeometryElement) libweb_js_wrapper(SVG/SVGGeometryElement)
libweb_js_wrapper(SVG/SVGGraphicsElement) libweb_js_wrapper(SVG/SVGGraphicsElement)
libweb_js_wrapper(SVG/SVGPathElement) libweb_js_wrapper(SVG/SVGPathElement)
libweb_js_wrapper(SVG/SVGRectElement)
libweb_js_wrapper(SVG/SVGSVGElement) libweb_js_wrapper(SVG/SVGSVGElement)
libweb_js_wrapper(Selection/Selection) libweb_js_wrapper(Selection/Selection)
libweb_js_wrapper(UIEvents/FocusEvent) libweb_js_wrapper(UIEvents/FocusEvent)

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

@ -78,6 +78,7 @@
#include <LibWeb/HTML/HTMLVideoElement.h> #include <LibWeb/HTML/HTMLVideoElement.h>
#include <LibWeb/SVG/SVGGElement.h> #include <LibWeb/SVG/SVGGElement.h>
#include <LibWeb/SVG/SVGPathElement.h> #include <LibWeb/SVG/SVGPathElement.h>
#include <LibWeb/SVG/SVGRectElement.h>
#include <LibWeb/SVG/SVGSVGElement.h> #include <LibWeb/SVG/SVGSVGElement.h>
#include <LibWeb/SVG/TagNames.h> #include <LibWeb/SVG/TagNames.h>
@ -236,6 +237,8 @@ NonnullRefPtr<Element> create_element(Document& document, const FlyString& tag_n
return adopt_ref(*new SVG::SVGSVGElement(document, move(qualified_name))); return adopt_ref(*new SVG::SVGSVGElement(document, move(qualified_name)));
if (lowercase_tag_name == SVG::TagNames::path) if (lowercase_tag_name == SVG::TagNames::path)
return adopt_ref(*new SVG::SVGPathElement(document, move(qualified_name))); return adopt_ref(*new SVG::SVGPathElement(document, move(qualified_name)));
if (lowercase_tag_name == SVG::TagNames::rect)
return adopt_ref(*new SVG::SVGRectElement(document, move(qualified_name)));
if (lowercase_tag_name == SVG::TagNames::g) if (lowercase_tag_name == SVG::TagNames::g)
return adopt_ref(*new SVG::SVGGElement(document, move(qualified_name))); return adopt_ref(*new SVG::SVGGElement(document, move(qualified_name)));

2
Userland/Libraries/LibWeb/Forward.h
View file

@ -248,6 +248,7 @@ class SVGElement;
class SVGGeometryElement; class SVGGeometryElement;
class SVGGraphicsElement; class SVGGraphicsElement;
class SVGPathElement; class SVGPathElement;
class SVGRectElement;
class SVGSVGElement; class SVGSVGElement;
} }
@ -453,6 +454,7 @@ class SVGElementWrapper;
class SVGGeometryElementWrapper; class SVGGeometryElementWrapper;
class SVGGraphicsElementWrapper; class SVGGraphicsElementWrapper;
class SVGPathElementWrapper; class SVGPathElementWrapper;
class SVGRectElementWrapper;
class SVGSVGElementWrapper; class SVGSVGElementWrapper;
class TextEncoderWrapper; class TextEncoderWrapper;
class TextMetricsWrapper; class TextMetricsWrapper;

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

@ -54,6 +54,8 @@ namespace Web::SVG::AttributeNames {
E(repeatCount) \ E(repeatCount) \
E(repeatDur) \ E(repeatDur) \
E(requiredExtensions) \ E(requiredExtensions) \
E(rx) \
E(ry) \
E(requiredFeatures) \ E(requiredFeatures) \
E(specularConstant) \ E(specularConstant) \
E(specularExponent) \ E(specularExponent) \

153
Userland/Libraries/LibWeb/SVG/SVGRectElement.cpp Normal file
View file

@ -0,0 +1,153 @@
/*
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "SVGRectElement.h"
#include <LibWeb/SVG/AttributeNames.h>
#include <LibWeb/SVG/AttributeParser.h>
namespace Web::SVG {
SVGRectElement::SVGRectElement(DOM::Document& document, QualifiedName qualified_name)
: SVGGeometryElement(document, qualified_name)
{
}
void SVGRectElement::parse_attribute(FlyString const& name, String const& value)
{
SVGGeometryElement::parse_attribute(name, value);
if (name == SVG::AttributeNames::x) {
m_x = AttributeParser::parse_coordinate(value);
m_path.clear();
} else if (name == SVG::AttributeNames::y) {
m_y = AttributeParser::parse_coordinate(value);
m_path.clear();
} else if (name == SVG::AttributeNames::width) {
m_width = AttributeParser::parse_positive_length(value);
m_path.clear();
} else if (name == SVG::AttributeNames::height) {
m_height = AttributeParser::parse_positive_length(value);
m_path.clear();
} else if (name == SVG::AttributeNames::rx) {
m_radius_x = AttributeParser::parse_length(value);
m_path.clear();
} else if (name == SVG::AttributeNames::ry) {
m_radius_y = AttributeParser::parse_length(value);
m_path.clear();
}
}
Gfx::Path& SVGRectElement::get_path()
{
if (m_path.has_value())
return m_path.value();
float width = m_width.value_or(0);
float height = m_height.value_or(0);
float x = m_x.value_or(0);
float y = m_y.value_or(0);
Gfx::Path path;
// If width or height is zero, rendering is disabled.
if (width == 0 && height == 0) {
m_path = move(path);
return m_path.value();
}
auto corner_radii = calculate_used_corner_radius_values();
float rx = corner_radii.x();
float ry = corner_radii.y();
// 1. perform an absolute moveto operation to location (x+rx,y);
path.move_to({ x + rx, y });
// 2, perform an absolute horizontal lineto with parameter x+width-rx;
path.horizontal_line_to(x + width - rx);
// 3. if both rx and ry are greater than zero,
// perform an absolute elliptical arc operation to coordinate (x+width,y+ry),
// where rx and ry are used as the equivalent parameters to the elliptical arc command,
// the x-axis-rotation and large-arc-flag are set to zero,
// the sweep-flag is set to one;
double x_axis_rotation = 0;
bool large_arc_flag = false;
bool sweep_flag = true;
if (rx > 0 && ry > 0)
path.elliptical_arc_to({ x + width, y + ry }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag);
// 4. perform an absolute vertical lineto parameter y+height-ry;
path.vertical_line_to(y + height - ry);
// 5. if both rx and ry are greater than zero,
// perform an absolute elliptical arc operation to coordinate (x+width-rx,y+height),
// using the same parameters as previously;
if (rx > 0 && ry > 0)
path.elliptical_arc_to({ x + width - rx, y + height }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag);
// 6. perform an absolute horizontal lineto parameter x+rx;
path.horizontal_line_to(x + rx);
// 7. if both rx and ry are greater than zero,
// perform an absolute elliptical arc operation to coordinate (x,y+height-ry),
// using the same parameters as previously;
if (rx > 0 && ry > 0)
path.elliptical_arc_to({ x, y + height - ry }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag);
// 8. perform an absolute vertical lineto parameter y+ry
path.vertical_line_to(y + ry);
// 9. if both rx and ry are greater than zero,
// perform an absolute elliptical arc operation with a segment-completing close path operation,
// using the same parameters as previously.
if (rx > 0 && ry > 0)
path.elliptical_arc_to({ x + rx, y }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag);
m_path = move(path);
return m_path.value();
}
Gfx::FloatPoint SVGRectElement::calculate_used_corner_radius_values()
{
// 1. Let rx and ry be length values.
float rx = 0;
float ry = 0;
// 2. If neither ‘rx’ nor ‘ry’ are properly specified, then set both rx and ry to 0. (This will result in square corners.)
if (!m_radius_x.has_value() && !m_radius_y.has_value()) {
rx = 0;
ry = 0;
}
// 3. Otherwise, if a properly specified value is provided for ‘rx’, but not for ‘ry’, then set both rx and ry to the value of ‘rx’.
else if (m_radius_x.has_value()) {
rx = m_radius_x.value();
ry = m_radius_x.value();
}
// 4. Otherwise, if a properly specified value is provided for ‘ry’, but not for ‘rx’, then set both rx and ry to the value of ‘ry’.
else if (m_radius_y.has_value()) {
rx = m_radius_y.value();
ry = m_radius_y.value();
}
// 5. Otherwise, both ‘rx’ and ‘ry’ were specified properly. Set rx to the value of ‘rx’ and ry to the value of ‘ry’.
else {
rx = m_radius_x.value();
ry = m_radius_y.value();
}
// 6. If rx is greater than half of ‘width’, then set rx to half of ‘width’.
auto half_width = m_width.value_or(0) / 2;
if (rx > half_width)
rx = half_width;
// 7. If ry is greater than half of ‘height’, then set ry to half of ‘height’.
auto half_height = m_height.value_or(0) / 2;
if (ry > half_height)
ry = half_height;
// 8. The effective values of ‘rx’ and ‘ry’ are rx and ry, respectively.
return Gfx::FloatPoint { rx, ry };
}
}

38
Userland/Libraries/LibWeb/SVG/SVGRectElement.h Normal file
View file

@ -0,0 +1,38 @@
/*
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/SVG/SVGGeometryElement.h>
namespace Web::SVG {
// https://www.w3.org/TR/SVG11/shapes.html#RectElement
class SVGRectElement final : public SVGGeometryElement {
public:
using WrapperType = Bindings::SVGRectElementWrapper;
SVGRectElement(DOM::Document&, QualifiedName);
virtual ~SVGRectElement() override = default;
virtual void parse_attribute(FlyString const& name, String const& value) override;
virtual Gfx::Path& get_path() override;
private:
Gfx::FloatPoint calculate_used_corner_radius_values();
Optional<Gfx::Path> m_path;
Optional<float> m_x;
Optional<float> m_y;
Optional<float> m_width;
Optional<float> m_height;
Optional<float> m_radius_x;
Optional<float> m_radius_y;
};
}

9
Userland/Libraries/LibWeb/SVG/SVGRectElement.idl Normal file
View file

@ -0,0 +1,9 @@
[Exposed=Window]
interface SVGRectElement : SVGGeometryElement {
// [SameObject] readonly attribute SVGAnimatedLength x;
// [SameObject] readonly attribute SVGAnimatedLength y;
// [SameObject] readonly attribute SVGAnimatedLength width;
// [SameObject] readonly attribute SVGAnimatedLength height;
// [SameObject] readonly attribute SVGAnimatedLength rx;
// [SameObject] readonly attribute SVGAnimatedLength ry;
};

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

@ -13,6 +13,7 @@ namespace Web::SVG::TagNames {
#define ENUMERATE_SVG_GRAPHICS_TAGS \ #define ENUMERATE_SVG_GRAPHICS_TAGS \
__ENUMERATE_SVG_TAG(g) \ __ENUMERATE_SVG_TAG(g) \
__ENUMERATE_SVG_TAG(path) \ __ENUMERATE_SVG_TAG(path) \
__ENUMERATE_SVG_TAG(rect) \
__ENUMERATE_SVG_TAG(svg) __ENUMERATE_SVG_TAG(svg)
#define ENUMERATE_SVG_TAGS \ #define ENUMERATE_SVG_TAGS \