This commit is contained in:
karnaze%netscape.com 1999-09-15 03:54:43 +00:00
Родитель 89198d119d
Коммит 9f74a26a65
13 изменённых файлов: 981 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,4 @@
<table border="1" width="100%">
<tr><td colspan="2" width="100%">D</td></tr>
<tr><td>X</td><td>X</td></tr>
</table>

Просмотреть файл

@ -0,0 +1,77 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<BASE HREF="http://www.webstandards.org/">
<TITLE>Mozilla Tests: Table Sizing Problems</TITLE>
<STYLE type="text/css">
TD { border: solid green 1px; }
TABLE { border: dotted navy 1px; }
DIV { width: 608px; border: solid 1px red; margin: 1em 0; }
</STYLE>
<p>The table below should have the same width as the red DIV
below this paragraph. The inner image should just fit. The
image <em>should not</em> overrun the borders. </div>
<div></div>
<table width="608">
<tr>
<td width="25%">a</td>
<td width="25%">b</td>
<td width="25%">c</td>
<td width="25%">d</td>
</tr>
<tr>
<td colspan="2" width="50%"> eee </td>
<td colspan="2" width="50%"> f </td>
</tr>
<tr>
<td colspan="4"> <img src="wsp600bot.gif"> </td>
</tr>
</table>
<div></div>
<p>Mozilla makes the table way too small for no apparent reason.</p>
<p>Here is the same table, one pixel wider:</p>
<table width="609">
<tr>
<td width="25%">a</td>
<td width="25%">b</td>
<td width="25%">c</td>
<td width="25%">d</td>
</tr>
<tr>
<td colspan="2" width="50%"> eee </td>
<td colspan="2" width="50%"> f </td>
</tr>
<tr>
<td colspan="4"> <img src="wsp600bot.gif"> </td>
</tr>
</table>
<p>Observations: Fiddle about with the content of the "eee" cell and everything changes.
Remove any of the three rows and things change. Remove any of the four columns and
things change. Remove the image and things change.</p>
<p>(Note: If the image has disappeared from the server, replace it with any 593px
image you like.)</p>
<p>See also <a href="tablewidth.html">tablewidth.html</a>.</p>
<hr>
</BODY>
</HTML>

Просмотреть файл

@ -0,0 +1,10 @@
<TABLE BORDER="0" WIDTH="600" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH=80 VALIGN=BOTTOM><IMG SRC="../images/rnsite_logo.gif" ALT="real.com home" WIDTH="80" HEIGHT="70" BORDER="0"></TD>
<TD WIDTH=520 VALIGN=BOTTOM><IMG SRC="../images/navtop_products.gif" ALT="Products" WIDTH="104" HEIGHT="20" BORDER="0" NAME="products"><IMG SRC="http://images.real.com/pics/general/navtop_showcase.gif" ALT="Showcase" WIDTH="104" HEIGHT="20" BORDER="0" NAME="showcase"><IMG SRC="http://images.real.com/pics/general/navtop_solutions.gif" ALT="Solutions" WIDTH="104"
HEIGHT="20" BORDER="0" NAME="solutions"><IMG SRC="../images/navtop_devzone.gif" ALT="DevZone" WIDTH="104" HEIGHT="20" BORDER="0" NAME="devzone"><IMG SRC="http://images.real.com/pics/general/navtop_company.gif" ALT="Company" WIDTH="104" HEIGHT="20" BORDER="0" NAME="company"></TD>
</TR>
<TR>
<TD BGCOLOR="#CCCC99" VALIGN="TOP" WIDTH="600" COLSPAN=2><IMG SRC="../images/home_beige_top.gif" WIDTH="600" HEIGHT="24" BORDER="0"></TD>
</TR>
</TABLE>

Просмотреть файл

