ladybird/Tests/LibWeb/Layout/input/svg/objectBoundingBox-mask.html
MacDue 163b6bb401 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.
2024-03-12 08:51:50 +01:00

9 lines
411 B
HTML

<!DOCTYPE html>
<svg width="400" height="400">
<mask id="myMask" maskContentUnits="objectBoundingBox">
<rect x="0" y="0" width="1" height="1" fill="white"/>
<circle cx="0.5" cy="0.5" r="0.4" fill="black"/>
</mask>
<rect x="0" y="0" width="200" height="200" fill="green" mask="url(#myMask)"/>
<rect x="200" y="200" width="200" height="100" fill="red" mask="url(#myMask)"/>
</svg>