[go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-backgrounds-3][css-borders-4] Only the principal box should get a shadow #9286

Closed
Loirooriol opened this issue Aug 31, 2023 · 3 comments · Fixed by #9296
Closed

[css-backgrounds-3][css-borders-4] Only the principal box should get a shadow #9286

Loirooriol opened this issue Aug 31, 2023 · 3 comments · Fixed by #9296
Labels
Closed Accepted as Obvious Bugfix css-backgrounds-3 Current Work css-borders-4

Comments

@Loirooriol
Copy link
Contributor

https://drafts.csswg.org/css-backgrounds-3/#shadow-layers, https://drafts.csswg.org/css-borders-4/#shadow-layers

If an element has multiple boxes, all of them get drop shadows, but shadows are only drawn where borders would also be drawn; see box-decoration-break.

This is wrong: only the principal box should get the shadow. If that box has multiple fragments, then all of them get shadows, according to box-decoration-break.
@Loirooriol Loirooriol mentioned this issue Aug 31, 2023
Merged
@SebastianZ SebastianZ mentioned this issue Sep 3, 2023
Merged
@Loirooriol
Copy link
Contributor Author

As I commented in #9296 (review): I was expecting the behavior to be the principal box since that's the simple choice, but I have tried a table:

<!DOCTYPE html>
<table style="outline: 3px solid cyan; box-shadow: 0 0 0 6px magenta">
  <caption>Tablecaption</caption>
  <tr><td>cell</td></tr>
</table>

Both Firefox and Chromium apply the shadow to the table grid box, not to the principal table wrapper box.

So maybe it should be discussed whether this should change? Or say that it's the principal box unless otherwise defined by the relevant spec (https://www.w3.org/TR/CSS21/tables.html#model would imply table grid box, and seemingly https://drafts.csswg.org/css-tables/#global-style-overrides too)

I can't find it now, but I remember some discussion about defaulting properties on a table to apply to the principal wrapper box, with some exceptions that apply to the grid box. Now the default is the grid box, which seems a bit weird.

@SebastianZ
Copy link
Contributor

I can't find it now, but I remember some discussion about defaulting properties on a table to apply to the principal wrapper box, with some exceptions that apply to the grid box. Now the default is the grid box, which seems a bit weird.

#324 (comment) and some other comments in that issue indicate that the table wrapper box should be made the default.
@FremyCompany Was this discussed further or even resolved on at some point?

Sebastian

@FremyCompany
Copy link
Contributor

I seem to recall that properties default to the grid box. Only when it would not make sense do they apply on the wrapper box. I hate the existence of the two boxes, but I have stopped fighting over it 😂

This is what the spec says at the moment:

The computed values of properties position, float, margin-, top, right, bottom, and left on the table are used on the table-wrapper box and not the table grid box; the same holds true for the properties whose use could force the used value of transform-style to flat (see list) and their shorthands/longhands relatives: this list currently includes overflow, opacity, filter, clip, clip-path, isolation, mask-, mix-blend-mode, transform-* and perspective.
Where the specified values are not applied on the table grid and/or wrapper boxes, the unset values are used instead for that box (inherit or initial, depending on the property).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted as Obvious Bugfix css-backgrounds-3 Current Work css-borders-4
Projects
None yet
Milestone
No milestone
4 participants
@FremyCompany @fantasai @SebastianZ @Loirooriol