@ -0,0 +1,153 @@
<html>
<head><base href="http://www.interactive.hp.com/devexchange/nam/services.html">
</head>
<BODY>
<TABLE border=1 width=590>
<TR>
<TD colspan=3>
<img width=590 height=73 src="/devexchange/graphics/devex_h.gif">
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width=110 bgcolor=#94BD73>
LH column image</TD>
<TD VALIGN="TOP" width=10>&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD VALIGN="TOP" width=470>
<p>
HP Peripherals Developer Program
<p>
PROGRAM SERVICES
<p>
etc., etc. ...
</TD>
</TR>
<TR><td colspan=3 height=33>
<img width=589 height=33 src="/devexchange/graphics/devex_f.gif">
</TD></TR>
<TR>
<TD>
<img width=110 height=39 src="/devexchange/graphics/fnav.gif">
</TD>
<TH colspan=2>
text links
</TH>
</TR>
</TABLE>
<hr>
<p><b>Now, nuke the IMG (two of which are colspan=3) -- the table lines up.</b></p>
<TABLE border=1 width=590>
<TR>
<TD colspan=3>
IMG in a colspan=3
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width=110 bgcolor=#94BD73>
LH column image</TD>
<TD VALIGN="TOP" width=10>&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD VALIGN="TOP" width=470>
<p>
HP Peripherals Developer Program
<p>
PROGRAM SERVICES
<p>
etc., etc. ...
</TD>
</TR>
<TR><td colspan=3 height=33>
IMG in a colspan=3
</TD></TR>
<TR>
<TD>
just an IMG
</TD>
<TH colspan=2>
text links
</TH>
</TR>
</TABLE>
<hr>
<p><b>Simpler comparison -- two rows, first is IMG in colspan=3 -- tables not OK</b></p>
<TABLE border=1 width=590>
<TR>
<TD colspan=3>
<img width=590 height=73 src="/devexchange/graphics/devex_h.gif">
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width=110 bgcolor=#94BD73>
LH column image</TD>
<TD VALIGN="TOP" width=10>&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD VALIGN="TOP" width=470>
<p>
HP Peripherals Developer Program
<p>
PROGRAM SERVICES
<p>
etc., etc. ...
</TD>
</TR>
</TABLE>
<hr>
<p><b>Simpler comparison -- nuke the IMG (replace with text) -- tables line up now.</b></p>
<TABLE border=1 width=590>
<TR>
<TD colspan=3>
text instead of IMG in colspan=3
</TD>
</TR>
<TR>
<TD VALIGN="TOP" width=110 bgcolor=#94BD73>
LH column image</TD>
<TD VALIGN="TOP" width=10>&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD VALIGN="TOP" width=470>
<p>
HP Peripherals Developer Program
<p>
PROGRAM SERVICES
<p>
etc., etc. ...
</TD>
</TR>
</TABLE>
</body>
</html>

Просмотреть файл

@ -0,0 +1,104 @@
<HTML><HEAD><base href="http://www.book.ru/snk/"></HEAD>
<BODY>
<p>This first table is the simple test case. Colspan confuses the width
allocation when there is an image in the colspanned row. </p>
<TABLE BORDER WIDTH="620">
<TR>
<TD WIDTH=420>
foo
</td>
<td WIDTH=200>
bar
</td>
</tr>
<TR>
<TD COLSPAN=2>
<img src="../images/rle.cgi?1865?111335577"
alt="Russian LinkExchange Banner Network" border="0" height="60"
width="468">
</TD>
</TR>
</table>
<p>This second table is the same as the first, minus the second
'colspan=2' row. Widths are now correct.</p>
<TABLE BORDER WIDTH="620">
<TR>
<TD WIDTH=420>
foo
</td>
<td WIDTH=200>
bar
</td>
</tr>
</table>
<p>An observation: Note that as the image-width approaches
the table-width, the two columns approach equal width (error increases).
Conversely, below some threshold image-width (which is about 390px or 30px less than the TD WIDTH=420), the error is (apparently) zero.
</p>
<p>Here the &lt;img width=600&gt;</p>
<TABLE BORDER WIDTH="620">
<TR>
<TD WIDTH=420>
foo
</td>
<td WIDTH=200>
bar
</td>
</tr>
<TR>
<TD COLSPAN=2>
<img src="../images/rle.cgi?1865?111335577"
alt="Russian LinkExchange Banner Network" border="0" height="60"
width="600">
</TD>
</TR>
</table>
<p>Here the &lt;img width=400&gt; (error is almost zero).</p>
<TABLE BORDER WIDTH="620" bgcolor="#dddddd">
<TR>
<TD WIDTH=420>
foo (single row table)
</td>
<td WIDTH=200>
bar (single row table)
</td>
</tr>
</table>
<TABLE BORDER WIDTH="620">
<TR>
<TD WIDTH=420>
foo
</td>
<td WIDTH=200>
bar
</td>
</tr>
<TR>
<TD COLSPAN=2>
<img src="../images/rle.cgi?1865?111335577"
alt="Russian LinkExchange Banner Network" border="0" height="60"
width="400">
</TD>
</TR>
</table>
<p>I tested the above with M4 and May01 build for win95. (The above
examples assume that images load normally -- N.B. for May01 the images
initially load, and the width error is visually apparent, but then the
images get replaced by their ALT text, and the width error is no
longer present -- this is, of course, a different issue/bug.)
</BODY></HTML>

Просмотреть файл

@ -5,6 +5,7 @@ file:///s:/mozilla/layout/html/tests/table/bugs/bug10296-2.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug1055-1.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug1055-2.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug10036.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug10039.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug10633.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug1067-1.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug1067-2.html
@ -58,6 +59,8 @@ file:///s:/mozilla/layout/html/tests/table/bugs/bug2763.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2773.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2886.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2886-2.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2947.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2954.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2962.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2973.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug2981-1.html
@ -74,6 +77,7 @@ file:///s:/mozilla/layout/html/tests/table/bugs/bug3309-2.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug3517.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug3718.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug3831.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug3977.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug4093.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug4284.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug4294.html
@ -90,6 +94,7 @@ file:///s:/mozilla/layout/html/tests/table/bugs/bug4803.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug5188.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug5797.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug5798.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug5835.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug5838.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug625.html
file:///s:/mozilla/layout/html/tests/table/bugs/bug6184.html

