script: support inline SVG by serializing the subtree

This patch adds support for rendering static inline SVG documents in the
DOM tree by serializing the SVGElement's subtree and leveraging the
existing resvg based SVG stack for rendering. Serialiing the subtree is
necessary as resvg's tree representation (roxmltree) is immutable, so we
can't construct the tree incrementally.

Few other design choices here:
1. The `SVGSVGElement` is now treated as a replaced element and the
   layout code is responsible for plumbing the serialized SVG source
   (encoded as a base64 data: url) into the image cache, much like how
   background images are handled.
2. The serialization is done on the script thread after an initial
   layout pass. This is necessary because the serialization code asserts
   that it is invoked from script thread i.e we can't call it from layout
   workers.
3. The serialized SVG data: url is cached to avoid recomputing it on
   subsequent layouts. The cache is invalidated when the SVGSVGElement's
   subtree is mutated.

The original SVGSVGElement code was behind the `dom_svg_enabled` pref.
This patch doesn't change that, so the inline SVG rendering will need
the pref to be enabled as well. Given this is patch still doesn't add
"native" SVG support, it makes sense to still keep it behind the pref,
but this can be discussed.

Signed-off-by: Mukilan Thiyagarajan <[email protected]>

Author: mukilan

components/layout/context.rs

@@ -4,6 +4,7 @@
 
 use std::sync::Arc;
 
+use embedder_traits::UntrustedNodeAddress;
 use euclid::Size2D;
 use fnv::FnvHashMap;
 use fonts::FontContext;
@@ -19,7 +20,7 @@ use parking_lot::{Mutex, RwLock};
 use pixels::RasterImage;
 use servo_url::{ImmutableOrigin, ServoUrl};
 use style::context::SharedStyleContext;
-use style::dom::OpaqueNode;
+use style::dom::{OpaqueNode, TNode};
 use style::values::computed::image::{Gradient, Image};
 use webrender_api::units::{DeviceIntSize, DeviceSize};
 
@@ -86,6 +87,13 @@ pub(crate) struct ImageResolver {
     /// size determined by layout. This will be shared with the script thread.
     pub pending_rasterization_images: Mutex<Vec<PendingRasterizationImage>>,
 
+    /// A list of `SVGSVGElement`s encountered during layout that are not
+    /// serialized yet. This is needed to support inline SVGs as they are treated
+    /// as replaced elements and the layout is responsible for triggering the
+    /// network load for the corresponding serialzed data: urls (similar to
+    /// background images).
+    pub pending_svg_elements_for_serialization: Mutex<Vec<UntrustedNodeAddress>>,
+
     /// A shared reference to script's map of DOM nodes with animated images. This is used
     /// to manage image animations in script and inform the script about newly animating
     /// nodes.
@@ -105,6 +113,11 @@ impl Drop for ImageResolver {
         if !std::thread::panicking() {
             assert!(self.pending_images.lock().is_empty());
             assert!(self.pending_rasterization_images.lock().is_empty());
+            assert!(
+                self.pending_svg_elements_for_serialization
+                    .lock()
+                    .is_empty()
+            );
         }
     }
 }
@@ -174,7 +187,7 @@ impl ImageResolver {
         }
     }
 
