Chromium Code Reviews Chromium Code Reviews
Issue 2845613002:
Fix the bug that sticky element may not be correctly invalidated due to non-promotion (Closed)
| Index: third_party/WebKit/LayoutTests/paint/invalidation/compositing/non-composited-sticky-element-repaint.html |
| diff --git a/third_party/WebKit/LayoutTests/paint/invalidation/compositing/non-composited-sticky-element-repaint.html b/third_party/WebKit/LayoutTests/paint/invalidation/compositing/non-composited-sticky-element-repaint.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..1c9c120a439db8855e5ea2647fe2aeb35185a8f3 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/paint/invalidation/compositing/non-composited-sticky-element-repaint.html |
| @@ -0,0 +1,50 @@ |
| +<!DOCTYPE html> |
| +<style> |
| +.scroller { |
| + overflow: scroll; |
| + width: 200px; |
| + height: 600px; |
| +} |
| + |
| +.composited { |
| + will-change: transform; |
| +} |
| + |
| +.box { |
| + background: rgba(0, 255, 0, 0.9); |
| + position: sticky; |
| + width: 100%; |
| + height: 50px; |
| + top: 0px; |
| +} |
| + |
| +.container { |
| + width: 100%; |
| + height: 1000px; |
| + background: grey; |
| +} |
| + |
| +.spacer { |
| + background: white; |
| + height: 300px; |
| +} |
| +</style> |
| + |
| +<div id="scroller" class="scroller"> |
| + <div class="composited container"> |
| + <div id="box-need-invalidation" class="box"></div> |
| + <div class="spacer"></div> |
|
yigu
2017/04/27 15:20:10
If this spacer is not composited, e.g. we move it
|
| + <div id="box-not-need-invalidation" class="box"></div> |
| + </div> |
| +</div> |
| + |
| +<script src="../resources/text-based-repaint.js"></script> |
| +<script> |
| + // The first box needs to be invalidated but the second sticky box |
| + // does not as it hasn't passed the starting constraint yet. |
| + function repaintTest() { |
| + let scroller = document.getElementById('scroller'); |
| + scroller.scrollTop = 200; |
| + } |
| + onload = runRepaintAndPixelTest; |
| +</script> |
