Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor.html |
| diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor.html b/third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d69b01fbe5ee1ca9a045a827654ebbdbfaf7832d |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor.html |
| @@ -0,0 +1,60 @@ |
| +<!DOCTYPE html> |
| +<style> |
| +body { |
| + margin: 0; |
| +} |
| + |
| +table { |
| + background: red; |
| +} |
| + |
| +td, th { |
| + height: 50px; |
| + width: 50px; |
| + padding: 0; |
| +} |
| + |
| +th { |
| + background: green; |
|
flackr
2017/04/26 15:21:01
If the sticky element is known opaque we may promo
yigu
2017/04/26 21:46:57
Done.
|
| + position: sticky; |
| + top: 0px; |
| +} |
| + |
| +.scroller { |
| + width: 100px; |
| + height: 200px; |
| +} |
| + |
| +.composited { |
| + will-change: transform; |
| +} |
| +</style> |
| + |
| +<script> |
| +function doTest() { |
| + for (let scroller of document.querySelectorAll('.scroller')) { |
|
flackr
2017/04/26 15:21:01
There's only a single scroller, can just querySele
yigu
2017/04/26 21:46:57
Done.
|
| + scroller.scrollTop = 200; |
| + } |
| +} |
| + |
| +window.addEventListener('load', function() { |
| + window.requestAnimationFrame(function() { |
|
flackr
2017/04/26 15:21:00
Doesn't this need to be declared an async test tha
yigu
2017/04/26 21:46:57
Done.
|
| + window.requestAnimationFrame(doTest); |
| + }) |
| +}); |
| +</script> |
| + |
| +<div class="scroller"> |
| + <table class="composited"> |
|
flackr
2017/04/26 15:21:01
A simpler test would just be a large composited di
yigu
2017/04/26 21:46:57
Done.
|
| + <thead> |
| + <tr><th></th></tr> |
| + </thead> |
| + <tbody> |
| + <tr><td></td></tr> |
| + <tr><td></td></tr> |
| + <tr><td></td></tr> |
| + <tr><td></td></tr> |
| + </tbody> |
| + </table> |
| +</div> |
| + |