RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 04:57:44 +00:00
Code Issues Activity Actions

LibWeb: Support x and y attributes on nested SVGs

Browse source 
This allows positioning a child SVG relative to its parent SVG.

Note: These have been implemented as CSS properties as in SVG 2, these
are geometry properties that can be used in CSS (see
https://www.w3.org/TR/SVG/geometry.html), but there is not much browser
support for this. It is nicer to implement than the ad-hoc SVG
attribute parsing though, so I feel it may make sense to port the rest
of the attributes specified here (which should fix some issues with
viewport relative sizes).
This commit is contained in:
MacDue 2024-01-28 17:48:59 +00:00 • committed by Sam Atkins
parent 556679fedd
commit b10f58a1fe
8 changed files with 91 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Tests/LibWeb/Layout/expected/svg/svg-inside-svg-with-xy.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 784x150 children: inline
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 300x150] baseline: 150
SVGSVGBox <svg> at (8,8) content-size 300x150 [SVG] children: inline
TextNode <#text>
SVGSVGBox <svg> at (18,8) content-size 300x150 [SVG] children: inline
TextNode <#text>
SVGGeometryBox <rect> at (27.5,17.5) content-size 101x101 children: not-inline
TextNode <#text>
TextNode <#text>
SVGSVGBox <svg> at (208,23) content-size 300x150 [SVG] children: inline
TextNode <#text>
SVGGeometryBox <rect> at (217.5,32.5) content-size 101x101 children: not-inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x150]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x150]
SVGSVGPaintable (SVGSVGBox<svg>) [18,8 300x150]
SVGPathPaintable (SVGGeometryBox<rect>) [27.5,17.5 101x101]
SVGSVGPaintable (SVGSVGBox<svg>) [208,23 300x150]
SVGPathPaintable (SVGGeometryBox<rect>) [217.5,32.5 101x101]

11
Tests/LibWeb/Layout/input/svg/svg-inside-svg-with-xy.html Normal file
View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
<svg x="200" y="15">
<rect x="10" y="10" height="100" width="100"
style="stroke:#009900; fill: #00cc00"/>
</svg>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 343 B

2
Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
View file

@ -166,4 +166,6 @@ white-space: normal
width: auto
word-spacing: normal
word-wrap: normal
x: 0px
y: 0px
z-index: auto