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

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

Browse source
This commit is contained in:
Sam Atkins 2022-02-11 17:28:24 +00:00 • committed by Andreas Kling
parent 17912330c4
commit 116a1f485c
13 changed files with 141 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@
</style> </style>
</head> </head>
<body> <body>
<svg width="800" height="800"> <svg width="800" height="1000">
<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>
@ -65,6 +65,16 @@
<line x1="340" y1="700" x2="440" y2="600" stroke-width="20" /> <line x1="340" y1="700" x2="440" y2="600" stroke-width="20" />
<line x1="450" y1="700" x2="550" y2="600" stroke-width="25" /> <line x1="450" y1="700" x2="550" y2="600" stroke-width="25" />
</g> </g>
<!-- Based on https://svgwg.org/svg2-draft/shapes.html#PolylineElement -->
<polyline fill="none" stroke="blue" stroke-width="5"
points="25,850
75,850 75,825 125,825 125,850
175,850 175,800 225,800 225,850
275,850 275,775 325,775 325,850
375,850 375,750 425,750 425,850
475,850 475,725 525,725 525,850
575,850" />
</svg> </svg>
</body> </body>
</html> </html>

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

@ -86,6 +86,7 @@
#include <LibWeb/Bindings/SVGEllipseElementWrapper.h> #include <LibWeb/Bindings/SVGEllipseElementWrapper.h>
#include <LibWeb/Bindings/SVGLineElementWrapper.h> #include <LibWeb/Bindings/SVGLineElementWrapper.h>
#include <LibWeb/Bindings/SVGPathElementWrapper.h> #include <LibWeb/Bindings/SVGPathElementWrapper.h>
#include <LibWeb/Bindings/SVGPolylineElementWrapper.h>
#include <LibWeb/Bindings/SVGRectElementWrapper.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>
@ -164,6 +165,7 @@
#include <LibWeb/SVG/SVGEllipseElement.h> #include <LibWeb/SVG/SVGEllipseElement.h>
#include <LibWeb/SVG/SVGLineElement.h> #include <LibWeb/SVG/SVGLineElement.h>
#include <LibWeb/SVG/SVGPathElement.h> #include <LibWeb/SVG/SVGPathElement.h>
#include <LibWeb/SVG/SVGPolylineElement.h>
#include <LibWeb/SVG/SVGRectElement.h> #include <LibWeb/SVG/SVGRectElement.h>
#include <LibWeb/SVG/SVGSVGElement.h> #include <LibWeb/SVG/SVGSVGElement.h>
@ -323,6 +325,8 @@ NodeWrapper* wrap(JS::GlobalObject& global_object, DOM::Node& node)
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGEllipseElement>(node))); return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGEllipseElement>(node)));
if (is<SVG::SVGLineElement>(node)) if (is<SVG::SVGLineElement>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGLineElement>(node))); return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGLineElement>(node)));
if (is<SVG::SVGPolylineElement>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGPolylineElement>(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)) if (is<SVG::SVGRectElement>(node))

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

@ -261,6 +261,8 @@
#include <LibWeb/Bindings/SVGLineElementPrototype.h> #include <LibWeb/Bindings/SVGLineElementPrototype.h>
#include <LibWeb/Bindings/SVGPathElementConstructor.h> #include <LibWeb/Bindings/SVGPathElementConstructor.h>
#include <LibWeb/Bindings/SVGPathElementPrototype.h> #include <LibWeb/Bindings/SVGPathElementPrototype.h>
#include <LibWeb/Bindings/SVGPolylineElementConstructor.h>
#include <LibWeb/Bindings/SVGPolylineElementPrototype.h>
#include <LibWeb/Bindings/SVGRectElementConstructor.h> #include <LibWeb/Bindings/SVGRectElementConstructor.h>
#include <LibWeb/Bindings/SVGRectElementPrototype.h> #include <LibWeb/Bindings/SVGRectElementPrototype.h>
#include <LibWeb/Bindings/SVGSVGElementConstructor.h> #include <LibWeb/Bindings/SVGSVGElementConstructor.h>
@ -446,6 +448,7 @@
ADD_WINDOW_OBJECT_INTERFACE(SVGGraphicsElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGGraphicsElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGLineElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGLineElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGPathElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGPathElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGPolylineElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGRectElement) \ 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) \

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

