Re: [csswg-drafts] [css-images] Behaviour of SVG degenerate aspect-ratios (#6286)

> looking at both SVG as image and <svg> element

For this specific case its slightly important that we use an "SVG as an image", as a "width: 0" has meaning within CSS, which makes us "ignore" the aspect-ratio (consistently between implementations).

However we can look at the behaviour of "width: -1px" which does have significant implementation differences, consider:

```html
<!DOCTYPE html>
<style>
img, svg {
  border: solid;
  background: lime;
}
</style>

<img style="width: 100px" src="
    data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='-1px' height='50px' viewBox='0 0 1 1'></svg>">

<svg style="" xmlns="http://www.w3.org/2000/svg" width="-1px" height="50px" viewBox="0 0 1 1"></svg>

<svg style="width: -1px; height: 50px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
```

OR

```html
<!DOCTYPE html>
<style>
img, svg {
  border: solid;
  background: lime;
}
</style>

<img style="height: 100px" src="
    data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='-1px' height='50px' viewBox='0 0 1 1'></svg>">

<svg style="" xmlns="http://www.w3.org/2000/svg" width="-1px" height="50px" viewBox="0 0 1 1"></svg>

<svg style="width: -1px; height: 50px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
```

Here Blink's behaviour (post M93 - we've fixed lots of bugs in this area) and Safari is "treat -1px as invalid, and fallback to the viewBox aspect-ratio".
Gecko's behaviour is "treat -1px as 0px when defined as an SVG attribute however in CSS ignore -1px and fallback to the aspect-ratio".

I somewhat prefer Blink/Safari behaviour of consistently treating "-1px as invalid here".

This however is only about a "clearly invalid" value of -1px. 0px is valid for intrinsic sizing purposes and the question if it should fallback to the viewBox aspect-ratio still remains.

```
<!DOCTYPE html>
<style>
img, svg {
  border: solid;
  background: lime;
}
</style>

<img style="width: 100px" src="
    data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='0' height='50px' viewBox='0 0 1 1'></svg>">

<svg style="" xmlns="http://www.w3.org/2000/svg" width="0" height="50px" viewBox="0 0 1 1"></svg>

<svg style="width: ; height: 50px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>
```

Here the intrinsic-size is clearly 0x50. But does the aspect-ratio fallback to the viewBox to be 1/1 or not?
This somewhat depends on how "-1px" is handled.



-- 
GitHub Notification of comment by bfgeek
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-862576667 using your GitHub account


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

Received on Wednesday, 16 June 2021 17:39:12 UTC