18440 - {compat} nested tables honor percentage heights

Status: VERIFIED FIXED

(Core :: Layout: Tables, defect, P3)

Description

[mcebulski]

This is the exact HTML that is causing the problem for me (code represents a
calender type HTML document):

<HTML><HEAD><META NAME='GENERATOR' Content='Microsoft Visual Studio
6.0'><TITLE></TITLE></HEAD><BODY><FORM><table BGCOLOR = '#D3D3D3' BORDER = '1'
CELLPADDING = '1' CELLSPACING = '0' HEIGHT = '100%' HEIGHT = '100%' WIDTH =
'100%'><tr><td WIDTH = '1%'>&nbsp;<input type=hidden name='RowHeaderFlag'
value=0></td><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th
>Thursday</th><th>Friday</th><th>Saturday</th></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'>&nbsp;</td><td WIDTH =
'14%'><table BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING =
'0' HEIGHT = '100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN
= 'right' WIDTH = '10%'>1</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2'
HEIGHT = '100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table
BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT =
'100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right'
WIDTH = '10%'>2</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR>This is a statement.<BR><BR><BR></td></tr></table></td><td WIDTH =
'14%'><table BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING =
'0' HEIGHT = '100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN
= 'right' WIDTH = '10%'>3</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2'
HEIGHT = '100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table
BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT =
'100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right'
WIDTH = '10%'>4</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>5</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>6</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>7</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>8</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>9</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>10</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>11</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>12</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>13</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>14</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>15</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>16</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>17</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>18</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>19</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>20</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>21</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>22</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>23</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>24</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>25</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>26</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>27</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>28</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>29</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>30</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'>&nbsp;</td><td
WIDTH = '14%'>&nbsp;</td><td WIDTH = '14%'>&nbsp;</td><td WIDTH =
'14%'>&nbsp;</td></tr></table></FORM></BODY></HTML>

Main columns table should appear to be overly "tall". I have the error occuring
both in the apprunner.exe and viewer.exe found mozilla-win32-M9-fullcircle.zip
dated 9/28/99 9:16AM.

Comment 1

[Sam Allen]

The problem here seems to be that nested tables in mozilla honor a 'height=100%'
attribute, whereas nested tables in other browsers do not and instead just treat
the nested table with an 'auto' height. This can be reproduced with the
following snippet:

<table height=100%><tr><td>
  <table border height=100%><tr><Td> text </td></tr></table>
</td></tr></table>

Comment 2

[Sam Allen]

Marking "{compat}" because the problem is manifested because of reliance on
legacy behavior. Changing summary to be more precise.

Comment 3

[Sam Allen]

Attachment: testcase

Comment 4

[ekrock's old account (dead)]

Bulk moving [testcase] code to new testcase keyword. Sorry for the spam!

Comment 5

[karnaze (gone)]

Moving to M16.

Comment 6

[Christian Mattar]

Do I understand this correctly: Mozilla handles this right, but other 
browsers don't?

Comment 7

[karnaze (gone)]

It looks like IE honors the 100% inner table height and Nav4.x does not. Tables 
differ slightly from the CSS 2 spec in that a table with a percentage height 
will use the viewport height if the body doesn't have a computed height. Since 
both Nav and IE support this, it then seems reasonable that the test case should 
honor the nested percentage height. If instead, in standard mode, I were to 
follow the spec, then a lot of pages would be much different than Nav and IE. 

Comment 8

[karnaze (gone)]

Actually, after thinking about this some more, here is what I propose. In 
standard mode, make the outer table auto height (since the body has no computed 
height) and the inner table auto height. In quirks mode, do what Nav4.x does and 
give the outer table a percent height (as a percent of the viewport less margin, 
border, padding of the html and body) and make the inner table auto height since 
its containing block is the outer table's cell and not the outer table. IE is 
considering the containing block to be the table and not the cell which I think 
is wrong. 

So, I guess the gist of this is that I agree with this bug in quirks mode. In 
standard mode the behavior will be much different.

Comment 9

[karnaze (gone)]

Fixed.

Comment 10

[Christine Hoffman]

Using 7/13 build, testcase in Quirks mode operates like Nav4. Verifying bug 
fixed.