Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-position/crashtests/nested-scroll-in-activating-scroll-container.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!-- Scroll-only variant (no position:sticky). A nested async-active scroll
container (#C) sits behind a will-change:transform stacking-context
boundary, inside #B, inside an outer element (#A) that starts
async-inactive because it has no scrollable overflow. Growing #spacer
makes #A a scroll container and async-active during a partial display list
update; #C is not revisited (retained behind the boundary), so its cached
scroll-tree node depth must not go stale. -->
<html class="test-wait">
<head>
<meta charset="utf-8">
<style>
body { margin: 0; }
* { scrollbar-width: none; }
#outer { height: 300px; overflow-y: auto; }
#outer-content { height: 3000px; }
#A { height: 460px; overflow-y: auto; width: 400px; }
#B { height: 200px; overflow-y: auto; background: #eef; }
.wct { will-change: transform; }
#C { height: 100px; overflow-y: auto; background: #efe; }
#spacer { height: 0; }
</style>
</head>
<body>
<div id="outer">
<div id="outer-content">
<div id="A">
<div id="B">
<div class="wct">
<div id="C">
<div style="height:200px;background:blue"></div>
</div>
</div>
<div style="height:200px;background:green"></div>
</div>
<div id="spacer"></div>
</div>
</div>
</div>
<script>
function raf() { return new Promise(r => requestAnimationFrame(r)); }
onload = async () => {
await raf();
await raf();
document.getElementById("spacer").style.height = "400px";
await raf();
await raf();
document.documentElement.classList.remove("test-wait");
};
</script>
</body>
</html>