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

Unified 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 side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.html
diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.html b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.html
index fae12b365cb51fa1edcb843734264f878fc43cf9..ba17df6c77079824a256f7be77b7b078b8b6e099 100644
--- a/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.html
+++ b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table-expected.html
@@ -4,47 +4,194 @@ body {
}
table {
- background: red;
border-collapse: collapse;
}
td, th {
- height: 50px;
- width: 50px;
- padding: 0;
+ height: 40px;
+ width: 40px;
}
th {
- position: absolute;
- top: 25px;
+ position: relative;
+ top: 225px;
background: green;
}
-.container {
- overflow: hidden;
- width: 100px;
- height: 200px;
- outline: 2px solid black;
+.scroller {
+ overflow: auto;
+ height: 400px;
+}
+
+.group {
+ display: inline-block;
+ padding-right: 2em;
+}
+
+.padding {
+ height: 500px;
}
</style>
-<div class="container">
- <table>
- <thead class="sticky">
- <tr class="sticky">
- <th class="sticky"></th>
- </tr>
- </thead>
- <tbody>
- <tr><td></td></tr>
- <tr><td></td></tr>
- <tr><td></td></tr>
- <tr><td></td></tr>
- <tr><td></td></tr>
- <tr><td></td></tr>
- <tr><td></td></tr>
- <tr><td></td></tr>
- <tr><td></td></tr>
- </tbody>
- </table>
+<script>
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+function finishTest() {
+ document.querySelector('.scroller').scrollTop = 200;
+ if (window.testRunner)
+ testRunner.notifyDone();
+}
+
+window.addEventListener('load', function() {
+ requestAnimationFrame(function() {
+ requestAnimationFrame(finishTest);
+ });
+});
+</script>
+
+<div class="scroller">
+
+ <div class="group">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="group">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="group">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="group">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="group">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="group">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="group">
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ <tr><td></td></tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="padding"></div>
+
</div>

Powered by Google App Engine
This is Rietveld 408576698