[csswg-drafts] [css2][css-images] Zero or infinite intrinsic ratio (#4572)

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

== [css2][css-images] Zero or infinite intrinsic ratio ==
Consider this test case:

```html
<style>
img { border: solid 1px }
p img { height: 10px }
div img { width: 10px }
</style>
<p><img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='2' width='10'></svg>"></p>
<p><img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1' width='10'></svg>"></p>
<p><img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='0' width='10'></svg>"></p>
<div>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10' width='2'></svg>">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10' width='1'></svg>">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10' width='0'></svg>">
```

Its rendering is interoperable in Firefox 70 and Chromium 78:

<img src=https://user-images.githubusercontent.com/291359/70378400-4b3a9600-1920-11ea-8b59-33c8fe2aa349.png width=156>

Relevant specs:

* https://drafts.csswg.org/css2/visudet.html#inline-replaced-width
* https://drafts.csswg.org/css2/visudet.html#inline-replaced-height
* https://drafts.csswg.org/css-images/#default-sizing
* https://svgwg.org/svg2-draft/coords.html#SizingSVGInCSS

In  SVG:

> The intrinsic aspect ratio must be calculated using the following algorithm. If the algorithm returns null, then there is no intrinsic aspect ratio.
>
> If the width and height sizing properties on the ‘svg’ element are both absolute values:
>
>    return width / height

So I would expect the respective intrinsic ratios for those six `img` elements to be 5, 10, infinity, 0.2, 0.1, and zero.

Each `img` has has one of or `width` or `height` set to a `10px`, and the other has its initial value `auto`. Given this and the presence of an intrinsic ratio, both CSS 2 and css-images specify that the `auto` dimension should be resolved based on the non-auto one and intrinsic ratio. So I would expect the respective missing sizes to be 50px, 100px, infinity, 50px, 100px, and infinity. With infinities possibly clamped to some large finite value.

This is what happens, except for images 3 and 6. Instead, both browsers seem to behave is if they did not have an intrinsic ratio, taking the missing dimension from their intrinsic size:

In css-images:

> If the specified size is only a width or height (but not both) then the concrete object size is given that specified width or height. The other dimension is calculated as follows:
>
> 1. If the object has an intrinsic aspect ratio, the missing dimension of the concrete object size is calculated using the intrinsic aspect ratio and the present dimension.
>
> 2. Otherwise, if the missing dimension is present in the object’s intrinsic dimensions, the missing dimension is taken from the object’s intrinsic dimensions.

CSS 2 is organized differently but is effectively equivalent to the above as far as I can tell.

Should css-images specify *an intrinsic ratio of zero or infinity must be treated as missing*?

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

Received on Saturday, 7 December 2019 18:21:07 UTC