| <!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> |
| body { overflow: hidden; } |
| 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> |
