[css-images-3][css-sizing-3][HTML] Why is object doing half of replaced element sizing negotiation?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Why are object elements doing only half of the object size negotiation? They're passing up sizing information from the embedded SVG to the OBJECT box (as you can see it respecting its aspect ratio to calculate the height), but the resulting SVG is laid out inside the OBJECT as if in an IFRAME rather than in an IMG element.
Afaict, nothing in the HTML spec says to treat them differently than IMG... https://html.spec.whatwg.org/multipage/rendering.html
Testcase comparing img, object, iframe, inline svg; source code below:
<!doctype html>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='background: orange'><circle cx='50' cy='50' r='50' fill='blue' /></svg>">
<object type="image/svg+xml" data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='background: orange'><circle cx='50' cy='50' r='50' fill='blue' /></svg>"></object>
<iframe type="image/svg+xml" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='background: orange'><circle cx='50' cy='50' r='50' fill='blue' /></svg>"></iframe>
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='background: orange'><circle cx='50' cy='50' r='50' fill='blue' /></svg>
<style>
img, object, iframe, svg { border: thick dotted; width: 200px; }
</style>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the CSS Images 3 object-size negotiation section with the HTML rendering section, then run the linked testcase comparing img, object, iframe, and inline SVG. Done means determining the intended sizing behavior and resolving the specification discrepancy with clear normative guidance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100