LayoutTests/fast/table/border-collapsing/004-vertical.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
 <html><head>
 <title>Table Border Models</title>
 <style type="text/css">
 TABLE   { margin: 1em; width: auto; border: medium solid blue; }
 TD  { border: thin solid green; padding: 5px; }
 TH { border: medium solid purple; padding: 5px; }
 TABLE.one, TABLE.two { border-spacing: 1em; }
 TABLE.one { border-collapse: collapse; }
 TABLE.two { border-collapse: separate; }
 TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
 TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
 TABLE.five { border-collapse: separate; }
 TABLE.five, TABLE.five TD, TABLE.five TH, TABLE.five CAPTION { border: none; }
 TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
     { border: medium solid red; }
 </style>
 </head>
 <body>
 <h1>Table Border Models</h1>

 <p>This tests tests the <a
 href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS2 spec
 rules on table borders</a>.  The styles applied here are:</p>

 <pre>
 TABLE   { margin: 1em; border: medium solid blue; }
 TD  { border: thin solid green; padding: 5px; }
 TH { border: medium solid purple; padding: 5px; }
 TABLE.one, TABLE.two { border-spacing: 1em; }
 TABLE.one { border-collapse: collapse; }
 TABLE.two { border-collapse: separate; }
 TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
 TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
 TABLE.five { border-collapse: separate; }
 TABLE.five, TABLE.five TD, TABLE.five TH { border: none; }
 TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
     { border: medium solid red; }
 </pre>
 <div style="-webkit-writing-mode: vertical-rl;">
 <table class="one">
  <tr>
   <th>Header One</th>
   <th>Header Two</th>
   <th>Header Three</th>
  </tr>
  <tr>
   <td>
    This table uses the collapsed borders model.
   </td>
   <td>
    This means that elements within the cell have no border-spacing.
   </td>
   <td>
    Since it has collapsed borders, the borders on the header cells,
    on all sides, should be medium solid purple.
   </td>
  </tr>
  <tr>
   <td>
    The border of the table itself should be medium solid blue, except
    where header cells override the border.
   </td>
   <td>
    The borders that I haven't already mentioned (all the other internal
    ones) should be thin solid green.
   </td>
   <td>
    This table should have a 1em margin around all edges.  This margin
    is measured from the <em>middle</em> of its border.
   </td>
  </tr>
 </table>


 <table class="two">
  <tr>
   <th>Header One</th>
   <th>Header Two</th>
   <th>Header Three</th>
  </tr>
  <tr>
   <td>
    This table uses the separated borders model.
   </td>
   <td>
    This means that elements within the cell have border-spacing of 1em.
   </td>
   <td>
    The borders on the header cells,
    on all sides, should be medium solid purple.
   </td>
  </tr>
  <tr>
   <td>
    The border of the table itself should be medium solid blue.
   </td>
   <td>
    The borders of other cells should be thin solid green.
   </td>
   <td>
    This table should have a 1em margin around all edges.  This margin
    is measured from the <em>outer edge</em> of its border.
   </td>
  </tr>
 </table>


 <table class="three">
  <tr>
   <th>Header One</th>
   <th>Header Two</th>
   <th>Header Three</th>
  </tr>
  <tr>
   <td>
    This table uses the separated borders model.
   </td>
   <td>
    Elements within the cell have horizontal border-spacing (i.e., width of
    vertical lines) of 0 and vertical
    border-spacing (i.e., height of horizontal lines) of 0.5em.
   </td>
   <td>
    The borders on the header cells,
    on all sides, should be medium solid purple.
   </td>
  </tr>
  <tr>
   <td>
    The border of the table itself should be medium solid blue.
    The borders of other cells should be thin solid green.
   </td>
   <td>
    This table should have a 1em margin around all edges.  This margin
    is measured from the <em>outer edge</em> of its border.
   </td>
   <td>
    The table should not be wider than the room available for it unless
    that space is very small.  Because of its margins, the width of the
    table should be less than 100%.
   </td>
  </tr>
 </table>


 <table class="four">
  <tr>
   <th>Header One</th>
   <th>Header Two</th>
   <th>Header Three</th>
  </tr>
  <tr>
   <td>
    This table uses the separated borders model.
   </td>
   <td>
    Elements within the cell have horizontal border-spacing of 0.5em and vertical
    border-spacing of 0.
   </td>
   <td>
    The borders on the header cells,
    on all sides, should be medium solid purple.
   </td>
  </tr>
  <tr>
   <td>
    The border of the table itself should be medium solid blue.
    The borders of other cells should be thin solid green.
   </td>
   <td>
    This table should have a 1em margin around all edges.  This margin
    is measured from the <em>outer edge</em> of its border.
   </td>
   <td>
    The table should not be wider than the room available for it unless
    that space is very small.  Because of its margins, the width of the
    table should be less than 100%.
   </td>
  </tr>
 </table>


 <table class="five">
 <caption>
  This is the caption.
 </caption>
 <colgroup>
  <col>
 </colgroup>
 <colgroup>
  <col>
  <col>
 </colgroup>
 <thead>
  <tr>
   <th>Header One</th>
   <th>Header Two</th>
   <th>Header Three</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    This table uses the separated borders model.
   </td>
   <td>
    This means that borders are allowed only on table elements or table
    cell elements.
   </td>
   <td>
    They are not allowed on elements that represent rows,
    row-groups, columns, or column-groups.
   </td>
  </tr>
  <tr>
   <td>
    There should be no borders at all on this table!
   </td>
   <td>
    If there are any borders shown that are not medium solid red, then
    the problem is something other than what this test is testing.
   </td>
   <td>
    This table should have a 1em margin around all edges.  This margin
    is measured from the <em>outer edge</em> of its border.
   </td>
  </tr>
 </tbody>
 </table>
 </div>
 </body></html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
	<html><head>
	<title>Table Border Models</title>
	<style type="text/css">
	TABLE { margin: 1em; width: auto; border: medium solid blue; }
	TD { border: thin solid green; padding: 5px; }
	TH { border: medium solid purple; padding: 5px; }
	TABLE.one, TABLE.two { border-spacing: 1em; }
	TABLE.one { border-collapse: collapse; }
	TABLE.two { border-collapse: separate; }
	TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
	TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
	TABLE.five { border-collapse: separate; }
	TABLE.five, TABLE.five TD, TABLE.five TH, TABLE.five CAPTION { border: none; }
	TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
	{ border: medium solid red; }
	</style>
	</head>
	<body>
	<h1>Table Border Models</h1>

	<p>This tests tests the <a
	href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS2 spec
	rules on table borders</a>. The styles applied here are:</p>

	<pre>
	TABLE { margin: 1em; border: medium solid blue; }
	TD { border: thin solid green; padding: 5px; }
	TH { border: medium solid purple; padding: 5px; }
	TABLE.one, TABLE.two { border-spacing: 1em; }
	TABLE.one { border-collapse: collapse; }
	TABLE.two { border-collapse: separate; }
	TABLE.three { border-collapse: separate; border-spacing: 0 0.5em; }
	TABLE.four { border-collapse: separate; border-spacing: 0.5em 0; }
	TABLE.five { border-collapse: separate; }
	TABLE.five, TABLE.five TD, TABLE.five TH { border: none; }
	TABLE.five TR, TABLE.five COL, TABLE.five COLGROUP, TABLE.five TBODY, TABLE.five THEAD
	{ border: medium solid red; }
	</pre>
	<div style="-webkit-writing-mode: vertical-rl;">
	<table class="one">
	<tr>
	<th>Header One</th>
	<th>Header Two</th>
	<th>Header Three</th>
	</tr>
	<tr>
	<td>
	This table uses the collapsed borders model.
	</td>
	<td>
	This means that elements within the cell have no border-spacing.
	</td>
	<td>
	Since it has collapsed borders, the borders on the header cells,
	on all sides, should be medium solid purple.
	</td>
	</tr>
	<tr>
	<td>
	The border of the table itself should be medium solid blue, except
	where header cells override the border.
	</td>
	<td>
	The borders that I haven't already mentioned (all the other internal
	ones) should be thin solid green.
	</td>
	<td>
	This table should have a 1em margin around all edges. This margin
	is measured from the <em>middle</em> of its border.
	</td>
	</tr>
	</table>


	<table class="two">
	<tr>
	<th>Header One</th>
	<th>Header Two</th>
	<th>Header Three</th>
	</tr>
	<tr>
	<td>
	This table uses the separated borders model.
	</td>
	<td>
	This means that elements within the cell have border-spacing of 1em.
	</td>
	<td>
	The borders on the header cells,
	on all sides, should be medium solid purple.
	</td>
	</tr>
	<tr>
	<td>
	The border of the table itself should be medium solid blue.
	</td>
	<td>
	The borders of other cells should be thin solid green.
	</td>
	<td>
	This table should have a 1em margin around all edges. This margin
	is measured from the <em>outer edge</em> of its border.
	</td>
	</tr>
	</table>


	<table class="three">
	<tr>
	<th>Header One</th>
	<th>Header Two</th>
	<th>Header Three</th>
	</tr>
	<tr>
	<td>
	This table uses the separated borders model.
	</td>
	<td>
	Elements within the cell have horizontal border-spacing (i.e., width of
	vertical lines) of 0 and vertical
	border-spacing (i.e., height of horizontal lines) of 0.5em.
	</td>
	<td>
	The borders on the header cells,
	on all sides, should be medium solid purple.
	</td>
	</tr>
	<tr>
	<td>
	The border of the table itself should be medium solid blue.
	The borders of other cells should be thin solid green.
	</td>
	<td>
	This table should have a 1em margin around all edges. This margin
	is measured from the <em>outer edge</em> of its border.
	</td>
	<td>
	The table should not be wider than the room available for it unless
	that space is very small. Because of its margins, the width of the
	table should be less than 100%.
	</td>
	</tr>
	</table>


	<table class="four">
	<tr>
	<th>Header One</th>
	<th>Header Two</th>
	<th>Header Three</th>
	</tr>
	<tr>
	<td>
	This table uses the separated borders model.
	</td>
	<td>
	Elements within the cell have horizontal border-spacing of 0.5em and vertical
	border-spacing of 0.
	</td>
	<td>
	The borders on the header cells,
	on all sides, should be medium solid purple.
	</td>
	</tr>
	<tr>
	<td>
	The border of the table itself should be medium solid blue.
	The borders of other cells should be thin solid green.
	</td>
	<td>
	This table should have a 1em margin around all edges. This margin
	is measured from the <em>outer edge</em> of its border.
	</td>
	<td>
	The table should not be wider than the room available for it unless
	that space is very small. Because of its margins, the width of the
	table should be less than 100%.
	</td>
	</tr>
	</table>


	<table class="five">
	<caption>
	This is the caption.
	</caption>
	<colgroup>
	<col>
	</colgroup>
	<colgroup>
	<col>
	<col>
	</colgroup>
	<thead>
	<tr>
	<th>Header One</th>
	<th>Header Two</th>
	<th>Header Three</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>
	This table uses the separated borders model.
	</td>
	<td>
	This means that borders are allowed only on table elements or table
	cell elements.
	</td>
	<td>
	They are not allowed on elements that represent rows,
	row-groups, columns, or column-groups.
	</td>
	</tr>
	<tr>
	<td>
	There should be no borders at all on this table!
	</td>
	<td>
	If there are any borders shown that are not medium solid red, then
	the problem is something other than what this test is testing.
	</td>
	<td>
	This table should have a 1em margin around all edges. This margin
	is measured from the <em>outer edge</em> of its border.
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</body></html>