Background color of a div masks content of child divs

• Component: CSS
• Status: NEW ---

[Antoine Mercadal]

[This is a copy of the Chromium Bug report I did yesterday: https://code.google.com/p/chromium/issues/detail?id=345532]

Reduction case

Steps to reproduce the problem:
1. Open index-debug.html the attached test case (use a small webserver or --disable-web-security to allow local XHR requests) simply double clicking on the file won't work

1.1. Observe that only a grey box is visible on a big red background
1.2 click the "Remove Color" Button (this will remove the background div bg color)
1.3 Observer that the text (that is inside a div inside the background div) become visible
1.4 click the "Add Color" button, for some reasons the text is masked (by a bg color, of an ancestor div...)

Do not click on "Hide Box", this button is here to demonstrate the bug in Google's Blink, where the almost same bug, but hiding the box actually makes it work, while in safari, it doesn't)
For reeference, this is the Chromium bug report: https://code.google.com/p/chromium/issues/detail?id=345532

You can also play with the DOM inspector, to remove the red bg color, or set the overflow to be visible in the div with tag data-cappuccino-view="TNTabView". Both actions allows the text to be visible.

What is the expected behavior?
content of a div should not be masked by some weird stuff.


It fails almost the same way on latest version of Chrome 33, but works great on Firefox

[Ahmad Saleem]

Fixed in - https://src.chromium.org/viewvc/blink?revision=168634&view=revision