mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 06:47:35 +00:00
LibWeb: Special case SVG masks during layout
Rather than try to lay out masks normally, this updates the TreeBuilder to create layout nodes for masks as a child of their user (i.e. the masked element). This allows each use of a mask to be laid out differently, which makes supporting `maskContentUnits=objectBoundingBox` fairly easy. The `SVGFormattingContext` is then updated to lay out masks last (as their sizing may depend on their parent), and treats them like viewports. This is pretty ad-hoc, but the SVG specification does not give any guidance on how to actually implement this.
This commit is contained in:
parent
15e3b0ebde
commit
163b6bb401
18 changed files with 232 additions and 76 deletions
|
@ -14,6 +14,7 @@
|
|||
#include <LibWeb/Layout/BlockFormattingContext.h>
|
||||
#include <LibWeb/Layout/SVGFormattingContext.h>
|
||||
#include <LibWeb/Layout/SVGGeometryBox.h>
|
||||
#include <LibWeb/Layout/SVGMaskBox.h>
|
||||
#include <LibWeb/Layout/SVGSVGBox.h>
|
||||
#include <LibWeb/Layout/SVGTextBox.h>
|
||||
#include <LibWeb/Layout/SVGTextPathBox.h>
|
||||
|
@ -289,6 +290,8 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
|
|||
}();
|
||||
|
||||
for_each_in_subtree(box, [&](Node const& descendant) {
|
||||
if (is<SVGMaskBox>(descendant))
|
||||
return TraversalDecision::SkipChildrenAndContinue;
|
||||
if (is<SVG::SVGViewport>(descendant.dom_node())) {
|
||||
// Layout for a nested SVG viewport.
|
||||
// https://svgwg.org/svg2-draft/coords.html#EstablishingANewSVGViewport.
|
||||
|
@ -391,14 +394,19 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
|
|||
// https://svgwg.org/svg2-draft/struct.html#Groups
|
||||
// 5.2. Grouping: the ‘g’ element
|
||||
// The ‘g’ element is a container element for grouping together related graphics elements.
|
||||
box.for_each_in_subtree_of_type<Box>([&](Box const& descendant) {
|
||||
box.for_each_in_subtree_of_type<SVGBox>([&](SVGBox const& descendant) {
|
||||
if (is_container_element(descendant)) {
|
||||
Gfx::BoundingBox<CSSPixels> bounding_box;
|
||||
descendant.for_each_in_subtree_of_type<Box>([&](Box const& child_of_svg_container) {
|
||||
auto& box_state = m_state.get(child_of_svg_container);
|
||||
for_each_in_subtree(descendant, [&](Node const& child_of_svg_container) {
|
||||
if (!is<SVGBox>(child_of_svg_container))
|
||||
return TraversalDecision::Continue;
|
||||
// Masks do not change the bounding box of their parents.
|
||||
if (is<SVGMaskBox>(child_of_svg_container))
|
||||
return TraversalDecision::SkipChildrenAndContinue;
|
||||
auto& box_state = m_state.get(static_cast<SVGBox const&>(child_of_svg_container));
|
||||
bounding_box.add_point(box_state.offset);
|
||||
bounding_box.add_point(box_state.offset.translated(box_state.content_width(), box_state.content_height()));
|
||||
return IterationDecision::Continue;
|
||||
return TraversalDecision::Continue;
|
||||
});
|
||||
|
||||
auto& box_state = m_state.get_mutable(descendant);
|
||||
|
@ -411,6 +419,28 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
|
|||
}
|
||||
return IterationDecision::Continue;
|
||||
});
|
||||
|
||||
// Lay out masks last (as their parent needs to be sized first).
|
||||
box.for_each_in_subtree_of_type<SVGMaskBox>([&](SVGMaskBox const& mask_box) {
|
||||
auto& mask_state = m_state.get_mutable(static_cast<Box const&>(mask_box));
|
||||
auto parent_viewbox_transform = viewbox_transform;
|
||||
if (mask_box.dom_node().mask_content_units() == SVG::MaskContentUnits::ObjectBoundingBox) {
|
||||
auto* masked_node = mask_box.parent();
|
||||
auto& masked_node_state = m_state.get(*masked_node);
|
||||
mask_state.set_content_width(masked_node_state.content_width());
|
||||
mask_state.set_content_height(masked_node_state.content_height());
|
||||
parent_viewbox_transform = Gfx::AffineTransform {}.translate(masked_node_state.offset.to_type<float>());
|
||||
} else {
|
||||
mask_state.set_content_width(viewport_width);
|
||||
mask_state.set_content_height(viewport_height);
|
||||
}
|
||||
// Pretend masks are a viewport so we can scale the contents depending on the `maskContentUnits`.
|
||||
SVGFormattingContext nested_context(m_state, static_cast<Box const&>(mask_box), this, parent_viewbox_transform);
|
||||
mask_state.set_has_definite_width(true);
|
||||
mask_state.set_has_definite_height(true);
|
||||
nested_context.run(static_cast<Box const&>(mask_box), layout_mode, available_space);
|
||||
return IterationDecision::Continue;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
23
Userland/Libraries/LibWeb/Layout/SVGMaskBox.cpp
Normal file
23
Userland/Libraries/LibWeb/Layout/SVGMaskBox.cpp
Normal file
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
* Copyright (c) 2024, MacDue <macdue@dueutil.tech>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include <LibWeb/Layout/SVGMaskBox.h>
|
||||
#include <LibWeb/Painting/SVGMaskPaintable.h>
|
||||
#include <LibWeb/Painting/StackingContext.h>
|
||||
|
||||
namespace Web::Layout {
|
||||
|
||||
SVGMaskBox::SVGMaskBox(DOM::Document& document, SVG::SVGMaskElement& element, NonnullRefPtr<CSS::StyleProperties> properties)
|
||||
: SVGGraphicsBox(document, element, properties)
|
||||
{
|
||||
}
|
||||
|
||||
JS::GCPtr<Painting::Paintable> SVGMaskBox::create_paintable() const
|
||||
{
|
||||
return Painting::SVGMaskPaintable::create(*this);
|
||||
}
|
||||
|
||||
}
|
28
Userland/Libraries/LibWeb/Layout/SVGMaskBox.h
Normal file
28
Userland/Libraries/LibWeb/Layout/SVGMaskBox.h
Normal file
|
@ -0,0 +1,28 @@
|
|||
/*
|
||||
* Copyright (c) 2024, MacDue <macdue@dueutil.tech>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <LibWeb/Layout/SVGGraphicsBox.h>
|
||||
#include <LibWeb/SVG/SVGElement.h>
|
||||
#include <LibWeb/SVG/SVGMaskElement.h>
|
||||
|
||||
namespace Web::Layout {
|
||||
|
||||
class SVGMaskBox : public SVGGraphicsBox {
|
||||
JS_CELL(SVGMaskBox, SVGBox);
|
||||
|
||||
public:
|
||||
SVGMaskBox(DOM::Document&, SVG::SVGMaskElement&, NonnullRefPtr<CSS::StyleProperties>);
|
||||
virtual ~SVGMaskBox() override = default;
|
||||
|
||||
SVG::SVGMaskElement& dom_node() { return verify_cast<SVG::SVGMaskElement>(SVGGraphicsBox::dom_node()); }
|
||||
SVG::SVGMaskElement const& dom_node() const { return verify_cast<SVG::SVGMaskElement>(SVGGraphicsBox::dom_node()); }
|
||||
|
||||
virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
|
||||
};
|
||||
|
||||
}
|
|
@ -26,6 +26,7 @@
|
|||
#include <LibWeb/Layout/ListItemBox.h>
|
||||
#include <LibWeb/Layout/ListItemMarkerBox.h>
|
||||
#include <LibWeb/Layout/Node.h>
|
||||
#include <LibWeb/Layout/SVGMaskBox.h>
|
||||
#include <LibWeb/Layout/TableGrid.h>
|
||||
#include <LibWeb/Layout/TableWrapper.h>
|
||||
#include <LibWeb/Layout/TextNode.h>
|
||||
|
@ -335,6 +336,12 @@ void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
|
|||
display = CSS::Display(CSS::DisplayOutside::Inline, CSS::DisplayInside::Flow);
|
||||
}
|
||||
|
||||
if (context.layout_svg_mask && is<SVG::SVGMaskElement>(dom_node)) {
|
||||
layout_node = document.heap().allocate_without_realm<Layout::SVGMaskBox>(document, static_cast<SVG::SVGMaskElement&>(dom_node), *style);
|
||||
// We're here if our parent is a use of an SVG mask, but we don't want to lay out any <mask> elements that could be a child of this mask.
|
||||
context.layout_svg_mask = false;
|
||||
}
|
||||
|
||||
if (!layout_node)
|
||||
return;
|
||||
|
||||
|
@ -389,6 +396,19 @@ void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
|
|||
pop_parent();
|
||||
}
|
||||
|
||||
if (is<SVG::SVGGraphicsElement>(dom_node)) {
|
||||
auto& graphics_element = static_cast<SVG::SVGGraphicsElement&>(dom_node);
|
||||
// Create the layout tree for the SVG mask as a child of the masked element. Note: This will create
|
||||
// a new subtree for each use of the mask (so there's not a 1-to-1 mapping from DOM node to mask
|
||||
// layout node). Each use of a mask may be laid out differently so this duplication is necessary.
|
||||
if (auto mask = graphics_element.mask()) {
|
||||
TemporaryChange<bool> layout_mask(context.layout_svg_mask, true);
|
||||
push_parent(verify_cast<NodeWithStyle>(*layout_node));
|
||||
create_layout_tree(const_cast<SVG::SVGMaskElement&>(*mask), context);
|
||||
pop_parent();
|
||||
}
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/rendering.html#button-layout
|
||||
// If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.
|
||||
if (dom_node.is_html_button_element() && dom_node.layout_node()->computed_values().width().is_auto()) {
|
||||
|
|
|
@ -23,6 +23,7 @@ public:
|
|||
private:
|
||||
struct Context {
|
||||
bool has_svg_root = false;
|
||||
bool layout_svg_mask = false;
|
||||
};
|
||||
|
||||
i32 calculate_list_item_index(DOM::Node&);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue