| <!DOCTYPE html> |
| <style> |
| td { |
| padding: 0; |
| } |
| table { |
| width: 10000px; |
| height: 10000px; |
| border-spacing: 0; |
| border-collapse: collapse; |
| } |
| col { |
| border: 2px solid blue; |
| } |
| ::-webkit-scrollbar { |
| width: 0; |
| height: 0; |
| } |
| </style> |
| <div id="container" style="will-change: transform; overflow: scroll; width: 400px; height: 400px"> |
| <table id="table"> |
| <colgroup> |
| <col style="border-color: red"> |
| <col style="border-color: gray"> |
| <col style="border-color: magenta"> |
| <col style="border-color: blue"> |
| <col style="border-color: cyan"> |
| <col style="border-color: yellow"> |
| <col style="border-color: orange"> |
| <col style="border-color: green"> |
| </colgroup> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
| </table> |
| </div> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script> |
| runAfterLayoutAndPaint(function() { |
| container.scrollTop = 10000; |
| container.scrollLeft = 10000; |
| }, true); |
| </script> |