Re: Interop issues regarding tables and css tables

Le 2014-06-12 16:36, Greg Whitworth a écrit :
> This is a multi-part problem that I'll _try_ to explain succinctly.
> We found the following an interop issue[1] where Blink/Gecko set the
> baseline for text in a table cell at the top when an image is included
> in the same row. IE sets the baseline as the height of the entire row
> including the image. To test this behavior further I swapped out the
> image with another replaced element, this time a generic iframe and
> now Blink/Gecko offer the same behavior as IE. I would have expected
> all of these to produce the same result (matching IE's behavior).
> 
> This morning an interop issue was brought to our attention[3]
> regarding the CSS display: table and I think it is the same problem.
> There is a weird behavior here where he has set a span to be
> vertical-align: top and Gecko/Chrome pass this behavior on to the next
> cell which is not encased in a span. If you remove the <span>
> Chrome/Gecko behave the same as IE [4]. What's interesting here, is if
> you now replace the image with an <iframe> (mimicking our second demo)
> all three browsers render the same [5].
> 
> Because of this, I propose the following:
> 
> 1. Demo [1] is a bug in Blink/Gecko or we all have bugs for all other
> replaced elements in rows. Also, the CSS table from demo [4] should
> behave the same as demo 1 which it does not.
> 2. Demo [3] is a bug in Blink/Gecko as the vertical align should only
> be applying to the span, not to the next cell. Here is a demo of the
> same CSS demo in a basic table and you will see it behaves the same
> [6], but Blink does not when you replace the image with an iframe,
> however in this case Gecko does [7].
> 
> Again, sorry for the verbosity in this but it seems like Blink and
> Gecko are going down different code paths when rendering a table using
> CSS Display as well as when an image is included in a cell in the row
> (either CSS or normal HTML). With that being said if you remove
> inline-block from the span Blink and Gecko do not agree [8].
> 
> Very strange and I would like to come to a consensus on how to address
> these issues.
> 
> Thanks,
> Greg
> 
> [1] http://jsfiddle.net/grjL5/ basic table with image in row
> [Blink/Gecko Agree | IE does not]
> [2] http://jsfiddle.net/grjL5/5/ basic table with iframe in row
> [Blink/Gecko/IE Agree]
> [3] http://jsfiddle.net/3KZqr/24/CSS table with vertical align and
> inline block [Blink/Gecko Agree | IE does not]
> [4] http://jsfiddle.net/3KZqr/21/ CSS table with no <span> (removing
> vertical align) [Blink/IE/Gecko Agree]
> [5] http://jsfiddle.net/3KZqr/22/ CSS table with an iframe instead of
> image [Blink/IE/Gecko Agree]
> [6] http://jsfiddle.net/grjL5/8/ CSS Table converted to Basic Table
> [Blink/IE/Gecko Agree]
> [7] http://jsfiddle.net/grjL5/9/ basic table with vertical align on
> span [Blink/IE Agree | Gecko does not]
> [8] http://jsfiddle.net/3KZqr/27/ CSS table with inline-block removed
> [Blink/IE Agree | Gecko does not]


Greg,

1- Do you get the same test results (and/or agreements) if you remove
<tbody style="vertical-align: baseline;">
from all 8 tests?

2- What is the IE11's user agent style sheet for tr and td elements 
inasmuch as vertical-align is involved? I ask because according to
http://www.iecss.com/
it is
tr {vertical-align: middle;}
td {vertical-align: middle;}
whereas, in Firefox 30 and Chrome 35, it is
tr {vertical-align: inherit;}
td {vertical-align: inherit;}
and that would (or should or could) make a difference here in your 8 
tests.

3- CSS tables creates necessary missing anonymous table sub-elements 
(like tbody and tr) which may not have no vertical-align declarations, 
like vertical-align: inherit whereas HTML tables do have.

Example given:

CSS table:
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/vertical-align-applies-to-001.htm

Same code but as an HTML table:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/vertical-align-applies-to-001-HTML-Table.html
and the blue square should be at the bottom-left corner in Firefox 30 
and Chrome 35.., all because of tr {vertical-align: inherit;} and td 
{vertical-align: inherit;} in the user agent style sheet.

4-
> [6] http://jsfiddle.net/grjL5/8/ CSS Table converted to Basic Table
> [Blink/IE/Gecko Agree]

Firefox 30 and Chrome 35.0.1916.153 disagree.

Gérard

Received on Friday, 13 June 2014 03:36:25 UTC