<!DOCTYPE html>
<html>
<head>
<style>
#firstCell {
border-right: 3px solid #e5ecf9;
width: 12em;
padding: 0.5em .5em .5em 0;
font-size: 95%;
}
#content {
position: relative;
}
#fixedTable {
table-layout: fixed;
}
#firstFixedCell {
width: 21.2px;
margin: 0.3px;
padding: 0.1px;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody class="collapse">
<tr>
<td id="firstCell">
<div id="content">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th align="left">Cc:</th>
<td>TableLayoutAlgorithmAuto</td>
</tr>
</tbody>
</table>
</div>
</td>
<td width="100%"></td>
</tr>
</tbody>
</table>
<table id="fixedTable">
<tr>
<td id="firstFixedCell"><div id="fixedContent">foo</div></td>
<td>TableLayoutAlgorithmFixed</td>
</tr>
</table>
<p>
Tests that setting the width of an element inside a cell to the computed width of said element does not change the width of the cell itself.
</p>
<script>
var autoEl = document.getElementById("content");
var autoCell = document.getElementById("firstCell");
var autoExpectedWidth = String(autoCell.getBoundingClientRect().width);
autoEl.style.width = autoEl.getBoundingClientRect().width + "px";
if (autoCell.getBoundingClientRect().width == autoExpectedWidth)
testPassed('Cell in AutoTable has expected size');
else
shouldBe('autoCell.getBoundingClientRect().width', autoExpectedWidth);
var fixedEl = document.getElementById("fixedContent");
var fixedCell = document.getElementById("firstFixedCell");
var fixedExpectedWidth = String(fixedCell.getBoundingClientRect().width);
fixedEl.style.width = fixedEl.getBoundingClientRect().width + "px";
if (fixedCell.getBoundingClientRect().width == fixedExpectedWidth)
testPassed('Cell in FixedTable has expected size');
else
shouldBe('fixedCell.getBoundingClientRect().width', fixedExpectedWidth);
</script>
</body>
</html>
Codebase Browser
chromium