LibWeb: Make SVG foreignObject establish a new stacking context

This matches the behavior of Blink and Gecko, but not WebKit.
This commit is contained in:
Andreas Kling 2025-07-06 15:00:51 +02:00 committed by Andreas Kling
commit 0cf9a4543a
Notes: github-actions[bot] 2025-07-09 12:38:21 +00:00
4 changed files with 12 additions and 1 deletions

View file

@ -236,6 +236,9 @@ bool Node::establishes_stacking_context() const
if (computed_values().mask().has_value() || computed_values().clip_path().has_value() || computed_values().mask_image())
return true;
if (is_svg_foreign_object_box())
return true;
// https://drafts.fxtf.org/compositing/#propdef-isolation
// For CSS, setting isolation to isolate will turn the element into a stacking context.
if (computed_values().isolation() == CSS::Isolation::Isolate)

View file

@ -107,6 +107,7 @@ public:
virtual bool is_svg_mask_box() const { return false; }
virtual bool is_svg_svg_box() const { return false; }
virtual bool is_svg_graphics_box() const { return false; }
virtual bool is_svg_foreign_object_box() const { return false; }
virtual bool is_label() const { return false; }
virtual bool is_replaced_box() const { return false; }
virtual bool is_list_item_box() const { return false; }

View file

@ -25,6 +25,12 @@ public:
SVG::SVGForeignObjectElement const& dom_node() const { return static_cast<SVG::SVGForeignObjectElement const&>(*BlockContainer::dom_node()); }
virtual GC::Ptr<Painting::Paintable> create_paintable() const override;
private:
virtual bool is_svg_foreign_object_box() const override { return true; }
};
template<>
inline bool Node::fast_is<SVGForeignObjectBox>() const { return is_svg_foreign_object_box(); }
}

View file

@ -18,4 +18,5 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
TextPaintable (TextNode<#text>)
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x116] [children: 0] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x116] [children: 1] (z-index: auto)
SC for SVGForeignObjectBox<foreignObject> [8,8 100x100] [children: 0] (z-index: auto)