@ -274,6 +274,7 @@ set(SOURCES
SVG/SVGCircleElement.cpp SVG/SVGCircleElement.cpp
SVG/SVGEllipseElement.cpp SVG/SVGEllipseElement.cpp
SVG/SVGLineElement.cpp SVG/SVGLineElement.cpp
SVG/SVGPolylineElement.cpp
SVG/SVGRectElement.cpp SVG/SVGRectElement.cpp
SVG/SVGSVGElement.cpp SVG/SVGSVGElement.cpp
SVG/TagNames.cpp SVG/TagNames.cpp
@ -520,6 +521,7 @@ libweb_js_wrapper(SVG/SVGCircleElement)
libweb_js_wrapper(SVG/SVGEllipseElement) libweb_js_wrapper(SVG/SVGEllipseElement)
libweb_js_wrapper(SVG/SVGLineElement) libweb_js_wrapper(SVG/SVGLineElement)
libweb_js_wrapper(SVG/SVGPathElement) libweb_js_wrapper(SVG/SVGPathElement)
libweb_js_wrapper(SVG/SVGPolylineElement)
libweb_js_wrapper(SVG/SVGRectElement) 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)

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

@ -81,6 +81,7 @@
#include <LibWeb/SVG/SVGGElement.h> #include <LibWeb/SVG/SVGGElement.h>
#include <LibWeb/SVG/SVGLineElement.h> #include <LibWeb/SVG/SVGLineElement.h>
#include <LibWeb/SVG/SVGPathElement.h> #include <LibWeb/SVG/SVGPathElement.h>
#include <LibWeb/SVG/SVGPolylineElement.h>
#include <LibWeb/SVG/SVGRectElement.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>
@ -246,6 +247,8 @@ NonnullRefPtr<Element> create_element(Document& document, const FlyString& tag_n
return adopt_ref(*new SVG::SVGLineElement(document, move(qualified_name))); return adopt_ref(*new SVG::SVGLineElement(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::polyline)
return adopt_ref(*new SVG::SVGPolylineElement(document, move(qualified_name)));
if (lowercase_tag_name == SVG::TagNames::rect) if (lowercase_tag_name == SVG::TagNames::rect)
return adopt_ref(*new SVG::SVGRectElement(document, move(qualified_name))); return adopt_ref(*new SVG::SVGRectElement(document, move(qualified_name)));
if (lowercase_tag_name == SVG::TagNames::g) if (lowercase_tag_name == SVG::TagNames::g)

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

@ -251,6 +251,7 @@ class SVGGeometryElement;
class SVGGraphicsElement; class SVGGraphicsElement;
class SVGLineElement; class SVGLineElement;
class SVGPathElement; class SVGPathElement;
class SVGPolylineElement;
class SVGRectElement; class SVGRectElement;
class SVGSVGElement; class SVGSVGElement;
} }
@ -460,6 +461,7 @@ class SVGGeometryElementWrapper;
class SVGGraphicsElementWrapper; class SVGGraphicsElementWrapper;
class SVGLineElementWrapper; class SVGLineElementWrapper;
class SVGPathElementWrapper; class SVGPathElementWrapper;
class SVGPolylineElementWrapper;
class SVGRectElementWrapper; class SVGRectElementWrapper;
class SVGSVGElementWrapper; class SVGSVGElementWrapper;
class TextEncoderWrapper; class TextEncoderWrapper;

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

