sticky-clip-rel-child.html | Explore in Territory

<!DOCTYPE html>
<style>
body {
    height: 2000px;
    margin: 0;
}
.sticky {
    background: red;
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: sticky;
    top: 0;
}
.relative {
    background: green;
    height: 100px;
    width: 100px;
    position: relative;
}
#scroller {
    left: 200px;
    top: 100px;
    height: 100px;
    width: 120px;
    overflow: auto;
    position: absolute;
}
.spacer {
    height: 1000px;
}
</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() {
    window.scrollTo(0, 100);
    document.getElementById('scroller').scrollTop = 100;
    if (window.testRunner)
        testRunner.notifyDone();
}
window.addEventListener('load', doTest, false);
</script>
<div class="sticky">
    <div class="relative">
    </div>
</div>
<div id="scroller">
    <div class="sticky">
        <div class="relative">
        </div>
    </div>
    <div class="spacer"></div>
</div>
chromium/third_party/blink/web_tests/fast/css/sticky/sticky-clip-rel-child.html
