We use cookies to ensure you get the best experience on our website
홈 탐색 도움말
가입하기 로그인
0ct0pu5
/
ladybird
1
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

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

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.
MacDue 1 년 전
부모
344eb98b3c
커밋
74b655d035
6개의 변경된 파일과 72개의 추가작업 그리고 36개의 파일을 삭제
통합 보기 변경상태 보기
  1. 1 1
      Tests/LibWeb/Layout/expected/svg/objectBoundingBox-mask.txt
  2. 13 0
      Tests/LibWeb/Layout/expected/svg/svg-circle-percentage-attr.txt
  3. 6 0
      Tests/LibWeb/Layout/input/svg/svg-circle-percentage-attr.html
  4. 43 30
      Userland/Libraries/LibWeb/SVG/SVGCircleElement.cpp
  5. 1 5
      Userland/Libraries/LibWeb/SVG/SVGCircleElement.h
  6. 8 0
      Userland/Libraries/LibWeb/SVG/SVGViewport.h

+ 1 - 1
Tests/LibWeb/Layout/expected/svg/objectBoundingBox-mask.txt
파일 보기 

@@ -8,7 +8,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
           TextNode <#text>
 
           TextNode <#text>
 
           SVGGeometryBox <rect> at (8,8) content-size 1x1 children: not-inline
 
           SVGGeometryBox <rect> at (8,8) content-size 1x1 children: not-inline
 
           TextNode <#text>
 
           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>
 
         TextNode <#text>
 
         TextNode <#text>
 
         SVGGeometryBox <rect> at (8,8) content-size 200x200 children: not-inline
 
         SVGGeometryBox <rect> at (8,8) content-size 200x200 children: not-inline

+ 13 - 0
Tests/LibWeb/Layout/expected/svg/svg-circle-percentage-attr.txt
파일 보기 

@@ -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 - 0
Tests/LibWeb/Layout/input/svg/svg-circle-percentage-attr.html
파일 보기 

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

+ 43 - 30
Userland/Libraries/LibWeb/SVG/SVGCircleElement.cpp
파일 보기 

@@ -5,9 +5,12 @@
 
  */
 
  */
 
 
 
 #include <LibWeb/Bindings/Intrinsics.h>
 
 #include <LibWeb/Bindings/Intrinsics.h>
 
+#include <LibWeb/CSS/Parser/Parser.h>
 
+#include <LibWeb/Layout/Node.h>
 
 #include <LibWeb/SVG/AttributeNames.h>
 
 #include <LibWeb/SVG/AttributeNames.h>
 
 #include <LibWeb/SVG/AttributeParser.h>
 
 #include <LibWeb/SVG/AttributeParser.h>
 
 #include <LibWeb/SVG/SVGCircleElement.h>
 
 #include <LibWeb/SVG/SVGCircleElement.h>
 
+#include <LibWeb/SVG/SVGViewport.h>
 
 
 
 namespace Web::SVG {
 
 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));
 
     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);
 
-
 
-    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();
 
-    }
 
+    Base::apply_presentational_hints(style);
 
+    auto parsing_context = CSS::Parser::ParsingContext { document(), CSS::Parser::ParsingContext::Mode::SVGPresentationAttribute };
 
+
 
+    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)
 
 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.
 
     // A zero radius disables rendering.
 
     if (r == 0)
 
     if (r == 0)
 
         return {};
 
         return {};
 
 
 
+    Gfx::Path path;
 
     bool large_arc = false;
 
     bool large_arc = false;
 
     bool sweep = true;
 
     bool sweep = true;
 
 
 
@@ -76,31 +83,37 @@ Gfx::Path SVGCircleElement::get_path(CSSPixelSize viewport_size)
 
 // https://www.w3.org/TR/SVG11/shapes.html#CircleElementCXAttribute
 
 // https://www.w3.org/TR/SVG11/shapes.html#CircleElementCXAttribute
 
 JS::NonnullGCPtr<SVGAnimatedLength> SVGCircleElement::cx() const
 
 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.
 
     // 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
 
 // https://www.w3.org/TR/SVG11/shapes.html#CircleElementCYAttribute
 
 JS::NonnullGCPtr<SVGAnimatedLength> SVGCircleElement::cy() const
 
 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.
 
     // 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
 
 // https://www.w3.org/TR/SVG11/shapes.html#CircleElementRAttribute
 
 JS::NonnullGCPtr<SVGAnimatedLength> SVGCircleElement::r() const
 
 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.
 
     // 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());
 
 }
 
 }
 
 
 
 }
 
 }

+ 1 - 5
Userland/Libraries/LibWeb/SVG/SVGCircleElement.h
파일 보기 

@@ -18,7 +18,7 @@ class SVGCircleElement final : public SVGGeometryElement {
 
 public:
 
 public:
 
     virtual ~SVGCircleElement() override = default;
 
     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;
 
     virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
 
 
 
@@ -30,10 +30,6 @@ private:
 
     SVGCircleElement(DOM::Document&, DOM::QualifiedName);
 
     SVGCircleElement(DOM::Document&, DOM::QualifiedName);
 
 
 
     virtual void initialize(JS::Realm&) override;
 
     virtual void initialize(JS::Realm&) override;
 
-
 
-    Optional<float> m_center_x;
 
-    Optional<float> m_center_y;
 
-    Optional<float> m_radius;
 
 };
 
 };
 
 
 
 }
 
 }

+ 8 - 0
Userland/Libraries/LibWeb/SVG/SVGViewport.h
파일 보기 

@@ -6,6 +6,7 @@
 
 
 
 #pragma once
 
 #pragma once
 
 
 
+#include <AK/Math.h>
 
 #include <LibWeb/SVG/AttributeParser.h>
 
 #include <LibWeb/SVG/AttributeParser.h>
 
 #include <LibWeb/SVG/ViewBox.h>
 
 #include <LibWeb/SVG/ViewBox.h>
 
 
 
@@ -18,4 +19,11 @@ public:
 
     virtual ~SVGViewport() = default;
 
     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>);
 
+}
 
+
 
 }
 
 }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5