[css-tables][css-backgrounds] Does background-clip work on table columns and rows?

Loirooriol commented 7 months ago

https://drafts.csswg.org/css-tables/#drawing-cell-backgrounds

In addition to its own background, table-cell boxes also render the backgrounds of the table-track and table-track-group boxes in which they belong. This is actually different from simply inheriting their background because the background-origin and background-size computations will actually be done on the bounds of the grouping boxes, and not on those of the cell.

What about the background-clip of the grouping boxes? Do they use the border and padding of the cell? https://drafts.csswg.org/css-backgrounds-3/#background-clip

<!DOCTYPE html>
<style>
table { border-spacing: 5px }
col { background: linear-gradient(to bottom, rgba(0, 255, 255, 0.5), rgba(255, 255, 0, 0.5)) content-box }
tr { background: linear-gradient(to right, rgba(0, 255, 255, 0.5), rgba(255, 0, 255, 0.5)) content-box }
td { padding: 10px; border: 10px solid rgba(0, 0, 0, 0.2); }
td:nth-of-type(1) { border-width: 10px }
td:nth-of-type(2) { border-width: 5px }
td:nth-of-type(3) { border-width: 0px }
tr:nth-of-type(1) > td { padding: 10px }
tr:nth-of-type(2) > td { padding: 5px }
tr:nth-of-type(3) > td { padding: 0px }
</style>
<table>
  <col></col>
  <col></col>
  <col></col>
  <tr><td>A</td><td>B</td><td>B</td></tr>
  <tr><td>A</td><td>B</td><td>B</td></tr>
  <tr><td>A</td><td>B</td><td>B</td></tr>
</table>

Gecko	Blink	WebKit

fantasai commented 6 months ago

For consistency with background-origin I would say no, it doesn't apply... but I guess it could be useful?

(See https://fantasai.inkedblade.net/style/discuss/table-backgrounds/ for some of the discussion leading up to this painting model, btw.)

css-meeting-bot commented 3 months ago

The CSS Working Group just discussed [css-tables][css-backgrounds] Does background-clip work on table columns and rows?, and agreed to the following:

RESOLVED: background-clip on table columns and rows is interpreted against the cells' box geometry

The full IRC log of that discussion

<jarhar> oriol: they both are ? table rows, table row group, table columsn, but im going to say rows
<jarhar> oriol: they have a special behavior when they get a background, the background applies to the entire row but instead of padinding that we clip the result to each cell in the row, then when implementing this in servo we had that qeustion about how we should treat the background clip property
<jarhar> oriol: there are two reasonable interoper4tations. the backbground clip applies to the row itself, but since the row doesnt haef padding or border of its own, unless you use border collapse or something, otherwise it doesnt have pading or border so basicaly the property has noe ffect. this would resolve in the firefox behavior where you resolve to
<jarhar> content box and it doesnt change from border box
<jarhar> oriol: when c.ipping to each cell, we takt eh backgorund and borer of each cell into account and then ? into the area
<jarhar> oriol: clip to the contnet box itself. this is what blink is doing. webkit was completely broken
<jarhar> oriol: asking which option would be preferred
<jarhar> dbaron: i have two thoughts on this and they contradict each other. neither is very strong
<jarhar> dbaron: it seems liek theres a readonable thing for th eproeprty to do and that makes it do the same thing it does everywherele slse so why not have it do a thing instead of do nothing.
<jarhar> dbaron: the other thought is that it wseems weird for backgrounde clip and background origin to do different things, it seems weird for background origin and backbground clip be relative to different things. one argues one way the other argues another
<astearns> q+
<miriam> ack fantasai
<Zakim> fantasai, you wanted to show some diagrams
<jarhar> fantasai: i work on this part of the spec a long time ago
<jarhar> fantasai: the model we have for how rows paint is that you dra wht erectangle and thn you clip out the indificual cell areas because otherwise tihings wont line up nicely
<jarhar> fantasai: if you explode the cells it isnt as nice as when the cells are windows
<futhark> present-
<jarhar> fantasai: the paint area is not that the row boxes mean, it expands beyond that so that the window of an indivicual ceel has to include the row boxes area because it expands into a different row. otherwise you ge thti sefect where you can tsee the text
<jarhar> fantasai: the origin is relative to the row box
<jarhar> fantasai: ill drop a link to this
<fantasai> https://fantasai.inkedblade.net/style/discuss/table-backgrounds/
<jarhar> florian: i think hyou already have an issue
<miriam> ack astearns
<jarhar> astearns: am i interpreting these diagrams then fantasai you are going for the second propsal
<jarhar> fantasai: i think i agree with davids assessment of this situation.we can argue there is a bit of differece in terms of the rows painting. it can paint well outside the rows area
<jarhar> fantasai: so i thin kk i might lean more towards making it useful
<jarhar> astearns: my response to david on theidea of having it do something rather than nothinkg , whats the likelihiood of having something we specify be interoperably imnpelemtned, might not be a priority
<jarhar> iank_: we improved a bunch of our rendering a few years ago because we had bugs in this area and webdevs were complaining about it, so given enough webdev response we prioritize it
<jarhar> dbaron: my intuition is that this i sprobably a single digit ish number of lines of code change, maybe a little worse if you need to change 7 functions to pass the right thing throughj them but if it already works for cells then just do the same thing as scells for these other things
<astearns> then I withdraw my concern
<jarhar> miriam: i like useful things more than non useful things
<jarhar> miriam: is there more discussion here?
<jarhar> fantasai: so the propolsal is to make background clip on tables cols and rows change the clip of the cell box?
<jarhar> miriam: are there any issues with how that interacts with clipping on cells or is taht well defined
<jarhar> fantasai: its well defined
<jarhar> fantasai: we kind of already have a cell defined clip area so that ? the cell respond to the rows or columns
<jarhar> miriam: lets take that resolution if we cna
<fantasai> s/that ?/that would make/
<fantasai> RESOLVED: background-clip on table columns and rows is interpreted against the cells' box geometry

w3c / csswg-drafts

[css-tables][css-backgrounds] Does background-clip work on table columns and rows? #9916