Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(82)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html

Issue 2786743002: Enable position:sticky for <thead> and <tr> elements (Closed)
Patch Set: Rebase over blink reformat Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <style> 1 <style>
2 body { 2 body {
3 margin: 0; 3 margin: 0;
4 } 4 }
5 5
6 table { 6 table {
7 background: red;
8 border-collapse: collapse; 7 border-collapse: collapse;
9 } 8 }
10 9
11 td, th { 10 td, th {
12 height: 50px; 11 height: 40px;
13 width: 50px; 12 width: 40px;
14 padding: 0;
15 } 13 }
16 14
17 th { 15 th {
18 background: green; 16 background: green;
19 } 17 }
20 18
21 .scroller { 19 .scroller {
22 overflow: hidden; /* hide scrollbars */ 20 overflow: auto;
23 width: 100px; 21 height: 400px;
24 height: 200px; 22 }
25 outline: 2px solid black; 23
24 .group {
25 display: inline-block;
26 padding-right: 2em;
26 } 27 }
27 28
28 .sticky { 29 .sticky {
29 position: sticky; 30 position: sticky;
30 top: 25px; 31 top: 25px;
31 } 32 }
33
34 .padding {
35 height: 500px;
36 }
32 </style> 37 </style>
33 38
34 <script> 39 <script>
35 if (window.testRunner) 40 if (window.testRunner)
36 testRunner.waitUntilDone(); 41 testRunner.waitUntilDone();
37 42
38 function finishTest() { 43 function finishTest() {
39 document.querySelector('.scroller').scrollTop = 200; 44 document.querySelector('.scroller').scrollTop = 200;
40 if (window.testRunner) 45 if (window.testRunner)
41 testRunner.notifyDone(); 46 testRunner.notifyDone();
42 } 47 }
43 48
44 window.addEventListener('load', function() { 49 window.addEventListener('load', function() {
45 requestAnimationFrame(function() { 50 requestAnimationFrame(function() {
46 requestAnimationFrame(finishTest); 51 requestAnimationFrame(finishTest);
47 }); 52 });
48 }); 53 });
49 </script> 54 </script>
50 55
51 <div class="scroller"> 56 <div class="scroller">
52 <table> 57
53 <thead class="sticky"> 58 <div class="group">
54 <tr class="sticky"> 59 <!-- First table; thead, tr, th all sticky -->
55 <th class="sticky"></th> 60 <table>
56 </tr> 61 <thead class="sticky">
57 </thead> 62 <tr class="sticky">
58 <tbody> 63 <th class="sticky"></th>
59 <tr><td></td></tr> 64 </tr>
60 <tr><td></td></tr> 65 </thead>
61 <tr><td></td></tr> 66 <tbody>
62 <tr><td></td></tr> 67 <tr><td></td></tr>
63 <tr><td></td></tr> 68 <tr><td></td></tr>
64 <tr><td></td></tr> 69 <tr><td></td></tr>
65 <tr><td></td></tr> 70 <tr><td></td></tr>
66 <tr><td></td></tr> 71 <tr><td></td></tr>
67 <tr><td></td></tr> 72 <tr><td></td></tr>
68 </tbody> 73 <tr><td></td></tr>
69 </table> 74 <tr><td></td></tr>
75 </tbody>
76 </table>
77 </div>
78
79 <div class="group">
80 <!-- Second table; thead, tr sticky -->
81 <table>
82 <thead class="sticky">
83 <tr class="sticky">
84 <th></th>
85 </tr>
86 </thead>
87 <tbody>
88 <tr><td></td></tr>
89 <tr><td></td></tr>
90 <tr><td></td></tr>
91 <tr><td></td></tr>
92 <tr><td></td></tr>
93 <tr><td></td></tr>
94 <tr><td></td></tr>
95 <tr><td></td></tr>
96 </tbody>
97 </table>
98 </div>
99
100 <div class="group">
101 <!-- Third table; thead sticky -->
102 <table>
103 <thead class="sticky">
104 <tr>
105 <th></th>
106 </tr>
107 </thead>
108 <tbody>
109 <tr><td></td></tr>
110 <tr><td></td></tr>
111 <tr><td></td></tr>
112 <tr><td></td></tr>
113 <tr><td></td></tr>
114 <tr><td></td></tr>
115 <tr><td></td></tr>
116 <tr><td></td></tr>
117 </tbody>
118 </table>
119 </div>
120
121 <div class="group">
122 <!-- Fourth table; thead, th sticky -->
123 <table>
124 <thead class="sticky">
125 <tr>
126 <th class="sticky"></th>
127 </tr>
128 </thead>
129 <tbody>
130 <tr><td></td></tr>
131 <tr><td></td></tr>
132 <tr><td></td></tr>
133 <tr><td></td></tr>
134 <tr><td></td></tr>
135 <tr><td></td></tr>
136 <tr><td></td></tr>
137 <tr><td></td></tr>
138 </tbody>
139 </table>
140 </div>
141
142 <div class="group">
143 <!-- Fifth table; tr, th sticky -->
144 <table>
145 <thead>
146 <tr class="sticky">
147 <th class="sticky"></th>
148 </tr>
149 </thead>
150 <tbody>
151 <tr><td></td></tr>
152 <tr><td></td></tr>
153 <tr><td></td></tr>
154 <tr><td></td></tr>
155 <tr><td></td></tr>
156 <tr><td></td></tr>
157 <tr><td></td></tr>
158 <tr><td></td></tr>
159 </tbody>
160 </table>
161 </div>
162
163 <div class="group">
164 <!-- Sixth table; tr sticky -->
165 <table>
166 <thead>
167 <tr class="sticky">
168 <th></th>
169 </tr>
170 </thead>
171 <tbody>
172 <tr><td></td></tr>
173 <tr><td></td></tr>
174 <tr><td></td></tr>
175 <tr><td></td></tr>
176 <tr><td></td></tr>
177 <tr><td></td></tr>
178 <tr><td></td></tr>
179 <tr><td></td></tr>
180 </tbody>
181 </table>
182 </div>
183
184 <div class="group">
185 <!-- Seventh table; th sticky -->
186 <table>
187 <thead>
188 <tr>
189 <th class="sticky"</th>
190 </tr>
191 </thead>
192 <tbody>
193 <tr><td></td></tr>
194 <tr><td></td></tr>
195 <tr><td></td></tr>
196 <tr><td></td></tr>
197 <tr><td></td></tr>
198 <tr><td></td></tr>
199 <tr><td></td></tr>
200 <tr><td></td></tr>
201 </tbody>
202 </table>
203 </div>
204
205 <div class="padding"></div>
206
70 </div> 207 </div>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698