table-layout: fixed overflow not painted in normal order

• Component: CSS
• Status: RESOLVED FIXED

[nemo]

As described in http://m8y.org/tmp/testcase103.xhtml, after initially blaming Webkit, I decided that Firefox' behaviour, even though it had been as I had initially expected, was inconsistent.

However, after bz pointed out the relevant portion of the spec on painting order, I understood that, in fact, Webkit appears to be ignoring the painting of backgrounds first, then text.

And that, in fact, I've come to expect that behaviour throughout the web when content overflows.

Furthermore, bz pointed out that normally webkit does the right thing.

He offered the following data URI as a demonstration.
data:text/html,<div style="background: red; color: white; height: 100px; width: 200px">Text</div><div style="margin-top: -100px; background: green; width: 100px; height: 100px"></div>

The workaround is to specify an explicit z-index for webkit, which fortunately I can do in this case fairly easily.

[Dave Hyatt]

Created attachment 27900 [details]
Patch to fix stacking order issue

[Eric Seidel (no email)]

Comment on attachment 27900 [details]
Patch to fix stacking order issue

Hyatt and I talked about this a lot over IRC.  He's gonna update the patch and then I'll make an official review.

[nemo]

Sweet. Thanks.
I thought initially this was going to end up a WONTFIX.

Nice to not have to worry about it.  It did suck up an afternoon figuring out what the heck was going on.

[Dave Hyatt]

Created attachment 27940 [details]
Patch

[Eric Seidel (no email)]

Comment on attachment 27940 [details]
Patch

The changelog doens't mention your isMask() changes.  your test cases are missing newlines at the end.  you added some spaces after shouldBeNormalFlowOnly which you didn't mean to.

Otherwise this looks fine, as far as I can tell.  You'll need a ChangeLog for the LayoutTests directory as well.

[Dave Hyatt]

Fixed in r41203.