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-inline.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-inline.html b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-inline.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..85000b2c1b45eb97a03e52d3e4eb2670b5d5977e |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/css/sticky/nested/sticky-nested-inline.html |
| @@ -0,0 +1,73 @@ |
| +<!DOCTYPE html> |
| +<script> |
| +if (window.internals) { |
| + internals.settings.setCSSStickyPositionEnabled(true); |
| +} |
| +</script> |
| + |
| +<html> |
| +<head> |
| +<style> |
| + body { |
| + margin: 0; |
| + } |
| + |
| + .scroller { |
| + overflow: hidden; /* hide scrollbars */ |
| + width: 200px; |
| + height: 350px; |
| + outline: 2px solid black; |
| + } |
| + |
| + .container { |
| + width: 200px; |
| + height: 700px; |
| + } |
| + |
| + .outerSticky { |
| + display: inline; |
| + position: sticky; |
| + top: 0; |
| + } |
| + |
| + .innerSticky { |
| + display: inline; |
| + position: sticky; |
| + top: 25px; |
| + } |
| +</style> |
| +<script> |
| +if (window.testRunner) |
| + testRunner.waitUntilDone(); |
| + |
| +function doTest() { |
| + finishTestInXFrames(2); |
| +} |
| + |
| +function finishTestInXFrames(frames) { |
| + if (frames > 0) { |
| + requestAnimationFrame(finishTestInXFrames.bind(null, frames - 1)); |
| + return; |
| + } |
| + finishTest(); |
| +} |
| + |
| +function finishTest() { |
| + for (const scroller of document.querySelectorAll('.scroller')) { |
|
flackr
2017/02/22 22:40:14
There seems to only be one scroller, why the loop?
smcgruer
2017/02/23 20:14:16
Copy/paste error. Removed.
|
| + scroller.scrollTop = 200; |
| + } |
| + if (window.testRunner) |
| + testRunner.notifyDone(); |
| +} |
| + |
| +window.addEventListener('load', doTest, false); |
| +</script> |
| +</head> |
| +<body> |
| + <div class="scroller"> |
| + <div class="container"> |
| + <div class="outerSticky">1<div class="innerSticky">2</div></div> |
|
flackr
2017/02/22 22:40:14
Can you use colored or outlined blocks instead of
smcgruer
2017/02/23 20:14:16
Unless you object, I'm actually going to leave thi
|
| + </div> |
| + </div> |
| +</body> |
| +</html> |
