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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.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 | « third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-thead-multirow-top.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 position: absolute; 16 position: relative;
19 top: 25px; 17 top: 225px;
20 background: green; 18 background: green;
21 } 19 }
22 20
23 .container { 21 .scroller {
24 overflow: hidden; 22 overflow: auto;
25 width: 100px; 23 height: 400px;
26 height: 200px; 24 }
27 outline: 2px solid black; 25
26 .group {
27 display: inline-block;
28 padding-right: 2em;
29 }
30
31 .padding {
32 height: 500px;
28 } 33 }
29 </style> 34 </style>
30 35
31 <div class="container"> 36 <script>
32 <table> 37 if (window.testRunner)
33 <thead class="sticky"> 38 testRunner.waitUntilDone();
34 <tr class="sticky"> 39
35 <th class="sticky"></th> 40 function finishTest() {
36 </tr> 41 document.querySelector('.scroller').scrollTop = 200;
37 </thead> 42 if (window.testRunner)
38 <tbody> 43 testRunner.notifyDone();
39 <tr><td></td></tr> 44 }
40 <tr><td></td></tr> 45
41 <tr><td></td></tr> 46 window.addEventListener('load', function() {
42 <tr><td></td></tr> 47 requestAnimationFrame(function() {
43 <tr><td></td></tr> 48 requestAnimationFrame(finishTest);
44 <tr><td></td></tr> 49 });
45 <tr><td></td></tr> 50 });
46 <tr><td></td></tr> 51 </script>
47 <tr><td></td></tr> 52
48 </tbody> 53 <div class="scroller">
49 </table> 54
55 <div class="group">
56 <table>
57 <thead>
58 <tr>
59 <th></th>
60 </tr>
61 </thead>
62 <tbody>
63 <tr><td></td></tr>
64 <tr><td></td></tr>
65 <tr><td></td></tr>
66 <tr><td></td></tr>
67 <tr><td></td></tr>
68 <tr><td></td></tr>
69 <tr><td></td></tr>
70 <tr><td></td></tr>
71 </tbody>
72 </table>
73 </div>
74
75 <div class="group">
76 <table>
77 <thead>
78 <tr>
79 <th></th>
80 </tr>
81 </thead>
82 <tbody>
83 <tr><td></td></tr>
84 <tr><td></td></tr>
85 <tr><td></td></tr>
86 <tr><td></td></tr>
87 <tr><td></td></tr>
88 <tr><td></td></tr>
89 <tr><td></td></tr>
90 <tr><td></td></tr>
91 </tbody>
92 </table>
93 </div>
94
95 <div class="group">
96 <table>
97 <thead>
98 <tr>
99 <th></th>
100 </tr>
101 </thead>
102 <tbody>
103 <tr><td></td></tr>
104 <tr><td></td></tr>
105 <tr><td></td></tr>
106 <tr><td></td></tr>
107 <tr><td></td></tr>
108 <tr><td></td></tr>
109 <tr><td></td></tr>
110 <tr><td></td></tr>
111 </tbody>
112 </table>
113 </div>
114
115 <div class="group">
116 <table>
117 <thead>
118 <tr>
119 <th></th>
120 </tr>
121 </thead>
122 <tbody>
123 <tr><td></td></tr>
124 <tr><td></td></tr>
125 <tr><td></td></tr>
126 <tr><td></td></tr>
127 <tr><td></td></tr>
128 <tr><td></td></tr>
129 <tr><td></td></tr>
130 <tr><td></td></tr>
131 </tbody>
132 </table>
133 </div>
134
135 <div class="group">
136 <table>
137 <thead>
138 <tr>
139 <th></th>
140 </tr>
141 </thead>
142 <tbody>
143 <tr><td></td></tr>
144 <tr><td></td></tr>
145 <tr><td></td></tr>
146 <tr><td></td></tr>
147 <tr><td></td></tr>
148 <tr><td></td></tr>
149 <tr><td></td></tr>
150 <tr><td></td></tr>
151 </tbody>
152 </table>
153 </div>
154
155 <div class="group">
156 <table>
157 <thead>
158 <tr>
159 <th></th>
160 </tr>
161 </thead>
162 <tbody>
163 <tr><td></td></tr>
164 <tr><td></td></tr>
165 <tr><td></td></tr>
166 <tr><td></td></tr>
167 <tr><td></td></tr>
168 <tr><td></td></tr>
169 <tr><td></td></tr>
170 <tr><td></td></tr>
171 </tbody>
172 </table>
173 </div>
174
175 <div class="group">
176 <table>
177 <thead>
178 <tr>
179 <th></th>
180 </tr>
181 </thead>
182 <tbody>
183 <tr><td></td></tr>
184 <tr><td></td></tr>
185 <tr><td></td></tr>
186 <tr><td></td></tr>
187 <tr><td></td></tr>
188 <tr><td></td></tr>
189 <tr><td></td></tr>
190 <tr><td></td></tr>
191 </tbody>
192 </table>
193 </div>
194
195 <div class="padding"></div>
196
50 </div> 197 </div>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-thead-multirow-top.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698