Explorar el Código

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

Sam Atkins hace 3 años
padre
commit
1dde6a0a2b

+ 8 - 1
Base/res/html/misc/svg.html

@@ -11,7 +11,7 @@
     </style>
 </head>
 <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 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>
@@ -40,6 +40,13 @@
                  a 10,30 20 0,1 30,10 l 30,10
                  a 10,40 20 0,1 30,10 l 30,10 z"></path>
     </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>
 </body>
 </html>

+ 4 - 0
Userland/Libraries/LibWeb/Bindings/NodeWrapperFactory.cpp

@@ -83,6 +83,7 @@
 #include <LibWeb/Bindings/NodeWrapper.h>
 #include <LibWeb/Bindings/NodeWrapperFactory.h>
 #include <LibWeb/Bindings/SVGPathElementWrapper.h>
+#include <LibWeb/Bindings/SVGRectElementWrapper.h>
 #include <LibWeb/Bindings/SVGSVGElementWrapper.h>
 #include <LibWeb/Bindings/TextWrapper.h>
 #include <LibWeb/DOM/Document.h>
@@ -157,6 +158,7 @@
 #include <LibWeb/HTML/HTMLUnknownElement.h>
 #include <LibWeb/HTML/HTMLVideoElement.h>
 #include <LibWeb/SVG/SVGPathElement.h>
+#include <LibWeb/SVG/SVGRectElement.h>
 #include <LibWeb/SVG/SVGSVGElement.h>
 
 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)));
     if (is<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))
         return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<DOM::Element>(node)));
     if (is<DOM::DocumentFragment>(node))

+ 3 - 0
Userland/Libraries/LibWeb/Bindings/WindowObjectHelper.h

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

+ 2 - 0
Userland/Libraries/LibWeb/CMakeLists.txt

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

+ 3 - 0
Userland/Libraries/LibWeb/DOM/ElementFactory.cpp

@@ -78,6 +78,7 @@
 #include <LibWeb/HTML/HTMLVideoElement.h>
 #include <LibWeb/SVG/SVGGElement.h>
 #include <LibWeb/SVG/SVGPathElement.h>
+#include <LibWeb/SVG/SVGRectElement.h>
 #include <LibWeb/SVG/SVGSVGElement.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)));
     if (lowercase_tag_name == SVG::TagNames::path)
         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)
         return adopt_ref(*new SVG::SVGGElement(document, move(qualified_name)));
 

+ 2 - 0
Userland/Libraries/LibWeb/Forward.h

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

+ 2 - 0
Userland/Libraries/LibWeb/SVG/AttributeNames.h

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

+ 153 - 0
Userland/Libraries/LibWeb/SVG/SVGRectElement.cpp

@@ -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 - 0
Userland/Libraries/LibWeb/SVG/SVGRectElement.h

@@ -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 - 0
Userland/Libraries/LibWeb/SVG/SVGRectElement.idl

@@ -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 - 0
Userland/Libraries/LibWeb/SVG/TagNames.h

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