[csswg-drafts] [css-images-3][css-sizing-3][HTML] Why is object doing half of replaced element sizing negotiation? (#6469)

fantasai has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images-3][css-sizing-3][HTML] Why is object doing half of replaced element sizing negotiation? ==
Why are `object` elements doing only half of the [object size negotiation](https://www.w3.org/TR/css-images-3/#object-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](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!doctype%20html%3E%0A%3Cimg%20src%3D%22data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27100%27%20style%3D%27background%3A%20orange%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2750%27%20fill%3D%27blue%27%20%2F%3E%3C%2Fsvg%3E%22%3E%0A%0A%3Cobject%20type%3D%22image%2Fsvg%2Bxml%22%20data%3D%22data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27100%27%20style%3D%27background%3A%20orange%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2750%27%20fill%3D%27blue%27%20%2F%3E%3C%2Fsvg%3E%22%3E%3C%2Fobject%3E%0A%0A%3Ciframe%20type%3D%22image%2Fsvg%2Bxml%22%20src%3D%22data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27100%27%20style%3D%27background%3A%20orange%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2750%27%20fill%3D%27blue%27%20%2F%3E%3C%2Fsvg%3E%22%3E%3C%2Fiframe%3E%0A%0A%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27100%27%20style%3D%27background%3A%20orange%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2750%27%20fill%3D%27blue%27%20%2F%3E%3C%2Fsvg%3E%0A%0A%3Cstyle%3E%0Aimg%2C%20object%2C%20iframe%2C%20svg%20%7B%20border%3A%20thick%20dotted%3B%20width%3A%20200px%3B%20%7D%0A%3C%2Fstyle%3E%0A)
```
<!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>

```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6469 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 22 July 2021 22:11:43 UTC