<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - REGRESSION (r190883): Error calculating the tile size for an SVG with no intrinsic size but with large floating intrinsic ratio"
href="https://bugs.webkit.org/show_bug.cgi?id=150904">150904</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>REGRESSION (r190883): Error calculating the tile size for an SVG with no intrinsic size but with large floating intrinsic ratio
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>sabouhallawa@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=264814" name="attach_264814" title="test case">attachment 264814</a> <a href="attachment.cgi?id=264814&action=edit" title="test case">[details]</a></span>
test case
1. Open the attached test case.
Results: 40% of the two <div>s rectangle are not covered by the background image.
Expected: 100% of the two <div>s rectangle are by the background image.
The bug in drawing the background of the first <div> is a regression of r190883 which happens because of missing the following if-statemnet in resolveAgainstIntrinsicRatio() when rolling out the r184895:
if (!resolvedSize.isEmpty())
return resolvedSize;
The bug in drawing the background of the second <div> has been there for sometime. At least it is in Safari 9.0. The bug is in calculating the tile width given the a background SVG with non intrinsic size but with a large float intrinsic ratio.
Let's take a conceder example to show why it happens and consider the attached test case when we draw the second <div>.
1. The css of the second <div> draws a background SVG image whose width is '8000.4px' while the height is not determined.
2. The viewBox of the SVG is '0 0 8000.4 100'
3. RenderBoxModelObject::calculateFillTileSize() calls RenderBoxModelObject::calculateImageIntrinsicDimensions() to calculate the imageIntrinsicSize.
4. In RenderBoxModelObject::calculateImageIntrinsicDimensions(), because (resolvedSize.width() == 0 && resolvedSize.height() > 0) is true we return resolveAgainstIntrinsicWidthOrHeightAndRatio().
5. The input to this function is the following: intrinsicRatio = FloatSize(8000.4, 100), useWidth = LayoutUnit(512025) and useHeight = LayoutUnit(0)
6. Because useWidth is not zero, resolveHeightForRatio() is called to calculate the height.
7. resolveHeightForRatio() does its calculation in float but it then casts the result to integer. So it returns 99 instead of 100.
8. In resolveAgainstIntrinsicWidthOrHeightAndRatio(), the return of resolveHeightForRatio() is changed back to LayoutUnit but we end up returning LayoutSize(512025, 6336) instead of returning LayoutSize(512025, 6400).
9. In RenderBoxModelObject::calculateFillTileSize(), because the background-size is "auto 100px",
tileSize = LayoutSize(LayoutUnit(imageIntrinsicSize.width() * tileSize.height() / imageIntrinsicSize.height()), LayoutUnit(6400));
tileSize = LayoutSize(LayoutUnit(512025 * 6400 / 6336), LayoutUnit(6400));
tileSize = LayoutSize(LayoutUnit(517196), LayoutUnit(6400)); // == FloatSize(8081.2, 100) instead of FloatSize(8000.4, 100)
And this is the cause of not filling the whole rectangle of the second div.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>