OSSForks/ladybird
1
0
Fork 0
mirror of https://github.com/zebrajr/ladybird.git synced 2025-12-06 00:19:53 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

LibWeb: Do not stomp over content size of SVGs

Browse Source 
When displaying SVGs inside a navigable directly, we want to display
them in the size specified by their width and height attributes instead
of stretching them to the viewport as layout normally would.

However, when doing so, we need to actually check that the SVG we are
laying out is indeed directly inside the navigable. Otherwise we just
blindly overwrite whatever content sizes have been calculated by layout
code for e.g. SVG elements inlined somewhere in an HTML document.

Due to the way this was written originally, the bug was not very
noticable. The code overwrote the content width/height with the computed
width/height, which was often still correct in the sense that those two
had the same value. However, content size may also be the result of
{min,max}-{width,height} constraints, which can make it differ from the
computed values.

This bug was likely a regression introduced in
f5e01192cc.
This commit is contained in:
InvalidUsernameException 2025-09-21 14:50:20 +02:00 committed by Sam Atkins
parent b76f1fb011
commit 9d7689ecd8
3 changed files with 79 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Libraries/LibWeb/Layout/SVGFormattingContext.cpp
View File

@ -179,7 +179,8 @@ void SVGFormattingContext::run(AvailableSpace const& available_space)
auto& svg_box_state = m_state.get_mutable(context_box());
if (!this->context_box().root().document().is_decoded_svg()) {
auto const& document = context_box().document();
if (document.document_element() == context_box().dom_node() && !document.is_decoded_svg()) {
// Overwrite the content width/height with the styled node width/height (from <svg width height ...>)
// NOTE: If a height had not been provided by the svg element, it was set to the height of the container

20
Tests/LibWeb/Ref/expected/svg/min-max-size-constraints-ref.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<style>
div {
border: solid 2px red;
background: green;
width: 25px;
height: 25px;
margin-bottom: 50px;
}
</style>
All green squares should exactly fill their corresponding red border.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

57
Tests/LibWeb/Ref/input/svg/min-max-size-constraints.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<link rel="match" href="../../expected/svg/min-max-size-constraints-ref.html" />
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-64">
<style>
div {
border: solid 2px red;
margin-bottom: 50px;
}
.width { width: 25px; }
.height { height: 25px; }
.min-width { min-width: 25px; }
.min-height { min-height: 25px; }
.max-width { max-width: 25px; }
.max-height { max-height: 25px; }
</style>
All green squares should exactly fill their corresponding red border.
<div class="width height">
<svg class="width height" viewBox="0 0 16 16" width="10" height="10">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>
<div class="width height">
<svg class="min-width height" viewBox="0 0 16 16" width="10" height="10">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>
<div class="width height">
<svg class="width min-height" viewBox="0 0 16 16" width="10" height="10">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>
<div class="width height">
<svg class="min-width min-height" viewBox="0 0 16 16" width="10" height="10">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>
<div class="width height">
<svg class="width height" viewBox="0 0 16 16" width="100" height="100">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>
<div class="width height">
<svg class="max-width height" viewBox="0 0 16 16" width="100" height="100">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>
<div class="width height">
<svg class="width max-height" viewBox="0 0 16 16" width="100" height="100">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>
<div class="width height">
<svg class="max-width max-height" viewBox="0 0 16 16" width="100" height="100">
<rect x="0" y="0" width="16" height="16" fill="green" />
</svg>
</div>