1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 16:27: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:
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

View file

@ -1,22 +1,31 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x216 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x200 children: inline
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 200x200] baseline: 200
SVGSVGBox <svg> at (8,8) content-size 200x200 [SVG] children: inline
BlockContainer <html> at (0,0) content-size 800x416 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x400 children: inline
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 400x400] baseline: 400
SVGSVGBox <svg> at (8,8) content-size 400x400 [SVG] children: inline
TextNode <#text>
SVGGraphicsBox <mask#myMask> at (8,8) content-size 1x1 children: inline
TextNode <#text>
SVGGeometryBox <rect> at (8,8) content-size 1x1 children: not-inline
TextNode <#text>
SVGGeometryBox <circle> at (8.09375,8.09375) content-size 0.8125x0.8125 children: not-inline
TextNode <#text>
TextNode <#text>
SVGGeometryBox <rect> at (8,8) content-size 200x200 children: not-inline
SVGMaskBox <mask#myMask> at (8,8) content-size 200x200 children: inline
TextNode <#text>
SVGGeometryBox <rect> at (8,8) content-size 200x200 children: not-inline
TextNode <#text>
SVGGeometryBox <circle> at (26.75,26.75) content-size 162.5x162.5 children: not-inline
TextNode <#text>
TextNode <#text>
SVGGeometryBox <rect> at (208,208) content-size 200x100 children: not-inline
SVGMaskBox <mask#myMask> at (208,208) content-size 200x100 children: inline
TextNode <#text>
SVGGeometryBox <rect> at (208,208) content-size 200x100 children: not-inline
TextNode <#text>
SVGGeometryBox <circle> at (226.75,217.375) content-size 162.5x81.25 children: not-inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x216]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 200x200]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x416]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x400]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 400x400]
SVGPathPaintable (SVGGeometryBox<rect>) [8,8 200x200]
SVGPathPaintable (SVGGeometryBox<rect>) [208,208 200x100]

View file

@ -9,7 +9,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
SVGSVGBox <svg> at (8,8) content-size 300x150 [SVG] children: inline
TextNode <#text>
SVGGraphicsBox <use> at (92.375,26.75) content-size 131.25x112.15625 children: not-inline
SVGGraphicsBox <use> at (8,8) content-size 300x150 children: not-inline
SVGGraphicsBox <symbol#braces> at (92.375,26.75) content-size 131.25x112.15625 [BFC] children: inline
TextNode <#text>
SVGGeometryBox <path> at (92.375,26.75) content-size 131.25x112.15625 children: inline
@ -24,6 +24,6 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>) [8,8 784x150]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x150]
SVGGraphicsPaintable (SVGGraphicsBox<use>) [92.375,26.75 131.25x112.15625]
SVGGraphicsPaintable (SVGGraphicsBox<use>) [8,8 300x150]
SVGGraphicsPaintable (SVGGraphicsBox<symbol>#braces) [92.375,26.75 131.25x112.15625]
SVGPathPaintable (SVGGeometryBox<path>) [92.375,26.75 131.25x112.15625]

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>