Able to reproduce the issue on the latest canary(60.0.3082.0) and the latest stable(58.0.3029.81) on Windows-10, Mac OS 10.12.3 and Linux Ubuntu 14.04. This is non regression issue as behaves the same on older version: 30.0.1549.0 with http://jsbin.com/zuyumed/edit?html,css,output

Marking this as Untriaged for more inputs on this.

Thank you!

cathiechen@tencent.com is working on this bug and uploaded a CL https://codereview.chromium.org/2922343002/. However, the CL breaks fast/table/invisible-cell-background.html which expects the current behavior.

cathiechen also noted:
Looks like this is a historic issue.

> Looks like this is a historic issue.
> 
> This issue is introduced by
> https://chromium.googlesource.com/chromium/src/+/10dbbd8cd3b5e9f3d5acd8f5b566500423e22d88
> which uploaded a test case (fast/table/invisible-cell-background.html) to make
> sure "Don't paint any background if the cell is not visible."
> 
> Safari and Edge have the same behavior as blink. (Don't paint any background if
> the cell is not visible.)
> 
> Firefox is different but weird too.
> 
> But according to the rule of visibility, we should paint parent background if
> the cell isn't visible.

I think for such vaguely defined areas, we should use the behavior that are used by most other browsers. In this case, the behavior is to hide the cell with visibility:hidden, including backgrounds from its containers. This behavior is reasonable if we think the cell owns the backgrounds defined by its containers.

I would like to mark this bug WontFix, but want to hear opinions from eae@ and mstensho@opera.com.

According to CSS 2, this is governed by the empty-cells property:

https://www.w3.org/TR/CSS22/tables.html#empty-cells

A cell is considered empty if visibility is hidden. The initial value is "show", so it really looks like we're doing something wrong.

Then again, that part of the spec is confusing. It says "if all the cells in a row have a value of 'hide' and have no visible content, then the row has zero height and there is vertical border-spacing on only one side of the row.". This is clearly wrong if some of the cells have non-zero height content but ended up with "no visible content" thanks to visibility:hidden.

Apart from that, the way I read the spec, Firefox is the only browser doing it right in that test case. However, I'd claim that even the following should display a blue square:

<div style="display:table-cell; width:50px; height:50px; background:blue; visibility:hidden;"></div>

But I guess that depends on who wins among empty-cells:show and visibility:hidden. :)

https://drafts.csswg.org/css-tables-3/#empty-cell-rendering on the other hand mentions nothing about visibility:hidden at all. However it does say that if a cell is empty and it has empty-cells:hide, it will be painted as if visibility: hidden was specified on them. :-S https://drafts.csswg.org/css-tables-3/#drawing-cell-backgrounds

I think some spec work is required here. WontFix for now sounds reasonable for now.

Agree! I'd like to start an issue in CSSWG.

BTW:
Firefox is right when border-collapse is separate; but weird when border-collapse is collapse. See cases here: http://jsbin.com/nebepejose/edit?html,css,output 

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comments 5, 7 and 8 seem to imply WontFix, so WontFix for now pending spec clarity.