Chromium Code Reviews Chromium Code Reviews
Issue 2708883005:
Handle nested position:sticky elements correctly (main thread) (Closed)
| Index: third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-deep.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-deep.html b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-deep.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..78dc5e59be425aba62e96dd0602eee47499d39a2 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-deep.html |
| @@ -0,0 +1,103 @@ |
| +<!DOCTYPE html> |
| +<script> |
| +if (window.internals) { |
| + internals.settings.setCSSStickyPositionEnabled(true); |
|
flackr
2017/02/22 22:40:14
nit: use consistent 2-space tab for tests JS and C
smcgruer
2017/02/23 20:14:16
Done.
|
| +} |
| +</script> |
| + |
| +<html> |
| +<head> |
| +<style> |
| + body { |
| + margin: 0; |
| + } |
| + |
| + .scroller { |
| + overflow: hidden; /* hide scrollbars */ |
| + width: 200px; |
| + height: 500px; |
| + outline: 2px solid black; |
| + } |
| + |
| + .container { |
| + width: 200px; |
| + height: 1000px; |
| + } |
| + |
| + .sticky { |
| + position: sticky; |
| + width: 200px; |
| + top: 0; |
| + } |
| + |
| + .first { |
| + height: 500px; |
| + background: red; |
| + } |
| + |
| + .second { |
| + height: 400px; |
| + background: green; |
| + } |
| + |
| + .third { |
| + height: 300px; |
| + background: blue; |
| + top: 100px; |
| + } |
| + |
| + .fourth { |
| + height: 200px; |
| + background: pink; |
| + top: 100px; |
| + } |
| + |
| + .fifth { |
| + height: 100px; |
| + background: yellow; |
| + } |
| + |
| +</style> |
| +<script> |
| +if (window.testRunner) |
| + testRunner.waitUntilDone(); |
| + |
| +function doTest() { |
| + finishTestInXFrames(2); |
|
flackr
2017/02/22 22:40:14
It's much shorter and easier to understand to writ
smcgruer
2017/02/23 20:14:16
Done.
|
| +} |
| + |
| +function finishTestInXFrames(frames) { |
| + if (frames > 0) { |
| + requestAnimationFrame(finishTestInXFrames.bind(null, frames - 1)); |
| + return; |
| + } |
| + finishTest(); |
| +} |
| + |
| +function finishTest() { |
| + for (const scroller of document.querySelectorAll('.scroller')) { |
| + scroller.scrollTop = 400; |
| + } |
| + if (window.testRunner) |
| + testRunner.notifyDone(); |
| +} |
| + |
| +window.addEventListener('load', doTest, false); |
| +</script> |
| +</head> |
| +<body> |
| + <div class="scroller"> |
| + <div class="container"> |
| + <div class="first sticky"> |
| + <div class="second sticky"> |
| + <div class="third sticky"> |
| + <div class="fourth sticky"> |
| + <div class="fifth sticky"></div> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| +</body> |
| +</html> |
