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

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-tables][css-backgrounds] Does background-clip work on table columns and rows? ==
https://drafts.csswg.org/css-tables/#drawing-cell-backgrounds

> In addition to its own [background](https://drafts.csswg.org/css-backgrounds-3/#propdef-background), [table-cell](https://drafts.csswg.org/css-tables/#table-cell) boxes also render the backgrounds of the [table-track](https://drafts.csswg.org/css-tables/#table-track) and [table-track-group](https://drafts.csswg.org/css-tables/#table-track-group-element) boxes in which they belong. This is actually different from simply inheriting their background because the [`background-origin`](https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin) and [`background-size`](https://drafts.csswg.org/css-backgrounds-3/#propdef-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

```html
<!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 |
| - | - | - |
| ![](https://github.com/w3c/csswg-drafts/assets/7477678/dff76471-c3d1-410f-b381-7a3fdc245327) | ![](https://github.com/w3c/csswg-drafts/assets/7477678/a40d192b-0531-4d13-b743-6844bb2d0a7a) | ![](https://github.com/w3c/csswg-drafts/assets/7477678/287bfaaf-78b0-4e34-b581-6bfbd452c466) |

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9916 using your GitHub account


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

Received on Wednesday, 7 February 2024 16:02:36 UTC