<!DOCTYPE html>
<style>
body {
    height: 2000px;
}

#box {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: blue;
}

.animating {
    animation-name: slide;
    animation-duration: 1ms;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    -webkit-animation-trigger: container-scroll(20px);
}

@-webkit-keyframes slide {
  from {
      left: 0px;
  }
  to {
      left: 100px;
  }
}
</style>
<script>

var results;
var box;

if (window.testRunner) {
    window.testRunner.dumpAsText();
    window.testRunner.waitUntilDone();
}

if (window.internals)
    window.internals.settings.setVisualViewportEnabled(false);

function runTest() {
    results = document.getElementById("results");
    box = document.getElementById("box");
    results.innerHTML = "Value before animation is applied: " + window.getComputedStyle(box).left + " (should be 0px)<br>";
    box.className = "animating";
    setTimeout(checkValueWithoutScroll, 0);
}

function checkValueWithoutScroll() {
    results.innerHTML += "Value with animation but no scroll: " + window.getComputedStyle(box).left + " (should be 0px)<br>";
    window.scrollTo(0, 30);
    setTimeout(checkValueWithScroll, 0);
}

function checkValueWithScroll() {
    results.innerHTML += "Value with animation after scroll: " + window.getComputedStyle(box).left + " (should be 100px)<br>";
    if (window.testRunner)
        window.testRunner.notifyDone();
}

window.addEventListener("load", runTest, false);

</script>

<p>This element should begin animating only when the page scrolls to 20px from
the top. The animation is almost instantaneous, so it will snap to its final
position. Remember to scroll to the top of the page before reloading!</p>
<div id="box"></div>

<div id="results"></div>