-    fn get_cached_image_for_url(
+    pub(crate) fn get_cached_image_for_url(
         &self,
         node: OpaqueNode,
         url: ServoUrl,
@@ -234,6 +247,15 @@ impl ImageResolver {
         result
     }
 
+    pub(crate) fn queue_svg_element_for_serialization(
+        &self,
+        element: script::layout_dom::ServoLayoutNode<'_>,
+    ) {
+        self.pending_svg_elements_for_serialization
+            .lock()
+            .push(element.opaque().into())
+    }
+
     pub(crate) fn resolve_image<'a>(
         &self,
         node: Option<OpaqueNode>,

components/layout/dom.rs

@@ -12,7 +12,8 @@ use layout_api::wrapper_traits::{
     LayoutDataTrait, LayoutNode, ThreadSafeLayoutElement, ThreadSafeLayoutNode,
 };
 use layout_api::{
-    GenericLayoutDataTrait, LayoutDamage, LayoutElementType, LayoutNodeType as ScriptLayoutNodeType,
+    GenericLayoutDataTrait, LayoutDamage, LayoutElementType,
+    LayoutNodeType as ScriptLayoutNodeType, SVGElementData,
 };
 use malloc_size_of_derive::MallocSizeOf;
 use net_traits::image_cache::Image;
@@ -232,6 +233,7 @@ pub(crate) trait NodeExt<'dom> {
     fn as_canvas(&self) -> Option<(CanvasInfo, PhysicalSize<f64>)>;
     fn as_iframe(&self) -> Option<(PipelineId, BrowsingContextId)>;
     fn as_video(&self) -> Option<(Option<webrender_api::ImageKey>, Option<PhysicalSize<f64>>)>;
+    fn as_svg(&self) -> Option<SVGElementData>;
     fn as_typeless_object_with_data_attribute(&self) -> Option<String>;
     fn style(&self, context: &SharedStyleContext) -> ServoArc<ComputedValues>;
 
@@ -273,6 +275,11 @@ impl<'dom> NodeExt<'dom> for ServoLayoutNode<'dom> {
         Some((resource, PhysicalSize::new(width, height)))
     }
 
+    fn as_svg(&self) -> Option<SVGElementData> {
+        let node = self.to_threadsafe();
+        node.svg_data()
+    }
+
     fn as_video(&self) -> Option<(Option<webrender_api::ImageKey>, Option<PhysicalSize<f64>>)> {
         let node = self.to_threadsafe();
         let data = node.media_data()?;

components/layout/layout_impl.rs

@@ -660,6 +660,7 @@ impl LayoutThread {
             resolved_images_cache: self.resolved_images_cache.clone(),
             pending_images: Mutex::default(),
             pending_rasterization_images: Mutex::default(),
+            pending_svg_elements_for_serialization: Mutex::default(),
             node_to_animating_image_map: reflow_request.node_to_animating_image_map.clone(),
             animation_timeline_value: reflow_request.animation_timeline_value,
         });
@@ -682,11 +683,14 @@ impl LayoutThread {
         let pending_images = std::mem::take(&mut *image_resolver.pending_images.lock());
         let pending_rasterization_images =
             std::mem::take(&mut *image_resolver.pending_rasterization_images.lock());
+        let pending_svg_elements_for_serialization =
+            std::mem::take(&mut *image_resolver.pending_svg_elements_for_serialization.lock());
 
         Some(ReflowResult {
             built_display_list,
             pending_images,
             pending_rasterization_images,
+            pending_svg_elements_for_serialization,
             iframe_sizes,
         })
     }

components/layout/replaced.rs

@@ -9,7 +9,7 @@ use embedder_traits::ViewportDetails;
 use euclid::{Scale, Size2D};
 use layout_api::IFrameSize;
 use malloc_size_of_derive::MallocSizeOf;
-use net_traits::image_cache::{Image, ImageOrMetadataAvailable, UsePlaceholder};
+use net_traits::image_cache::{Image, ImageOrMetadataAvailable, UsePlaceholder, VectorImage};
 use script::layout_dom::ServoLayoutNode;
 use servo_arc::Arc as ServoArc;
 use style::Zero;
@@ -115,6 +115,7 @@ pub(crate) enum ReplacedContentKind {
     IFrame(IFrameInfo),
     Canvas(CanvasInfo),
     Video(Option<VideoInfo>),
+    SVGElement(VectorImage),
 }
 
 impl ReplacedContents {
@@ -153,6 +154,31 @@ impl ReplacedContents {
                     ReplacedContentKind::Video(image_key.map(|key| VideoInfo { image_key: key })),
                     natural_size_in_dots,
                 )
+            } else if let Some(svg_data) = element.as_svg() {
+                let Some(svg_source) = svg_data.source else {
+                    // If the SVGSVGElement is not yet serialized, we add it to a list
+                    // and hand it over to script to peform the serialization.
+                    context
+                        .image_resolver
+                        .queue_svg_element_for_serialization(element);
+                    return None;
+                };
+                let result = context
+                    .image_resolver
+                    .get_cached_image_for_url(element.opaque(), svg_source, UsePlaceholder::No)
+                    .ok()?;
+
+                let Image::Vector(vector_image) = result else {
+                    unreachable!("SVG element can't contain a raster image.")
+                };
+                let physical_size = PhysicalSize::new(
+                    vector_image.metadata.width as f64,
+                    vector_image.metadata.height as f64,
+                );
+                (
+                    ReplacedContentKind::SVGElement(vector_image),
+                    Some(physical_size),
+                )
             } else {
                 return None;
             }
@@ -390,6 +416,28 @@ impl ReplacedContents {
                     image_key: Some(image_key),
                 }))]
             },
