Bug 127995
| Summary: | SVG with small height inside pixel sized div renders below div | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Hugh Zhang <hugh.zhang> |
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | bfulgham, hugh.zhang, pdr, zimmermann |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Hugh Zhang
With the following SVG, the black rectangle should render inside the div with red border. It renders about 5 pixels below the div instead.
<div style="border: 1px solid red;width:100px;height:5px">
<svg>
<rect width="100" height="5" fill="black">
</svg>
</div>
The issue becomes less severe as div height increases, disappearing completely at around 14 to 15 pixels:
<div style="border: 1px solid red;width:100px;height:14px">
<svg>
<rect width="100" height="5" fill="black">
</svg>
</div>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Hugh Zhang
Apparently this only happens with <!DOCTYPE HTML>. It doesn't reproduce with <!DOCTYPE HTML PUBLIC>.
<!DOCTYPE HTML>
<html>
<body>
<div style="border: 1px solid red;width:100px;height:5px;">
<svg>
<rect width="100" height="5" fill="black"/>
</svg>
</div>
<br/>
<div style="border: 1px solid red;width:100px;height:14px">
<svg>
<rect width="100" height="5" fill="black"/>
</svg>
</div>
</body>
</html>
Hugh Zhang
Sorry about not getting this all in the original report. It looks like this issue is connected to the font-size. If "font-size:1px;" is set on the outer div, then the issue doesn't occur. Similarly, if a larger font-size is set, then the issue occurs for larger elements.
Philip Rogers
This appears to happen with an <img> as well:
<div style="border: 1px solid red;width:100px;height:5px">
<img width="100" height="5" src="[img here]">
</div>
This may be a bug in all replaced elements (svg, img, etc).
Brent Fulgham
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.