5bcb0364535258657ae63e251d0bcb48285c3336
[WebKit-https.git] / 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="../js/resources/js-test-pre.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>AutoTableLayout</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>FixedTableLayout</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>