css/css-tables/column-track-merging.html - external/w3c/web-platform-tests - Git at Google

 <!doctype html>
 <title>Column track merging</title>
 <script src='/resources/testharness.js'></script>
 <script src='/resources/testharnessreport.js'></script>
 <script src="/resources/check-layout-th.js"></script>
 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2" />
 <style>

 main table {
   border: 10px solid gray;
   border-spacing: 20px;
 }

 main td {
   width: 50px;
   height:50px;
   padding: 0;
   background:linear-gradient(to right, yellow, orange);
 }
 main caption {
   background: #EEE;
 }
 main .desc {
   margin-top: 20px;
   color: rgb(50,0,0);
 }
 main pre {
   white-space: pre-wrap;

 }
 </style>
 <h3>Column merging investigation</h3>
 <o>Empty columns is a column that has no originating cells</o>
 <p><a href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2">Table standard</a> discusses this under "track merging".</p>
 <ul>
   <li>Do empty columns get coalesced?</li>
   <li>How does this interact with table-layout:fixed, table width</li>
   <li>Is there a difference between columns defined by COL, vs TD.colspan? Yes!</li>
   <li>Do COLs with specified width get merged?</li>
 </ul>
 <p>Compatibility</p>
 <li>Edge17 has a bug where width of a colspanned cell always includes cell width + width of border spacing. It should be max(cell width, border spacing)</li>
 <li>Safari matches Chrome Legacy. TD-originated columns are always merged.</li>
 <li>Firefox follows the standard, but has a few bugs.</li>
 <main>

 <h3>TD merging</h3>

 <pre class="desc">Auto table, and TD.colspan=10
   FF/Chrome Legacy/Safari: Standard. Tracks merge.
   Edge17: Tracks do not merge. Wide cell is 180px (9 * border spacing)
 </pre>
 <table id="td_auto" data-expected-width=180>
 <caption>auto</caption>
 <tr>
   <td colspan=10 data-expected-width=50></td>
   <td></td>
 </tr>
 <tr>
   <td colspan=10></td>
   <td></td>
 </tr>
 </table>

 <pre class="desc">Auto table(400px), and TD.colspan=10
   FF/Chrome Legacy/Safari/Edge17: Standard. Tracks merge. Colspan cell grows because it is unconstrained.
 </pre>
 <table id="td_auto_width" style="width:400px" data-expected-width=400>
 <caption>auto 400px</caption>
 <tr>
   <td colspan=10 data-expected-width=270></td>
   <td></td>
 </tr>
 <tr>
   <td colspan=10></td>
   <td></td>
 </tr>
 </table>

 <pre class="desc">Auto table(130px), and TD.colspan=10
   FF/Chrome Legacy/Safari: Standard. Tracks merge. Colspan cell shrinks to min width becuase it is unconstrained.
   Edge17: Non-compliant, buggy. Wide cell too wide, narrow cell disappears.
 </pre>
 <table id="td_auto_width_130" style="width:130px" data-expected-width=130>
 <caption>auto 130px</caption>
 <tr>
   <td colspan=10 data-expected-width=10><div style="width:10px"></div></td>
   <td></td>
 </tr>
 <tr>
   <td colspan=10></td>
   <td></td>
 </tr>
 </table>

 <pre class="td_fixed">Fixed(400px) table, and TD.colspan=10
   Chrome/Safari: Non-compliant. Tracks merge. Cells are the same size, fixed algo distributes extra width evenly.
   Firefox: Standard.
   Edge17: Standard, buggy. Wide cell too wide. Edge's bug is that it computes max width as (width + border_spacing) instead of max(width, border_spacing).
 </pre>
 <table id="td_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400>
 <caption>fixed 400px</caption>
 <tr>
   <td colspan=10 data-expected-width=180></td>
   <td></td>
 </tr>
 <tr>
   <td colspan=10></td>
   <td></td>
 </tr>
 </table>

 <pre class="td_fixed">Fixed(130px) table, and TD.colspan=10
   Chrome/Safari: Non-compliant.Tracks merge, cells same size.
   Firefox: Standard + buggy. Table does not grow.
   Edge17: Standard + buggy. Wide cell too wide.
 </pre>
 <table id="td_fixed" style="table-layout:fixed; width: 130px" data-expected-width=310>
 <caption>fixed 130px</caption>
 <tr>
   <td colspan=10 data-expected-width=180></td>
   <td></td>
 </tr>
 <tr>
   <td colspan=10></td>
   <td></td>
 </tr>
 </table>

 <h3>COL merging. Same tests with COL span=10 replacing TD</h3>

 <pre class="desc">Auto table
   FF/Chrome Legacy/Safari, Edge17: Standard. wide cell is 50px, tracks do merge.
 </pre>
 <table id="col_auto" data-expected-width=180>
 <caption>auto</caption>
 <col span=10>
 <tr>
   <td data-expected-width=50></td>
   <td></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 </table>

 <pre class="desc">Auto table(400px)
   FF/Chrome Legacy/Safari, Edge17: Standard. Both cells grow the same because unconstrained.
 </pre>
 <table id="col_auto_width" style="width:400px" data-expected-width=400>
 <caption>auto 400px</caption>
 <col span=10>
 <tr>
   <td data-expected-width=160></td>
   <td></td>
 </tr>
 <tr>
   <td ></td>
   <td></td>
 </tr>
 </table>

 <pre class="desc">Auto table(130px)
   FF/Chrome Legacy/Safari, Edge17: Standard. Both cells shrink.
 </pre>
 <table id="col_auto_width_130" style="width:130px" data-expected-width=130>
 <caption>auto 130px</caption>
 <col span=10>
 <tr>
   <td data-expected-width=28><div style="width:10px"></div></td>
   <td></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 </table>

 <pre class="desc">Fixed(400px) table
   Chrome/Safari,Firefox: Standard.
   Edge17: Buggy. Fixed cells grow to fill table.
 </pre>
 <table id="col_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400>
 <caption>fixed 400px</caption>
 <col span=10>
 <tr>
   <td data-expected-width=50></td>
   <td></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 </table>

 <pre class="td_fixed">Fixed(130px) table
   Chrome/Safari: Standard, very buggy. Non-collapsed columns shrink to single border spacing.
   Firefox: Standard.
   Edge17: Non-compliant, collapses columns.
 </pre>
 <table id="col_fixed_130" style="table-layout:fixed; width: 130px" data-expected-width=340>
 <col span=10>
 <caption>fixed 130px</caption>
 <tr>
   <td data-expected-width=50></td>
   <td></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 </table>

 <h3>COL merging when COL has specified width.</h3>

 <ul><li>Chrome Legacy/Edge17/Safari: non-compliant, merge COLs with specified widths.
  <li>Firefox: Standard, unless COL width is 0px. Buggy, does not include border-spacing around columns.</ul>
 <pre class="desc">Auto table, COL width 30px.
   Chrome Legacy/Edge17/Safari: non-compliant, merge.
   Firefox: Standard, buggy. does not include border-spacing around columns.
 </pre>
 <table id="col_auto" data-expected-width=580>
 <caption>auto col 30px</caption>
 <col span=10 style="width:30px">
 <tr>
   <td data-expected-width=50></td>
   <td></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 </table>

 <pre class="desc">Auto table, COL width 5%.
   Chrome Legacy/Edge17/Safari: non-compliant, merge.
   Firefox: Standard, buggy. does not include border-spacing around columns.
 </pre>
 <table id="col_auto" data-expected-width=640>
 <caption>auto col 10%</caption>
 <col span=5 style="width:10%">
 <tr>
   <td data-expected-width=100></td>
   <td></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 </table>

 <pre class="desc">Auto table, COL width 0px.
   Everyone: merges COL
 </pre>
 <table id="col_auto" data-expected-width=180>
 <caption>auto col 0px</caption>
 <col span=10 style="width:0px">
 <tr>
   <td data-expected-width=50></td>
   <td></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
 </table>


 </main>
 <script>
   checkLayout("main table");
 </script>


 </body>
 </html>
	<!doctype html>
	<title>Column track merging</title>
	<script src='/resources/testharness.js'></script>
	<script src='/resources/testharnessreport.js'></script>
	<script src="/resources/check-layout-th.js"></script>
	<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
	<link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2" />
	<style>

	main table {
	border: 10px solid gray;
	border-spacing: 20px;
	}

	main td {
	width: 50px;
	height:50px;
	padding: 0;
	background:linear-gradient(to right, yellow, orange);
	}
	main caption {
	background: #EEE;
	}
	main .desc {
	margin-top: 20px;
	color: rgb(50,0,0);
	}
	main pre {
	white-space: pre-wrap;

	}
	</style>
	<h3>Column merging investigation</h3>
	<o>Empty columns is a column that has no originating cells</o>
	<p><a href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2">Table standard</a> discusses this under "track merging".</p>
	<ul>
	<li>Do empty columns get coalesced?</li>
	<li>How does this interact with table-layout:fixed, table width</li>
	<li>Is there a difference between columns defined by COL, vs TD.colspan? Yes!</li>
	<li>Do COLs with specified width get merged?</li>
	</ul>
	<p>Compatibility</p>
	<li>Edge17 has a bug where width of a colspanned cell always includes cell width + width of border spacing. It should be max(cell width, border spacing)</li>
	<li>Safari matches Chrome Legacy. TD-originated columns are always merged.</li>
	<li>Firefox follows the standard, but has a few bugs.</li>
	<main>

	<h3>TD merging</h3>

	<pre class="desc">Auto table, and TD.colspan=10
	FF/Chrome Legacy/Safari: Standard. Tracks merge.
	Edge17: Tracks do not merge. Wide cell is 180px (9 * border spacing)
	</pre>
	<table id="td_auto" data-expected-width=180>
	<caption>auto</caption>
	<tr>
	<td colspan=10 data-expected-width=50></td>
	<td></td>
	</tr>
	<tr>
	<td colspan=10></td>
	<td></td>
	</tr>
	</table>

	<pre class="desc">Auto table(400px), and TD.colspan=10
	FF/Chrome Legacy/Safari/Edge17: Standard. Tracks merge. Colspan cell grows because it is unconstrained.
	</pre>
	<table id="td_auto_width" style="width:400px" data-expected-width=400>
	<caption>auto 400px</caption>
	<tr>
	<td colspan=10 data-expected-width=270></td>
	<td></td>
	</tr>
	<tr>
	<td colspan=10></td>
	<td></td>
	</tr>
	</table>

	<pre class="desc">Auto table(130px), and TD.colspan=10
	FF/Chrome Legacy/Safari: Standard. Tracks merge. Colspan cell shrinks to min width becuase it is unconstrained.
	Edge17: Non-compliant, buggy. Wide cell too wide, narrow cell disappears.
	</pre>
	<table id="td_auto_width_130" style="width:130px" data-expected-width=130>
	<caption>auto 130px</caption>
	<tr>
	<td colspan=10 data-expected-width=10><div style="width:10px"></div></td>
	<td></td>
	</tr>
	<tr>
	<td colspan=10></td>
	<td></td>
	</tr>
	</table>

	<pre class="td_fixed">Fixed(400px) table, and TD.colspan=10
	Chrome/Safari: Non-compliant. Tracks merge. Cells are the same size, fixed algo distributes extra width evenly.
	Firefox: Standard.
	Edge17: Standard, buggy. Wide cell too wide. Edge's bug is that it computes max width as (width + border_spacing) instead of max(width, border_spacing).
	</pre>
	<table id="td_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400>
	<caption>fixed 400px</caption>
	<tr>
	<td colspan=10 data-expected-width=180></td>
	<td></td>
	</tr>
	<tr>
	<td colspan=10></td>
	<td></td>
	</tr>
	</table>

	<pre class="td_fixed">Fixed(130px) table, and TD.colspan=10
	Chrome/Safari: Non-compliant.Tracks merge, cells same size.
	Firefox: Standard + buggy. Table does not grow.
	Edge17: Standard + buggy. Wide cell too wide.
	</pre>
	<table id="td_fixed" style="table-layout:fixed; width: 130px" data-expected-width=310>
	<caption>fixed 130px</caption>
	<tr>
	<td colspan=10 data-expected-width=180></td>
	<td></td>
	</tr>
	<tr>
	<td colspan=10></td>
	<td></td>
	</tr>
	</table>

	<h3>COL merging. Same tests with COL span=10 replacing TD</h3>

	<pre class="desc">Auto table
	FF/Chrome Legacy/Safari, Edge17: Standard. wide cell is 50px, tracks do merge.
	</pre>
	<table id="col_auto" data-expected-width=180>
	<caption>auto</caption>
	<col span=10>
	<tr>
	<td data-expected-width=50></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	</table>

	<pre class="desc">Auto table(400px)
	FF/Chrome Legacy/Safari, Edge17: Standard. Both cells grow the same because unconstrained.
	</pre>
	<table id="col_auto_width" style="width:400px" data-expected-width=400>
	<caption>auto 400px</caption>
	<col span=10>
	<tr>
	<td data-expected-width=160></td>
	<td></td>
	</tr>
	<tr>
	<td ></td>
	<td></td>
	</tr>
	</table>

	<pre class="desc">Auto table(130px)
	FF/Chrome Legacy/Safari, Edge17: Standard. Both cells shrink.
	</pre>
	<table id="col_auto_width_130" style="width:130px" data-expected-width=130>
	<caption>auto 130px</caption>
	<col span=10>
	<tr>
	<td data-expected-width=28><div style="width:10px"></div></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	</table>

	<pre class="desc">Fixed(400px) table
	Chrome/Safari,Firefox: Standard.
	Edge17: Buggy. Fixed cells grow to fill table.
	</pre>
	<table id="col_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400>
	<caption>fixed 400px</caption>
	<col span=10>
	<tr>
	<td data-expected-width=50></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	</table>

	<pre class="td_fixed">Fixed(130px) table
	Chrome/Safari: Standard, very buggy. Non-collapsed columns shrink to single border spacing.
	Firefox: Standard.
	Edge17: Non-compliant, collapses columns.
	</pre>
	<table id="col_fixed_130" style="table-layout:fixed; width: 130px" data-expected-width=340>
	<col span=10>
	<caption>fixed 130px</caption>
	<tr>
	<td data-expected-width=50></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	</table>

	<h3>COL merging when COL has specified width.</h3>

	<ul><li>Chrome Legacy/Edge17/Safari: non-compliant, merge COLs with specified widths.
	<li>Firefox: Standard, unless COL width is 0px. Buggy, does not include border-spacing around columns.</ul>
	<pre class="desc">Auto table, COL width 30px.
	Chrome Legacy/Edge17/Safari: non-compliant, merge.
	Firefox: Standard, buggy. does not include border-spacing around columns.
	</pre>
	<table id="col_auto" data-expected-width=580>
	<caption>auto col 30px</caption>
	<col span=10 style="width:30px">
	<tr>
	<td data-expected-width=50></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	</table>

	<pre class="desc">Auto table, COL width 5%.
	Chrome Legacy/Edge17/Safari: non-compliant, merge.
	Firefox: Standard, buggy. does not include border-spacing around columns.
	</pre>
	<table id="col_auto" data-expected-width=640>
	<caption>auto col 10%</caption>
	<col span=5 style="width:10%">
	<tr>
	<td data-expected-width=100></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	</table>

	<pre class="desc">Auto table, COL width 0px.
	Everyone: merges COL
	</pre>
	<table id="col_auto" data-expected-width=180>
	<caption>auto col 0px</caption>
	<col span=10 style="width:0px">
	<tr>
	<td data-expected-width=50></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	</tr>
	</table>


	</main>
	<script>
	checkLayout("main table");
	</script>


	</body>
	</html>