+            ReplacedContentKind::SVGElement(vector_image) => {
+                let scale = layout_context.style_context.device_pixel_ratio();
+                let width = object_fit_size.width.scale_by(scale.0).to_px();
+                let height = object_fit_size.height.scale_by(scale.0).to_px();
+                let size = Size2D::new(width, height);
+                let tag = self.base_fragment_info.tag.unwrap();
+                layout_context
+                    .image_resolver
+                    .rasterize_vector_image(vector_image.id, size, tag.node)
+                    .and_then(|i| i.id)
+                    .map(|image_key| {
+                        Fragment::Image(ArcRefCell::new(ImageFragment {
+                            base: self.base_fragment_info.into(),
+                            style: style.clone(),
+                            rect,
+                            clip,
+                            image_key: Some(image_key),
+                        }))
+                    })
+                    .into_iter()
+                    .collect()
+            },
         }
     }
 

components/script/dom/node.rs

@@ -27,7 +27,7 @@ use js::rust::HandleObject;
 use keyboard_types::Modifiers;
 use layout_api::{
     GenericLayoutData, HTMLCanvasData, HTMLMediaData, LayoutElementType, LayoutNodeType, QueryMsg,
-    SVGSVGData, StyleData, TrustedNodeAddress,
+    SVGElementData, StyleData, TrustedNodeAddress,
 };
 use libc::{self, c_void, uintptr_t};
 use malloc_size_of::{MallocSizeOf, MallocSizeOfOps};
@@ -1680,7 +1680,7 @@ pub(crate) trait LayoutNodeHelpers<'dom> {
     fn image_data(self) -> Option<(Option<Image>, Option<ImageMetadata>)>;
     fn canvas_data(self) -> Option<HTMLCanvasData>;
     fn media_data(self) -> Option<HTMLMediaData>;
-    fn svg_data(self) -> Option<SVGSVGData>;
+    fn svg_data(self) -> Option<SVGElementData>;
     fn iframe_browsing_context_id(self) -> Option<BrowsingContextId>;
     fn iframe_pipeline_id(self) -> Option<PipelineId>;
     fn opaque(self) -> OpaqueNode;
@@ -1969,7 +1969,7 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
             .map(|media| media.data())
     }
 
-    fn svg_data(self) -> Option<SVGSVGData> {
+    fn svg_data(self) -> Option<SVGElementData> {
         self.downcast::<SVGSVGElement>().map(|svg| svg.data())
     }
 

components/script/dom/svgsvgelement.rs

@@ -2,29 +2,34 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+use std::cell::RefCell;
+
+use base64::Engine as _;
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name, ns};
+use html5ever::{LocalName, Prefix};
 use js::rust::HandleObject;
-use layout_api::SVGSVGData;
-use style::attr::AttrValue;
+use layout_api::SVGElementData;
+use servo_url::ServoUrl;
+use xml5ever::serialize::TraversalScope;
 
 use crate::dom::attr::Attr;
 use crate::dom::bindings::inheritance::Castable;
 use crate::dom::bindings::root::{DomRoot, LayoutDom};
-use crate::dom::bindings::str::DOMString;
 use crate::dom::document::Document;
-use crate::dom::element::{AttributeMutation, Element, LayoutElementHelpers};
+use crate::dom::element::AttributeMutation;
 use crate::dom::node::Node;
 use crate::dom::svggraphicselement::SVGGraphicsElement;
 use crate::dom::virtualmethods::VirtualMethods;
 use crate::script_runtime::CanGc;
 
-const DEFAULT_WIDTH: u32 = 300;
-const DEFAULT_HEIGHT: u32 = 150;
-
 #[dom_struct]
 pub(crate) struct SVGSVGElement {
     svggraphicselement: SVGGraphicsElement,
+    // The XML source of subtree rooted at this SVG element, serialized into
+    // a base64 encoded `data:` url. This is cached to avoid recomputation
+    // on each layout and must be invalidated when the subtree changes.
+    #[no_trace]
+    cached_serialized_data_url: RefCell<Option<ServoUrl>>,
 }
 
 impl SVGSVGElement {
@@ -35,6 +40,7 @@ impl SVGSVGElement {
     ) -> SVGSVGElement {
         SVGSVGElement {
             svggraphicselement: SVGGraphicsElement::new_inherited(local_name, prefix, document),
+            cached_serialized_data_url: Default::default(),
         }
     }
 
@@ -53,23 +59,37 @@ impl SVGSVGElement {
             can_gc,
         )
     }
+
+    pub(crate) fn serialize_and_cache_subtree(&self) {
+        let xml_source: String = self
+            .upcast::<Node>()
+            .xml_serialize(TraversalScope::IncludeNode)
+            .into();
+        let base64_encoded_source = base64::engine::general_purpose::STANDARD.encode(xml_source);
+        let data_url = format!("data:image/svg+xml;base64,{}", base64_encoded_source);
+        match ServoUrl::parse(&data_url) {
+            Ok(url) => *self.cached_serialized_data_url.borrow_mut() = Some(url),
+            Err(error) => error!("Unable to parse serialized SVG data url: {error}"),
+        };
+    }
+
+    fn invalidate_cached_serialized_subtree(&self) {
+        *self.cached_serialized_data_url.borrow_mut() = None;
+    }
 }
 
 pub(crate) trait LayoutSVGSVGElementHelpers {
-    fn data(self) -> SVGSVGData;
+    fn data(self) -> SVGElementData;
 }
 
 impl LayoutSVGSVGElementHelpers for LayoutDom<'_, SVGSVGElement> {
