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

LibWeb: Support <svg> elements with display: block

Browse source 
There are a couple of things that went into this:

- We now calculate the intrinsic width/height and aspect ratio of <svg>
  elements based on the spec algorithm instead of our previous ad-hoc
  guesswork solution.

- Replaced elements with automatic size and intrinsic aspect ratio but
  no intrinsic dimensions are now sized with the stretch-fit width
  formula.

- We take care to assign both used width and used height to <svg>
  elements before running their SVG formatting contexts. This ensures
  that the inside SVG content is laid out with knowledge of its
  viewport geometry.

- We avoid infinite recursion in tentative_height_for_replaced_element()
  by using the already-calculated used width instead of calling the
  function that calculates the used width (since that may call us right
  back again).
This commit is contained in:
Andreas Kling 2023-05-19 18:14:37 +02:00
parent 28d2e26678
commit f0560fd087
11 changed files with 107 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/expected/svg/svg-fill-with-bogus-url.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x37.835937 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21.835937 children: inline
line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 100
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 0x0]
SVGSVGBox <svg> at (8,8) content-size 0x0 [SVG] children: not-inline
SVGGeometryBox <rect> at (8,8) content-size 100x100 children: not-inline
BlockContainer <html> at (0,0) content-size 800x800 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x784 children: inline
line 0 width: 784, height: 784, bottom: 784, baseline: 784
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 784x784]
SVGSVGBox <svg> at (8,8) content-size 784x784 [SVG] children: not-inline
SVGGeometryBox <rect> at (8,8) content-size 784x784 children: not-inline

7
Tests/LibWeb/Layout/expected/svg/svg-intrinsic-size-in-one-dimension.txt Normal file
View file

@ -0,0 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x170 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x154 children: not-inline
SVGSVGBox <svg> at (9,9) content-size 100x50 [SVG] children: not-inline
SVGGeometryBox <rect> at (21.5,21.5) content-size 75x25 children: not-inline
SVGSVGBox <svg> at (9,61) content-size 200x100 [SVG] children: not-inline
SVGGeometryBox <rect> at (34,86) content-size 150x50 children: not-inline

5
Tests/LibWeb/Layout/expected/svg/svg-with-display-block.txt Normal file
View file

@ -0,0 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x800 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x784 children: not-inline
SVGSVGBox <svg> at (8,8) content-size 784x784 [SVG] children: not-inline
SVGGeometryBox <rect> at (8,8) content-size 784x784 children: not-inline

6
Tests/LibWeb/Layout/input/svg/svg-intrinsic-size-in-one-dimension.html Normal file
View file

@ -0,0 +1,6 @@
<!doctype html><style>
svg {
border: 1px solid black;
display: block;
}
</style><svg viewBox="0 0 200 100" height="50"><rect x="25" y="25" width="150" height="50"></svg><svg viewBox="0 0 200 100" width="200"><rect x="25" y="25" width="150" height="50"></svg>

3
Tests/LibWeb/Layout/input/svg/svg-with-display-block.html Normal file
View file

@ -0,0 +1,3 @@
<!doctype html><style>
svg { display: block; }
</style><svg viewBox="0 0 10 10"><rect x=0 y=0 width=10 height=10></svg>