third_party/WebKit/LayoutTests/fast/sub-pixel/table-cells-have-stable-width.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             #firstCell {
   6                 border-right: 3px solid #e5ecf9;
   7                 width: 12em;
   8                 padding: 0.5em .5em .5em 0;
   9                 font-size: 95%;
  10             }
  11             #content {
  12                 position: relative;
  13             }
  14             #fixedTable {
  15                 table-layout: fixed;
  16             }
  17             #firstFixedCell {
  18                 width: 21.2px;
  19                 margin: 0.3px;
  20                 padding: 0.1px;
  21             }
  22         </style>
  23         <script src="../../resources/js-test.js"></script>
  24     </head>
  25
  26     <body>
  27         <table width="100%" cellpadding="0" cellspacing="0" border="0">
  28             <tbody class="collapse">
  29                 <tr>
  30                     <td id="firstCell">
  31                         <div id="content">
  32                             <table cellspacing="0" cellpadding="0">
  33                                 <tbody>
  34                                     <tr>
  35                                         <th align="left">Cc:</th>
  36                                         <td>TableLayoutAlgorithmAuto</td>
  37                                     </tr>
  38                             </tbody>
  39                         </table>
  40                     </div>
  41                 </td>
  42                 <td width="100%"></td>
  43                 </tr>
  44             </tbody>
  45         </table>
  46
  47         <table id="fixedTable">
  48             <tr>
  49                 <td id="firstFixedCell"><div id="fixedContent">foo</div></td>
  50                 <td>TableLayoutAlgorithmFixed</td>
  51             </tr>
  52         </table>
  53
  54         <p>
  55             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.
  56         </p>
  57
  58         <script>
  59             var autoEl = document.getElementById("content");
  60             var autoCell = document.getElementById("firstCell");
  61             var autoExpectedWidth = String(autoCell.getBoundingClientRect().width);
  62             autoEl.style.width = autoEl.getBoundingClientRect().width + "px";
  63             if (autoCell.getBoundingClientRect().width == autoExpectedWidth)
  64                 testPassed('Cell in AutoTable has expected size');
  65             else
  66                 shouldBe('autoCell.getBoundingClientRect().width', autoExpectedWidth);
  67
  68
  69             var fixedEl = document.getElementById("fixedContent");
  70             var fixedCell = document.getElementById("firstFixedCell");
  71             var fixedExpectedWidth = String(fixedCell.getBoundingClientRect().width);
  72             fixedEl.style.width = fixedEl.getBoundingClientRect().width + "px";
  73             if (fixedCell.getBoundingClientRect().width == fixedExpectedWidth)
  74                 testPassed('Cell in FixedTable has expected size');
  75             else
  76                 shouldBe('fixedCell.getBoundingClientRect().width', fixedExpectedWidth);
  77
  78         </script>
  79     </body>
  80 </html>