| 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 | ||
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>
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. 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). Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue. |
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>