Просмотреть файл

@ -13,6 +13,7 @@ file:///s:/mozilla/layout/html/tests/table/core/misc.html
file:///s:/mozilla/layout/html/tests/table/core/misc.html
file:///s:/mozilla/layout/html/tests/table/core/nested1.html
file:///s:/mozilla/layout/html/tests/table/core/row_span.html
file:///s:/mozilla/layout/html/tests/table/core/standards1.html
file:///s:/mozilla/layout/html/tests/table/core/table_frame.html
file:///s:/mozilla/layout/html/tests/table/core/table_heights.html
file:///s:/mozilla/layout/html/tests/table/core/table_rules.html

Просмотреть файл

@ -0,0 +1,627 @@
<!DOCTYPE HTML PUBLIC "NavQuirks">
<TITLE>Mozilla Tests: Colspan &amp; Width</TITLE>
<STYLE>
TABLE, TR, TD { border: none; }
#a { background: lime; }
#b { background: yellow; }
#c { background: fuchsia; }
DIV { border: solid red; width: 400px; }
</STYLE>
<h1>Problems with COLSPAN and WIDTH</h1>
<p>Each block of tables should be identical.</p>
<h2>Sized Tables</h2>
<P>The following tables have width=400, which should make them the
same width as the red lines which are caused by DIVs:</P>
<h3>260/140</h3>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a>
plain
</TD>
<TD id=b WIDTH=140>
width=140
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width=260>
width=260
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width=260>
width=260
</TD>
<TD id=b width=140>
width=140
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width=260>
width=260
</TD>
<TD id=b width=140>
width=140
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width="65%">
width=65%
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a>
plain
</TD>
<TD id=b width="35%">
width=35%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width="65%">
width=65%
</TD>
<TD id=b width="35%">
width=35%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<h3>140/260</h3>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width=140>
width=140
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a>
plain
</TD>
<TD id=b WIDTH=260>
width=260
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width=140>
width=140
</TD>
<TD id=b width=260>
width=260
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width=140>
width=140
</TD>
<TD id=b width=260>
width=260
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width="35%">
width=35%
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a>
plain
</TD>
<TD id=b width="65%">
width=65%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width="35%">
width=35%
</TD>
<TD id=b width="65%">
width=65%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<h3>50%</h3>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width="50%">
width=50%
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a>
plain
</TD>
<TD id=b width="50%">
width=50%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a width="50%">
width=50%
</TD>
<TD id=b width="50%">
width=50%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a>
plain
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE WIDTH=400>
<TR>
<TD id=a WIDTH=200>
width=200
</TD>
<TD id=b WIDTH=200>
width=200
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<h2>Tables Without Width</h2>
<P>The following tables have no width. They should still be the same
size, by virtue of them having a 400 pixel cell and no
padding/margin/borders.</P>
<h3>260/140</h3>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a>
plain
</TD>
<TD id=b WIDTH=140>
width=140
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width=260>
width=260
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width=260>
width=260
</TD>
<TD id=b width=140>
width=140
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width=260>
width=260
</TD>
<TD id=b width=140>
width=140
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<h3>140/260</h3>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width=140>
width=140
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a>
plain
</TD>
<TD id=b WIDTH=260>
width=260
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width=140>
width=140
</TD>
<TD id=b width=260>
width=260
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width=140>
width=140
</TD>
<TD id=b width=260>
width=260
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>
<h3>50%</h3>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width="50%">
width=50%
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a>
plain
</TD>
<TD id=b width="50%">
width=50%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a width="50%">
width=50%
</TD>
<TD id=b width="50%">
width=50%
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a>
plain
</TD>
<TD id=b>
plain
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2 WIDTH=400>
colspan=2 width=400
</TD>
</TR>
</TABLE>
<DIV></DIV>
<TABLE>
<TR>
<TD id=a WIDTH=200>
width=200
</TD>
<TD id=b WIDTH=200>
width=200
</TD>
</TR>
<TR>
<TD id=c COLSPAN=2>
colspan=2
</TD>
</TR>
</TABLE>
<DIV></DIV>

Двоичные данные
layout/html/tests/table/images/home_beige_top.gif Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 814 B

Двоичные данные
layout/html/tests/table/images/navtop_devzone.gif Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 432 B

Двоичные данные
layout/html/tests/table/images/navtop_products.gif Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 571 B

Двоичные данные
layout/html/tests/table/images/rle.cgi Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 258 B

Двоичные данные
layout/html/tests/table/images/rnsite_logo.gif Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB