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

LibWeb: Add initial support for nesting SVG viewports

Browse source 
Previously, we were handling viewBoxes/viewports in a slightly hacky
way, asking graphics elements to figure out what viewBox to use during
layout. This does not work in all cases, and can't allow for more
complex SVGs where it is possible to have nested viewports.

This commit makes the SVGFormattingContext keep track of the
viewport/boxes, and it now lays out each viewport recursively, where
each nested `<svg>` or `<symbol>` can establish a new viewport.

This fixes some previous edge cases, and starts to allow nested
viewports (there's still some issues to resolve there).

Fixes #22931
This commit is contained in:
MacDue 2024-01-27 16:23:22 +00:00 • committed by Andreas Kling
parent 546143e9a6
commit 5cf1570f40
13 changed files with 229 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Tests/LibWeb/Layout/expected/svg/nested-viewports.txt Normal file
View file

@ -0,0 +1,26 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [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#a> at (8,8) content-size 200x200 [SVG] children: inline
TextNode <#text>
SVGSVGBox <svg#b> at (8,8) content-size 200x200 [SVG] children: inline
TextNode <#text>
SVGSVGBox <svg#c> at (8,8) content-size 266.671875x266.671875 [SVG] children: inline
TextNode <#text>
SVGGeometryBox <rect> at (34.671875,34.671875) content-size 266.671875x266.671875 children: not-inline
TextNode <#text>
SVGGeometryBox <rect> at (34.671875,34.671875) content-size 133.328125x133.328125 children: not-inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
SVGSVGPaintable (SVGSVGBox<svg>#a) [8,8 200x200]
SVGSVGPaintable (SVGSVGBox<svg>#b) [8,8 200x200]
SVGSVGPaintable (SVGSVGBox<svg>#c) [8,8 266.671875x266.671875]
SVGPathPaintable (SVGGeometryBox<rect>) [34.671875,34.671875 266.671875x266.671875]
SVGPathPaintable (SVGGeometryBox<rect>) [34.671875,34.671875 133.328125x133.328125]

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>
Box <use> at (8,8) content-size 215.625x130.90625 children: inline
Box <use> at (8,8) content-size 300x150 children: inline
Box <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]
PaintableBox (Box<use>) [8,8 215.625x130.90625]
PaintableBox (Box<use>) [8,8 300x150]
PaintableBox (Box<symbol>#braces) [92.375,26.75 131.25x112.15625]
SVGPathPaintable (SVGGeometryBox<path>) [92.375,26.75 131.25x112.15625]

21
Tests/LibWeb/Layout/expected/svg/use-honor-outer-viewBox.txt Normal file
View file

@ -0,0 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x118 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x102 children: inline
frag 0 from SVGSVGBox start: 0, length: 0, rect: [9,9 100x100] baseline: 102
SVGSVGBox <svg#outer> at (9,9) content-size 100x100 [SVG] children: inline
TextNode <#text>
Box <use> at (9,9) content-size 100x100 children: inline
SVGSVGBox <svg#whee> at (9,9) content-size 100x100 [SVG] children: inline
TextNode <#text>
SVGGeometryBox <rect> at (9,9) content-size 50x50 children: inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x118]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x102]
SVGSVGPaintable (SVGSVGBox<svg>#outer) [8,8 102x102]
PaintableBox (Box<use>) [9,9 100x100]
SVGSVGPaintable (SVGSVGBox<svg>#whee) [9,9 100x100]
SVGPathPaintable (SVGGeometryBox<rect>) [9,9 50x50]

8
Tests/LibWeb/Layout/input/svg/nested-viewports.html Normal file
View file

@ -0,0 +1,8 @@
<svg id="a" viewBox="0 0 10 10" width="200" height="200">
<svg id="b" viewBox="0 0 6 6">
<svg id="c" viewBox="-1 -1 10 10" width="8" height="8">
<rect x="0" y="0" width="10" height="10" fill="red"></rect>
<rect x="0" y="0" width="5" height="5" fill="blue"></rect>
</svg>
</svg>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 309 B

12
Tests/LibWeb/Layout/input/svg/use-honor-outer-viewBox.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html><style>
#outer { width: 100px; }
svg { border: 1px solid black; }
</style>
<svg id="outer" viewBox="0 0 10 10">
<use href="#whee"></use>
</svg>
<div style="display: none">
<svg width="10" height="10" id="whee">
<rect x="0" y="0" width="5" height="5" fill="#0062FF">
</svg>