mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-19 15:32:31 +00:00
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.
9 lines
411 B
HTML
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>
|