feat: add <circle> <ellipse> element for svg

bridge/CMakeLists.txt

@@ -361,6 +361,9 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
  core/svg/svg_rect_element.cc
  core/svg/svg_text_element.cc
  core/svg/svg_g_element.cc
+ core/svg/svg_circle_element.cc
+ core/svg/svg_ellipse_element.cc
+ core/svg/svg_style_element.cc
 
  # Legacy implements, should remove them in the future.
  core/dom/legacy/element_attributes.cc
@@ -506,6 +509,9 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
  out/qjs_svg_rect_element.cc
  out/qjs_svg_text_element.cc
  out/qjs_svg_g_element.cc
+ out/qjs_svg_circle_element.cc
+ out/qjs_svg_ellipse_element.cc
+ out/qjs_svg_style_element.cc
  )
 
 

bridge/bindings/qjs/binding_initializer.cc

@@ -70,12 +70,15 @@
 #include "qjs_pop_state_event.h"
 #include "qjs_promise_rejection_event.h"
 #include "qjs_screen.h"
+#include "qjs_svg_circle_element.h"
 #include "qjs_svg_element.h"
+#include "qjs_svg_ellipse_element.h"
 #include "qjs_svg_g_element.h"
 #include "qjs_svg_geometry_element.h"
 #include "qjs_svg_graphics_element.h"
 #include "qjs_svg_path_element.h"
 #include "qjs_svg_rect_element.h"
+#include "qjs_svg_style_element.h"
 #include "qjs_svg_svg_element.h"
 #include "qjs_svg_text_content_element.h"
 #include "qjs_svg_text_element.h"
