Re: [csswg-drafts] [css-images] @image rule for manipulating images (#6807)

And I already start with the discussion. 😃 

* `src` As stated earlier, should not be included, because the rule is meant to do image manipulations.
* `aspect-ratio` Changes the aspect ratio of the image, i.e. stretches or shrinks it. Questions: Does it work the same way as the `aspect-ratio` property? I.e. either `width` or `height` (but not both) must be explicitly set to a value and the other one to `auto`?
* `width` Changes the width of the image, i.e. stretches or shrinks it.
* `height` Changes the height of the image, i.e. stretches or shrinks it.
* `inline-size` Changes the width or height of the image depending on the writing mode, i.e. stretches or shrinks it. Question: How is the writing mode determined?
* `block-size` Changes the width or height of the image depending on the writing mode, i.e. stretches or shrinks it. Same question as for `inline-size`.
* `object-fit` Changes the way how the image is fit into the area given by the width and height. Question: When we have this, would it make sense to also have `object-position`?
* `margin` Adds a transparent spacing around the image. Question: Should also the longhands be allowed?
* `filter` Applies filters to the image. Regarding `blur()`, `drop-shadow()` and similar effects that draw outside the original width and height of the image, should the dimensions be adjusted accordingly or should they stay the same? Should we introduce something like [`overflow-clip-margin`](https://drafts.csswg.org/css-overflow-3/#overflow-clip-margin) to allow control over that? 
* `opacity` Applies transparency to the image.
* `transform` Applies transformations to the image. Same question as for `filter`.
* `scale` Scales the image. Same question as for `filter`.
* `rotate` Rotates the image. Same question as for `filter`.
* `translate` Translates the image. Same question as for `filter`.
* `clip-path` Applies some clipping to the image.
* `mask` Applies a mask to the image.
* `border-radius` Adds bevel to the corners of the image.
* `corner-shape` Specifies the shape of the corners created by `border-radius`.
* `background-color` Specifies the background color drawn on parts outside the manipulated image. Question: Should there be equivalents for all `background-*` properties?
* `will-change` Indicates whether the image will be changed due to some animation or transition. Obviously closely related to `animation` and `transition`. Question: Are manipulations composited? See also below.
* `animation` Animates the image. Questions: Do we need that? Is that the right approach? When animations are added, then maybe also `transition?

Any other suggestions? Did I miss anything from above?

Sebastian

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


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

Received on Tuesday, 23 August 2022 22:45:17 UTC