Enable position:sticky for <thead> and <tr> elements

third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html

Index: third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html
diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html
index 6c926db62c2ccce16da0339a039ccc95d2d844ae..a3d086c40c7d5070a93def2d4cfcdff80f4f1a67 100644
--- a/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html
+++ b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-table.html
@@ -4,14 +4,12 @@ body {
 }
 
 table {
-  background: red;
   border-collapse: collapse;
 }
 
 td, th {
-  height: 50px;
-  width: 50px;
-  padding: 0;
+  height: 40px;
+  width: 40px;
 }
 
 th {
@@ -19,16 +17,23 @@ th {
 }
 
 .scroller {
-  overflow: hidden; /* hide scrollbars */
-  width: 100px;
-  height: 200px;
-  outline: 2px solid black;
+  overflow: auto;
+  height: 400px;
+}
+
+.group {
+  display: inline-block;
+  padding-right: 2em;
 }
 
 .sticky {
   position: sticky;
   top: 25px;
 }
+
+.padding {
+  height: 500px;
+}
 </style>
 
 <script>
@@ -49,22 +54,154 @@ window.addEventListener('load', function() {
 </script>
 
 <div class="scroller">
-  <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>
+
+  <div class="group">
+    <!-- First table; thead, tr, th all sticky -->
+    <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>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="group">
+    <!-- Second table; thead, tr sticky -->
+    <table>
+      <thead class="sticky">
+        <tr class="sticky">
+          <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">
+    <!-- Third table; thead sticky -->
+    <table>
+      <thead class="sticky">
+        <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">
+    <!-- Fourth table; thead, th sticky -->
+    <table>
+      <thead class="sticky">
+        <tr>
+          <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>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="group">
+    <!-- Fifth table; tr, th sticky -->
+    <table>
+      <thead>
+        <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>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="group">
+    <!-- Sixth table; tr sticky -->
+    <table>
+      <thead>
+        <tr class="sticky">
+          <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">
+    <!-- Seventh table; th sticky -->
+    <table>
+      <thead>
+        <tr>
+          <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>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="padding"></div>
+
 </div>