@@ -179,6 +182,9 @@ void InstallBindings(ExecutingContext* context) {
  QJSSVGPathElement::Install(context);
  QJSSVGTextElement::Install(context);
  QJSSVGGElement::Install(context);
+ QJSSVGCircleElement::Install(context);
+ QJSSVGEllipseElement::Install(context);
+ QJSSVGStyleElement::Install(context);
 
  // Legacy bindings, not standard.
  QJSElementAttributes::Install(context);

bridge/bindings/qjs/wrapper_type_info.h

@@ -97,10 +97,13 @@ enum {
 
  JS_CLASS_SVG_RECT_ELEMENT,
  JS_CLASS_SVG_SVG_ELEMENT,
- // JS_CLASS_SVG_CIRCLE_ELEMENT,
  JS_CLASS_SVG_PATH_ELEMENT,
  JS_CLASS_SVG_TEXT_ELEMENT,
  JS_CLASS_SVG_G_ELEMENT,
+ JS_CLASS_SVG_CIRCLE_ELEMENT,
+ JS_CLASS_SVG_ELLIPSE_ELEMENT,
+ JS_CLASS_SVG_STYLE_ELEMENT,
+
  // SVG unit
  JS_CLASS_SVG_LENGTH,
  JS_CLASS_SVG_ANIMATED_LENGTH,

bridge/core/svg/svg_circle_element.cc

@@ -0,0 +1,12 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+#include "svg_circle_element.h"
+#include "svg_geometry_element.h"
+#include "svg_names.h"
+
+namespace webf {
+SVGCircleElement::SVGCircleElement(Document& document) : SVGGeometryElement(svg_names::kcircle, document) {}
+
+} // namespace webf

bridge/core/svg/svg_circle_element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+import {SVGGeometryElement} from "./svg_geometry_element";
+
+export interface SVGCircleElement extends SVGGeometryElement {
+ new(): void;
+ // TODO: add property in the future
+}

bridge/core/svg/svg_circle_element.h

@@ -0,0 +1,22 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+#ifndef BRIDGE_CORE_SVG_SVG_CIRCLE_ELEMENT_H_
+#define BRIDGE_CORE_SVG_SVG_CIRCLE_ELEMENT_H_
+
+#include "core/svg/svg_geometry_element.h"
+
+namespace webf {
+
+class SVGCircleElement : public SVGGeometryElement {
+ DEFINE_WRAPPERTYPEINFO();
+
+ public:
+ using ImplType = SVGCircleElement*;
+ explicit SVGCircleElement(Document&);
+
+ private:
+};
+} // namespace webf
+
+#endif // BRIDGE_CORE_SVG_SVG_CIRCLE_ELEMENT_H_

bridge/core/svg/svg_ellipse_element.cc

@@ -0,0 +1,12 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+#include "svg_ellipse_element.h"
+#include "svg_geometry_element.h"
+#include "svg_names.h"
+
+namespace webf {
+SVGEllipseElement::SVGEllipseElement(Document& document) : SVGGeometryElement(svg_names::kellipse, document) {}
+
+} // namespace webf

bridge/core/svg/svg_ellipse_element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+import {SVGGeometryElement} from "./svg_geometry_element";
+
+export interface SVGEllipseElement extends SVGGeometryElement {
+ new(): void;
+ // TODO: add property in the future
+}

bridge/core/svg/svg_ellipse_element.h

@@ -0,0 +1,22 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+#ifndef BRIDGE_CORE_SVG_SVG_ELLIPSE_ELEMENT_H_
+#define BRIDGE_CORE_SVG_SVG_ELLIPSE_ELEMENT_H_
+
+#include "core/svg/svg_geometry_element.h"
+
+namespace webf {
+
+class SVGEllipseElement : public SVGGeometryElement {
+ DEFINE_WRAPPERTYPEINFO();
+
+ public:
+ using ImplType = SVGEllipseElement*;
+ explicit SVGEllipseElement(Document&);
+
+ private:
+};
+} // namespace webf
+
+#endif // BRIDGE_CORE_SVG_SVG_ELLIPSE_ELEMENT_H_

bridge/core/svg/svg_style_element.cc

@@ -0,0 +1,12 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+#include "svg_style_element.h"
+#include "svg_element.h"
+#include "svg_names.h"
+
+namespace webf {
+SVGStyleElement::SVGStyleElement(Document& document) : SVGElement(svg_names::kstyle, &document) {}
+
+} // namespace webf

bridge/core/svg/svg_style_element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+import {SVGElement} from "./svg_element";
+
+export interface SVGStyleElement extends SVGElement {
+ new(): void;
+}

bridge/core/svg/svg_style_element.h

@@ -0,0 +1,22 @@
+/**
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+#ifndef BRIDGE_CORE_SVG_SVG_STYLE_ELEMENT_H_
+#define BRIDGE_CORE_SVG_SVG_STYLE_ELEMENT_H_
+
+#include "svg_element.h"
+
+namespace webf {
+
+class SVGStyleElement : public SVGElement {
+ DEFINE_WRAPPERTYPEINFO();
+
+ public:
+ using ImplType = SVGStyleElement*;
+ SVGStyleElement(Document&);
+
+ private:
+};
+} // namespace webf
+
+#endif // BRIDGE_CORE_SVG_SVG_STYLE_ELEMENT_H_

bridge/core/svg/svg_tag_names.json5

@@ -31,5 +31,8 @@
  "path",
  "text",
  "g",
+ "circle",
+ "ellipse",
+ "style"
  ]
 }

integration_tests/scripts/svg_loader.js

@@ -4,6 +4,21 @@
 const path = require('path');
 const svgo = require('svgo');
 
+function tryParseSizeNumber(size) {
+ if (!size || size.endsWith('%')) {
+ // default size
+ return 512;
+ } else if (size.endsWith('px')) {
+ return parseInt(size.slice(0, -2), 10)
+ } else {
+ const parsedSize = parseInt(size, 10)
+ if (!Number.isNaN(parsedSize)) {
+ return parsedSize
+ }
+ throw new Error(`Unknown size ${width}`)
+ }
+}
+
 const loader = function(source) {
  const filepath = this.resourcePath
  const opts = this.query || {};
@@ -16,6 +31,9 @@ const loader = function(source) {
  )
  );
 
+ let svgWidth = 512;
+ let svgHeight = 512;
+
  const output = svgo.optimize(source, {
  path: filepath,
  multipass: true,
@@ -40,6 +58,20 @@ const loader = function(source) {
  }
  }
  }
+ },
+ {
+ name: 'collectSVGSize',
+ fn: (ast, params, info) => {
+ ast.children.forEach(child => {
+ if (child.type === 'element' && child.name === 'svg') {
+ const {width, height} = child.attributes
+ svgWidth = tryParseSizeNumber(width)
+ svgHeight = tryParseSizeNumber(height)
+ }
+ })
+ return {
+ }
+ }
  }
  ]
  })
@@ -56,7 +88,7 @@ ${output.data}
  return `
  describe('SVGSpec/${testRelativePath}', () => {
  beforeEach(async () => {
- await resizeViewport(512, 512);
+ await resizeViewport(${svgWidth}, ${svgHeight});
  });
 
  afterEach(async () => {