Skip to content

[css-backgrounds-3] background-size with "<length-percentage> auto" and gradient image is not interoperably implemented #2675

@ChumpChief

Description

@ChumpChief

Per https://drafts.csswg.org/css-backgrounds-3/#valdef-background-size-length-percentage

The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.
A percentage is relative to the background positioning area.
An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%.

Since gradients have no intrinsic size (per https://drafts.csswg.org/css-images-3/#gradients), I believe Firefox has the spec-compliant rendering on this test page:
https://jsfiddle.net/mecvebx8/

Edge/Chrome/Safari currently produce the same non-spec-compliant rendering. I don't have a particular preference for either behavior, but would like to reach full interoperability between implementers with a matching spec. Do we all agree that the spec/FF behavior is the correct/desirable behavior, and are other implementers open to making the change to match? We can make the change in Edge if others are also on board.

The same discrepancy in implementation also exists for mask-size.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions