mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 21:57:35 +00:00
LibWeb: Add initial support for nesting SVG viewports
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:
parent
546143e9a6
commit
5cf1570f40
13 changed files with 229 additions and 67 deletions
26
Tests/LibWeb/Layout/expected/svg/nested-viewports.txt
Normal file
26
Tests/LibWeb/Layout/expected/svg/nested-viewports.txt
Normal 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]
|
|
@ -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
21
Tests/LibWeb/Layout/expected/svg/use-honor-outer-viewBox.txt
Normal 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
8
Tests/LibWeb/Layout/input/svg/nested-viewports.html
Normal 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>
|
After Width: | Height: | Size: 309 B |
12
Tests/LibWeb/Layout/input/svg/use-honor-outer-viewBox.html
Normal file
12
Tests/LibWeb/Layout/input/svg/use-honor-outer-viewBox.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue