third_party/WebKit/LayoutTests/tables/mozilla/collapsing_borders/bug41262-3.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
   2 <!-- saved from url=(0063)http://bugzilla.mozilla.org/attachment.cgi?id=69028&action=view -->
   3 <HTML><HEAD><TITLE>Collapsing Border Test Case</TITLE>
   4 <META http-equiv=Content-Type content="text/html; charset=iso-8859-15">
   5 <STYLE type=text/css>
   6 body { overflow: hidden; }
   7 TABLE {
   8         MARGIN-TOP: 1em; MARGIN-BOTTOM: 1em
   9 }
  10 TABLE.test1 {
  11         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
  12 }
  13 TABLE.test1 TD {
  14         BORDER-RIGHT: green 4px solid; BORDER-TOP: green 4px solid; BORDER-LEFT: green 4px solid; BORDER-BOTTOM: green 4px solid
  15 }
  16 TABLE.test1 TD.cell3 {
  17         BORDER-RIGHT: blue 6px solid; BORDER-TOP: blue 6px solid; BORDER-LEFT: blue 6px solid; BORDER-BOTTOM: blue 6px solid
  18 }
  19 TABLE.test2 #col1 {
  20         BORDER-RIGHT: black 3px solid; BORDER-TOP: black 3px solid; BORDER-LEFT: black 3px solid; BORDER-BOTTOM: black 3px solid
  21 }
  22 TABLE.test2 TD {
  23         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
  24 }
  25 TABLE.test2 TD.solid-blue {
  26         BORDER-RIGHT: blue 5px dashed; BORDER-TOP: blue 5px dashed; BORDER-LEFT: blue 5px dashed; BORDER-BOTTOM: blue 5px dashed
  27 }
  28 TABLE.test2 TD.solid-green {
  29         BORDER-RIGHT: green 5px solid; BORDER-TOP: green 5px solid; BORDER-LEFT: green 5px solid; BORDER-BOTTOM: green 5px solid
  30 }
  31 TABLE.test2 {
  32         BORDER-RIGHT: yellow 5px solid; BORDER-TOP: yellow 5px solid; BORDER-LEFT: yellow 5px solid; BORDER-BOTTOM: yellow 5px solid; BORDER-COLLAPSE: collapse
  33 }
  34 TABLE.test3 {
  35         BORDER-COLLAPSE: collapse
  36 }
  37 TABLE.test3 TR {
  38         BORDER-TOP: black 2px solid
  39 }
  40 TABLE.test3 TR:unknown {
  41         BORDER-TOP-STYLE: none
  42 }
  43 TABLE.test3 TD {
  44         FONT-WEIGHT: bolder; WIDTH: 3em; TEXT-ALIGN: center
  45 }
  46 </STYLE>
  47
  48 <META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
  49 <BODY>
  50 <P>Following table should have 6px solid blue border around cell 3, red 5px
  51 solid border around the rest of table and green 4px solid border between cell 1
  52 and cell 2. The red border should override the green border around the cells
  53 because it's thicker and the blue border should override the red border for the
  54 same reason. </P>
  55 <TABLE class=test1>
  56   <TBODY>
  57   <TR>
  58     <TD>Cell #1</TD>
  59     <TD>Cell #2</TD>
  60     <TD class=cell3>Cell #3</TD></TR></TBODY></TABLE>
  61 <P>See <A
  62 href="http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders">17.6.2 The
  63 collapsing border model</A> for following tests: </P>
  64 <TABLE class=test2>
  65   <COLGROUP>
  66   <COL id=col1>
  67   <COL id=col2>
  68   <COL id=col3>
  69   <TBODY>
  70   <TR id=row1>
  71     <TD>1</TD>
  72     <TD>2</TD>
  73     <TD>3</TD></TR>
  74   <TR id=row2>
  75     <TD>4</TD>
  76     <TD class=solid-blue>5</TD>
  77     <TD class=solid-green>6</TD></TR>
  78   <TR id=row3>
  79     <TD>7</TD>
  80     <TD>8</TD>
  81     <TD>9</TD></TR>
  82   <TR id=row4>
  83     <TD>10</TD>
  84     <TD>11</TD>
  85     <TD>12</TD></TR>
  86   <TR id=row5>
  87     <TD>13</TD>
  88     <TD>14</TD>
  89     <TD>15</TD></TR></TBODY></TABLE>
  90 <P>This is an example rendering for the previous table from <A
  91 href="../images/tbl-border-conflict.gif">http://www.w3.org/TR/REC-CSS2/images/tbl-border-conflict.gif</A>:
  92 <BR><IMG alt="[Example rendering from w3.org]"
  93 src="./images/tbl-border-conflict.gif"> </P>
  94 <P>Following table should have 2px solid black line between rows. There should
  95 be a total of two lines. There will be three lines if user agent doesn't support
  96 <CODE>tr:first-child</CODE>. </P>
  97 <TABLE class=test3>
  98   <TBODY>
  99   <TR>
 100     <TD>a</TD>
 101     <TD>b</TD>
 102     <TD>c</TD></TR>
 103   <TR>
 104     <TD>3</TD>
 105     <TD>4</TD>
 106     <TD>5</TD></TR>
 107   <TR>
 108     <TD>5</TD>
 109     <TD>12</TD>
 110     <TD>13</TD></TR></TBODY></TABLE></BODY></HTML>