mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-14 03:30:17 +01:00
109 lines
3.7 KiB
HTML
109 lines
3.7 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
|
|
<!-- saved from url=(0063)http://bugzilla.mozilla.org/attachment.cgi?id=69028&action=view -->
|
|
<HTML><HEAD><TITLE>Collapsing Border Test Case</TITLE>
|
|
<META http-equiv=Content-Type content="text/html; charset=iso-8859-15">
|
|
<STYLE type=text/css>TABLE {
|
|
MARGIN-TOP: 1em; MARGIN-BOTTOM: 1em
|
|
}
|
|
TABLE.test1 {
|
|
BORDER-RIGHT: red 5px solid; BORDER-TOP: red 5px solid; BORDER-LEFT: red 5px solid; BORDER-BOTTOM: red 5px solid; BORDER-COLLAPSE: collapse; border-spacing: 5px
|
|
}
|
|
TABLE.test1 TD {
|
|
BORDER-RIGHT: green 4px solid; BORDER-TOP: green 4px solid; BORDER-LEFT: green 4px solid; BORDER-BOTTOM: green 4px solid
|
|
}
|
|
TABLE.test1 TD.cell3 {
|
|
BORDER-RIGHT: blue 6px solid; BORDER-TOP: blue 6px solid; BORDER-LEFT: blue 6px solid; BORDER-BOTTOM: blue 6px solid
|
|
}
|
|
TABLE.test2 #col1 {
|
|
BORDER-RIGHT: black 3px solid; BORDER-TOP: black 3px solid; BORDER-LEFT: black 3px solid; BORDER-BOTTOM: black 3px solid
|
|
}
|
|
TABLE.test2 TD {
|
|
BORDER-RIGHT: red 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: red 1px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: red 1px solid; PADDING-TOP: 1em; BORDER-BOTTOM: red 1px solid
|
|
}
|
|
TABLE.test2 TD.solid-blue {
|
|
BORDER-RIGHT: blue 5px dashed; BORDER-TOP: blue 5px dashed; BORDER-LEFT: blue 5px dashed; BORDER-BOTTOM: blue 5px dashed
|
|
}
|
|
TABLE.test2 TD.solid-green {
|
|
BORDER-RIGHT: green 5px solid; BORDER-TOP: green 5px solid; BORDER-LEFT: green 5px solid; BORDER-BOTTOM: green 5px solid
|
|
}
|
|
TABLE.test2 {
|
|
BORDER-RIGHT: yellow 5px solid; BORDER-TOP: yellow 5px solid; BORDER-LEFT: yellow 5px solid; BORDER-BOTTOM: yellow 5px solid; BORDER-COLLAPSE: collapse
|
|
}
|
|
TABLE.test3 {
|
|
BORDER-COLLAPSE: collapse
|
|
}
|
|
TABLE.test3 TR {
|
|
BORDER-TOP: black 2px solid
|
|
}
|
|
TABLE.test3 TR:unknown {
|
|
BORDER-TOP-STYLE: none
|
|
}
|
|
TABLE.test3 TD {
|
|
FONT-WEIGHT: bolder; WIDTH: 3em; TEXT-ALIGN: center
|
|
}
|
|
</STYLE>
|
|
|
|
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
|
|
<BODY>
|
|
<P>Following table should have 6px solid blue border around cell 3, red 5px
|
|
solid border around the rest of table and green 4px solid border between cell 1
|
|
and cell 2. The red border should override the green border around the cells
|
|
because it's thicker and the blue border should override the red border for the
|
|
same reason. </P>
|
|
<TABLE class=test1>
|
|
<TBODY>
|
|
<TR>
|
|
<TD>Cell #1</TD>
|
|
<TD>Cell #2</TD>
|
|
<TD class=cell3>Cell #3</TD></TR></TBODY></TABLE>
|
|
<P>See <A
|
|
href="http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders">17.6.2 The
|
|
collapsing border model</A> for following tests: </P>
|
|
<TABLE class=test2>
|
|
<COLGROUP>
|
|
<COL id=col1>
|
|
<COL id=col2>
|
|
<COL id=col3>
|
|
<TBODY>
|
|
<TR id=row1>
|
|
<TD>1</TD>
|
|
<TD>2</TD>
|
|
<TD>3</TD></TR>
|
|
<TR id=row2>
|
|
<TD>4</TD>
|
|
<TD class=solid-blue>5</TD>
|
|
<TD class=solid-green>6</TD></TR>
|
|
<TR id=row3>
|
|
<TD>7</TD>
|
|
<TD>8</TD>
|
|
<TD>9</TD></TR>
|
|
<TR id=row4>
|
|
<TD>10</TD>
|
|
<TD>11</TD>
|
|
<TD>12</TD></TR>
|
|
<TR id=row5>
|
|
<TD>13</TD>
|
|
<TD>14</TD>
|
|
<TD>15</TD></TR></TBODY></TABLE>
|
|
<P>This is an example rendering for the previous table from <A
|
|
href="../images/tbl-border-conflict.gif">http://www.w3.org/TR/REC-CSS2/images/tbl-border-conflict.gif</A>:
|
|
<BR><IMG alt="[Example rendering from w3.org]"
|
|
src="./images/tbl-border-conflict.gif"> </P>
|
|
<P>Following table should have 2px solid black line between rows. There should
|
|
be a total of two lines. There will be three lines if user agent doesn't support
|
|
<CODE>tr:first-child</CODE>. </P>
|
|
<TABLE class=test3>
|
|
<TBODY>
|
|
<TR>
|
|
<TD>a</TD>
|
|
<TD>b</TD>
|
|
<TD>c</TD></TR>
|
|
<TR>
|
|
<TD>3</TD>
|
|
<TD>4</TD>
|
|
<TD>5</TD></TR>
|
|
<TR>
|
|
<TD>5</TD>
|
|
<TD>12</TD>
|
|
<TD>13</TD></TR></TBODY></TABLE></BODY></HTML>
|