-    fn data(self) -> SVGSVGData {
-        let width_attr = self
-            .upcast::<Element>()
-            .get_attr_for_layout(&ns!(), &local_name!("width"));
-        let height_attr = self
-            .upcast::<Element>()
-            .get_attr_for_layout(&ns!(), &local_name!("height"));
-        SVGSVGData {
-            width: width_attr.map_or(DEFAULT_WIDTH, |val| val.as_uint()),
-            height: height_attr.map_or(DEFAULT_HEIGHT, |val| val.as_uint()),
+    fn data(self) -> SVGElementData {
+        SVGElementData {
+            source: self
+                .unsafe_get()
+                .cached_serialized_data_url
+                .borrow()
+                .clone(),
         }
     }
 }
@@ -83,16 +103,15 @@ impl VirtualMethods for SVGSVGElement {
         self.super_type()
             .unwrap()
             .attribute_mutated(attr, mutation, can_gc);
+
+        self.invalidate_cached_serialized_subtree();
     }
 
-    fn parse_plain_attribute(&self, name: &LocalName, value: DOMString) -> AttrValue {
-        match *name {
-            local_name!("width") => AttrValue::from_u32(value.into(), DEFAULT_WIDTH),
-            local_name!("height") => AttrValue::from_u32(value.into(), DEFAULT_HEIGHT),
-            _ => self
-                .super_type()
-                .unwrap()
-                .parse_plain_attribute(name, value),
+    fn children_changed(&self, mutation: &super::node::ChildrenMutation) {
+        if let Some(super_type) = self.super_type() {
+            super_type.children_changed(mutation);
         }
+
+        self.invalidate_cached_serialized_subtree();
     }
 }

components/script/dom/window.rs

@@ -33,8 +33,8 @@ use dom_struct::dom_struct;
 use embedder_traits::user_content_manager::{UserContentManager, UserScript};
 use embedder_traits::{
     AlertResponse, ConfirmResponse, EmbedderMsg, GamepadEvent, GamepadSupportedHapticEffects,
-    GamepadUpdateType, PromptResponse, SimpleDialog, Theme, ViewportDetails, WebDriverJSError,
-    WebDriverJSResult,
+    GamepadUpdateType, PromptResponse, SimpleDialog, Theme, UntrustedNodeAddress, ViewportDetails,
+    WebDriverJSError, WebDriverJSResult,
 };
 use euclid::default::{Point2D as UntypedPoint2D, Rect as UntypedRect, Size2D as UntypedSize2D};
 use euclid::{Point2D, Scale, Size2D, Vector2D};
@@ -92,6 +92,7 @@ use webrender_api::units::{DeviceIntSize, DevicePixel, LayoutPixel};
 
 use super::bindings::codegen::Bindings::MessagePortBinding::StructuredSerializeOptions;
 use super::bindings::trace::HashMapTracedValues;
+use super::types::SVGSVGElement;
 use crate::dom::bindings::cell::{DomRefCell, Ref};
 use crate::dom::bindings::codegen::Bindings::DocumentBinding::{
     DocumentMethods, DocumentReadyState, NamedPropertyValue,
@@ -2258,6 +2259,7 @@ impl Window {
         self.handle_pending_images_post_reflow(
             results.pending_images,
             results.pending_rasterization_images,
+            results.pending_svg_elements_for_serialization,
         );
         document
             .iframes_mut()
@@ -2989,6 +2991,7 @@ impl Window {
         &self,
         pending_images: Vec<PendingImage>,
         pending_rasterization_images: Vec<PendingRasterizationImage>,
+        pending_svg_element_for_serialization: Vec<UntrustedNodeAddress>,
     ) {
         let pipeline_id = self.pipeline_id();
         for image in pending_images {
@@ -3037,6 +3040,13 @@ impl Window {
                 nodes.push(Dom::from_ref(&*node));
             }
         }
+
+        for node in pending_svg_element_for_serialization.into_iter() {
+            let node = unsafe { from_untrusted_node_address(node) };
+            let svg = node.downcast::<SVGSVGElement>().unwrap();
+            svg.serialize_and_cache_subtree();
+            node.dirty(NodeDamage::Other);
+        }
     }
 }