RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 16:27:35 +00:00
Code Issues Activity Actions

LibWeb: Special case SVG masks during layout

Browse source 
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:
MacDue 2024-03-11 18:26:58 +00:00 • committed by Andreas Kling
parent 15e3b0ebde
commit 163b6bb401
18 changed files with 232 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Tests/LibWeb/Layout/input/svg/objectBoundingBox-mask.html
View file

@ -1,8 +1,9 @@
<!DOCTYPE html>
<svg width="200" height="200">
<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>