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

35
Tests/LibWeb/Layout/expected/svg/objectBoundingBox-mask.txt
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]

4
Tests/LibWeb/Layout/expected/svg/svg-symbol-with-viewbox.txt
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]

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>