Bug 287503 – REGRESSION (282712@main): Repeating row background images should fill table cells

• Component: Layout and Rendering
• Status: NEW

[Eddie Kohler]

When a CSS background-image is applied to a table row, the image should sized for the row, but painted into each cell in that row. The spec says “the background covers exactly the full area of all cells that originate in the row, even if they span outside the row, but this difference in area does not affect background image positioning.”

Prior to r282122 / https://github.com/WebKit/WebKit/pull/31975, Safari did not size or position row background-images properly. Rather than being sized and positioned once, for the row, these images were sized and positioned separately once per cell. (This was bug https://bugs.webkit.org/show_bug.cgi?id=9268)

r282122 fixed this, but introduced a regression. A repeated row background-image should fill the row’s cells entirely, but for multi-row cells (`rowspan=2`), currently only the top portion is filled. Furthermore, row background images should be clipped by cell contents (especially for rounded corners). Currently they are not.

Chrome handles these examples correctly. Firefox does not.

Example: https://www.read.seas.harvard.edu/~kohler/bugs/row-background-image-span.html

Expected output: https://www.read.seas.harvard.edu/~kohler/bugs/row-background-image-span-expected.html

[Eddie Kohler]

Sorry, I should have said r282712, not r282122

[Karl Dubost]

Created attachment 474265 [details]
rendering in safari, firefox, chrome

Tested on 
Safari Technology Preview  213           20621.1.11.111.1
Firefox Nightly            137.0a1       13725.2.17
Google Chrome Canary       135.0.7020.0  7020.0

[Karl Dubost]

Eddie
Thanks for the report
Which specification are you quoting exactly?

[Eddie Kohler]

That quote is from CSS 2.1: https://www.w3.org/TR/CSS21/tables.html

[Karl Dubost]

OK Thanks. 
For the context

CSS 2.1 https://www.w3.org/TR/CSS21/tables.html#table-layers

17.5.1 Table layers and transparency
> 5. The next to last layer contains the rows. Each row is as wide as the row groups and as tall as a normal (single-row-spanning) cell in the row. As with columns, the background covers exactly the full area of all cells that originate in the row, even if they span outside the row, but this difference in area does not affect background image positioning.



which is then in same text.
CSS 2.2 draft https://drafts.csswg.org/css2/#table-layers

17.5.1 Table layers and transparency
> 2. The next to last layer contains the rows. Each row is as wide as the row groups and as tall as a normal (single-row-spanning) cell in the row. As with columns, the background covers exactly the full area of all cells that originate in the row, even if they span outside the row, but this difference in area does not affect background image positioning.



And then there is:
CSS Table Module Level 3  (Editor's draft) https://drafts.csswg.org/css-tables-3/#drawing-cell-backgrounds

5.3.2. Drawing cell backgrounds
> 4. The fourth background drawn by a cell is the background of its originating table-row (if any). For the purpose of background-positioning, it is expected that a row occupies the largest possible area a single cell could occupy in the row/column grid while originating in the row and not entering any other row.


with the useful
https://www.w3.org/TR/CSS2/images/tbl-layers.png

[Radar WebKit Bug Importer]

<rdar://problem/145080705>

[Ahmad Saleem]

PR - https://github.com/WebKit/WebKit/pull/40428