[css-backgrounds] Add 'replacement-box' as option to background-origin and background-clip

Add replacement-box as an option to background-origin and background-clip.
(box name up for bikeshedding)

Motivation

While an image is loading, a low resolution image or the average color can be presented as a preview.
In the simple case this is easy to do by setting a background-colour or a background-image. But this only works as long as object-fit is fill.

If the image has object-fit and object-position set it can be cumbersome to match the final clip and position of the replaced image. It's even more complicated when the final image dimensions are art-directed and varies based on a media-query.

loading=lazy and source width and height presentational hints for aspect-ratio have now landed in most browsers. This allows us to "reserve" space for the image until it's loaded.

We should provide a simple way to add a low quality image placeholder as well.

Proposal

Add replacement-box as an option to background-origin and background-clip.

The replacement-box should match the area the replaced content is rendered into, before being clipped, so that any content rendered into this box matches the final replaced element. If the element is still loading, the area should be determined by the aspect-ratio presentational hint in combination with object-fit and object-position.

Adding a low quality replacement image should then be as easy as

<picture>
  <source srcset="./desktop-image.webp" width="400" height="200" media="(min-width=800px)"/>
  <source srcset="./mobile-image.webp" width="300" height="400"/>
  <img alt="..."/>
</picture>

img {
  width: 400px;
  height: 400px;
  background-color: --average-color;
  background-clip: replacement-box;

  /* Not necessary for background-color */  
  background-origin: replacement-box; 
  background-size: 100% 100%;
}

With the proposed :loading pseudo-element, we can even do

img:loading {
  filter: blur(10px);
}

Being able to position and clip a background-color or background-image into the replacement-box would also allow for adding a background to transparent images as well.

The replacement-box could be added to clip-path as well, to provide an easy way to clip effects like filter to the edges of the replaced element.

Start with the CSS Backgrounds specification and the proposal's examples for background-origin and background-clip. Review how replaced elements, object-fit, object-position, aspect-ratio, and media queries determine the proposed box. Done means the box name and interoperable behavior have been resolved and specified.