[css-backgrounds-4] Added box-shadow-* longhand properties

[SebastianZ]

This change adds the different longhand properties for the box-shadow property to the CSS Backgrounds and Borders Module Level 4. This is one part of #4431.

The definition of the box-shadow property was taken from level 3 of the specification. Then the different longhand properties were created by splitting the syntax and value descriptions of the box-shadow property. Some additional descriptions were added and all the properties placed in a new section "Drop Shadows".

[SebastianZ]

Given the resolution about linked list-valued properties in #7164, it looks like we can finally move forward with this PR.

@fantasai As Lea seems to be extremely busy at the moment, is it possible that you do the review for this change?

Sebastian

[LeaVerou]

It's hard to review this properly because the entire text from backgrounds-3 is brought in and then edited, so it's hard to know what the delta is. The PR as it currently stands includes stuff about drawing shadows, which is not relevant to breaking down the syntax into longhands.

Wrt to the longhands, some thoughts, not very organized:

• box-shadow-offset is not consistent naming with any other property that takes a horizontal and vertical offset.
• We should have separate horizontal and vertical longhands. Not sure if these should be physical (like background-position) or logical. I defer to @fantasai on that.
• If we name the offset property box-shadow-position, we should name the one for inset differently. Perhaps box-shadow-placement?
• Yes, CSS is internally inconsistent here. We have conflicting precedents for *-position properties: list-style-position to follow for inset | outset and things like background-position.
• OTOH background-position does not specify offsets from an initial position, it specifies a whole new position. So maybe that is not a good precedent to follow. What else in CSS specifies offsets? There is top and left, translate, what else?

[SebastianZ]

It's hard to review this properly because the entire text from backgrounds-3 is brought in and then edited, so it's hard to know what the delta is. The PR as it currently stands includes stuff about drawing shadows, which is not relevant to breaking down the syntax into longhands.

I've removed the Background 3 parts now. So it should be easier to review the changes.

• box-shadow-offset is not consistent naming with any other property that takes a horizontal and vertical offset.
• Yes, CSS is internally inconsistent here. We have conflicting precedents for *-position properties: list-style-position to follow for inset | outset and things like background-position.
• OTOH background-position does not specify offsets from an initial position, it specifies a whole new position. So maybe that is not a good precedent to follow. What else in CSS specifies offsets? There is top and left, translate, what else?

There are several reasons why I chose box-shadow-offset as name.

1. It defines an offset from the element's box.
2. Backgrounds 3 already calls those values "offsets".
3. It is the controlling property in the linked list-valued properties and therefore it takes the none value from the box-shadow shorthand. And box-shadow-offset: none; fits quite well, in my opinion.

• We should have separate horizontal and vertical longhands. Not sure if these should be physical (like background-position) or logical. I defer to @fantasai on that.

I don't see a strong use case for having separate longhands for the two axes. And it seems @tabatkins agreed on that on a call:

smfr: should box-shadow-offset be further broken down into x/y offsets?
TabAtkins: [meh reaction]

But iff we add them, they have to be physical because the existing offsets in Backgrounds 3 are also physical. We might then add logical counterparts in addition to them, though.

• If we name the offset property box-shadow-position, we should name the one for inset differently. Perhaps box-shadow-placement?

I like the suggested name box-shadow-placement and I am open to rename it to that or something else but please see my comment on why I chose that name.

Anyway, bikeshedding the names can still be done after landing this patch.

Sebastian

[SebastianZ]

@LeaVerou @fantasai This PR is lying around for exactly 1.5 years now. Could you do a quick review of the changes, please?

Sebastian

[SebastianZ]

@fantasai @LeaVerou Another quarter has passed. Would it be possible to give this a(nother) review and provide some feedback, please? I'd really like to land this patch.

Sebastian

[SebastianZ]

Because there was no further feedback since my update ~5 months ago, @LeaVerou's feedback got addressed by me and to pave the way to split the spec. and also to finally start working on adding the text-shadow-* longhands, I merge the changes now.

Discussions on further improvements and on naming the properties can happen in separate issues.

Sebastian