@ -45,6 +45,7 @@ namespace Web::SVG::AttributeNames {
E(patternContentUnits) \ E(patternContentUnits) \
E(patternTransform) \ E(patternTransform) \
E(patternUnits) \ E(patternUnits) \
E(points) \
E(pointsAtX) \ E(pointsAtX) \
E(pointsAtY) \ E(pointsAtY) \
E(pointsAtZ) \ E(pointsAtZ) \

26
Userland/Libraries/LibWeb/SVG/AttributeParser.cpp
View file

@ -64,6 +64,32 @@ Optional<float> AttributeParser::parse_positive_length(StringView input)
return result; return result;
} }
Vector<Gfx::FloatPoint> AttributeParser::parse_points(StringView input)
{
AttributeParser parser { input };
parser.parse_whitespace();
// FIXME: "If an odd number of coordinates is provided, then the element is in error, with the same user agent behavior
// as occurs with an incorrectly specified ‘path’ element. In such error cases the user agent will drop the last,
// odd coordinate and otherwise render the shape."
// The parser currently doesn't notice that there is a missing coordinate, so make it notice!
auto coordinate_pair_sequence = parser.parse_coordinate_pair_sequence();
parser.parse_whitespace();
if (!parser.done())
return {};
// FIXME: This is awkward. Can we return Gfx::FloatPoints from some of these parsing methods instead of Vector<float>?
Vector<Gfx::FloatPoint> points;
points.ensure_capacity(coordinate_pair_sequence.size());
for (auto const& pair : coordinate_pair_sequence)
points.empend(pair[0], pair[1]);
return points;
}
void AttributeParser::parse_drawto() void AttributeParser::parse_drawto()
{ {
if (match('M') || match('m')) { if (match('M') || match('m')) {

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

@ -9,6 +9,7 @@
#include <AK/String.h> #include <AK/String.h>
#include <AK/Vector.h> #include <AK/Vector.h>
#include <LibGfx/Point.h>
namespace Web::SVG { namespace Web::SVG {
@ -42,6 +43,7 @@ public:
static Optional<float> parse_coordinate(StringView input); static Optional<float> parse_coordinate(StringView input);
static Optional<float> parse_length(StringView input); static Optional<float> parse_length(StringView input);
static Optional<float> parse_positive_length(StringView input); static Optional<float> parse_positive_length(StringView input);
static Vector<Gfx::FloatPoint> parse_points(StringView input);
private: private:
void parse_drawto(); void parse_drawto();

51
Userland/Libraries/LibWeb/SVG/SVGPolylineElement.cpp Normal file
View file

@ -0,0 +1,51 @@
/*
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "SVGPolylineElement.h"
#include <LibWeb/SVG/AttributeNames.h>
#include <LibWeb/SVG/AttributeParser.h>
namespace Web::SVG {
SVGPolylineElement::SVGPolylineElement(DOM::Document& document, QualifiedName qualified_name)
: SVGGeometryElement(document, qualified_name)
{
}
void SVGPolylineElement::parse_attribute(FlyString const& name, String const& value)
{
SVGGeometryElement::parse_attribute(name, value);
if (name == SVG::AttributeNames::points) {
m_points = AttributeParser::parse_points(value);
m_path.clear();
}
}
Gfx::Path& SVGPolylineElement::get_path()
{
if (m_path.has_value())
return m_path.value();
Gfx::Path path;
if (m_points.is_empty()) {
m_path = move(path);
return m_path.value();
}
// 1. perform an absolute moveto operation to the first coordinate pair in the list of points
path.move_to(m_points.first());
// 2. for each subsequent coordinate pair, perform an absolute lineto operation to that coordinate pair.
for (size_t point_index = 1; point_index < m_points.size(); ++point_index)
path.line_to(m_points[point_index]);
m_path = move(path);
return m_path.value();
}
}

30
Userland/Libraries/LibWeb/SVG/SVGPolylineElement.h Normal file
View file

@ -0,0 +1,30 @@
/*
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/SVG/SVGGeometryElement.h>
namespace Web::SVG {
class SVGPolylineElement final : public SVGGeometryElement {
public:
using WrapperType = Bindings::SVGPolylineElementWrapper;
SVGPolylineElement(DOM::Document&, QualifiedName);
virtual ~SVGPolylineElement() override = default;
virtual void parse_attribute(FlyString const& name, String const& value) override;
virtual Gfx::Path& get_path() override;
private:
Optional<Gfx::Path> m_path;
Vector<Gfx::FloatPoint> m_points;
};
}

5
Userland/Libraries/LibWeb/SVG/SVGPolylineElement.idl Normal file
View file

@ -0,0 +1,5 @@
[Exposed=Window]
interface SVGPolylineElement : SVGGeometryElement {
};
// SVGPolylineElement includes SVGAnimatedPoints;

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

@ -16,6 +16,7 @@ namespace Web::SVG::TagNames {
__ENUMERATE_SVG_TAG(g) \ __ENUMERATE_SVG_TAG(g) \
__ENUMERATE_SVG_TAG(line) \ __ENUMERATE_SVG_TAG(line) \
__ENUMERATE_SVG_TAG(path) \ __ENUMERATE_SVG_TAG(path) \
__ENUMERATE_SVG_TAG(polyline) \
__ENUMERATE_SVG_TAG(rect) \ __ENUMERATE_SVG_TAG(rect) \
__ENUMERATE_SVG_TAG(svg) __ENUMERATE_SVG_TAG(svg)