[csswg-drafts] [css-backgrounds] background-size: cover spec seems to not reflect implementations (#4049)

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

== [css-backgrounds] background-size: cover spec seems to not reflect implementations ==
https://drafts.csswg.org/css-backgrounds/#valdef-background-size-cover says:

> Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

That definition means that if combined with `background-origin: content-box`, which changes the positioning area according to https://drafts.csswg.org/css-backgrounds/#background-origin:

> For elements rendered as a single box, specifies the background positioning area.

Per spec I'd expect the following test-case:

```html
<!doctype html>
<style>
body { margin: 0 }
.test {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  background-origin: content-box;
  /* 2x1 red background */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAH0AQMAAACU5pVuAAAAA1BMVEX/IyMFLA8kAAAAVElEQVR42u3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+A/YYAAHqybvmAAAAAElFTkSuQmCC);
  height: 0;
  width: 100px;
  padding-bottom: 100px;
}
</style>
<div id="test"></div>
```

To render blank, since the positioning area is zero-sized. But browsers don't seem to do that, and doing that causes web compatibility issues like https://bugzilla.mozilla.org/show_bug.cgi?id=1559094 (which I plan to fix).

Seems like the spec should be fixed to not make it relative to the positioning area but the padding-box of the element (maybe?). I don't know, this seems quite broken over-all.

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

Received on Friday, 21 June 2019 20:49:37 UTC