1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Auto-imported from Gecko test 277995-1.html</title>
5 <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">
7 <meta name="flags" content="dom">
8
9 <script type="text/javascript">
10 function doMore(data) {
11 while(data.hasChildNodes())
12 data.removeChild(data.firstChild);
13 for (var i = 0; i < 10; i++) {
14 append(data);
15 }
16 }
17
18 function append(data) {
19 var row = document.createElement("div");
20 row.setAttribute("class", "row");
21
22 var cell = document.createElement("span");
23 cell.appendChild(document.createTextNode("More Data"));
24 cell.setAttribute("class", "cell");
25 row.appendChild(cell);
26 data.appendChild(row);
27 }
28
29 function doTest() {
30 for (var i = 0; i < 10; ++i) {
31 document.body.offsetWidth;
32 doMore(document.getElementById('data'));
33 }
34 document.documentElement.className = '';
35 }
36 </script>
37 <style type="text/css">
38 .table {
39 display: table;
40 }
41 .row {
42 display: table-row;
43
44 }
45 .cell {
46 display: table-cell;
47 }
48 </style>
49 </head>
50 <body onload="doTest()">
51 <p>There should be no red below, except for antialiasing issues.</p>
52 <div style="position: relative; font-size: 2em;">
53 <div style="position: relative; z-index: 1; color: red; padding: 1px;">
54
55 <table>
56 <tr>
57 <td>
58 <div id="data" class="table">
59 </div>
60 </td>
61 </tr>
62 </table>
63 </div>
64 <div style="position: absolute; z-index: 2; top: 0; color: green; padding: 1px;">
65
66 <table>
67 <tr>
68 <td>
69 <div style="display: table">
70 <div style="display: table-row-group">
71 <div style="display: table-row">
72 <div style="display: table-cell">
73 More Data
74 </div>
75 </div>
76 <div style="display: table-row">
77 <div style="display: table-cell">
78 More Data
79 </div>
80 </div>
81 <div style="display: table-row">
82 <div style="display: table-cell">
83 More Data
84 </div>
85 </div>
86 <div style="display: table-row">
87 <div style="display: table-cell">
88 More Data
89 </div>
90 </div>
91 <div style="display: table-row">
92 <div style="display: table-cell">
93 More Data
94 </div>
95 </div>
96 <div style="display: table-row">
97 <div style="display: table-cell">
98 More Data
99 </div>
100 </div>
101 <div style="display: table-row">
102 <div style="display: table-cell">
103 More Data
104 </div>
105 </div>
106 <div style="display: table-row">
107 <div style="display: table-cell">
108 More Data
109 </div>
110 </div>
111 <div style="display: table-row">
112 <div style="display: table-cell">
113 More Data
114 </div>
115 </div>
116 <div style="display: table-row">
117 <div style="display: table-cell">
118 More Data
119 </div>
120 </div>
121 </div>
122 </div>
123 </td>
124 </tr>
125 </table>
126 </div>
127 </div>
128 </body>
129 </html>