<!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: linear;
    -webkit-animation-trigger: container-scroll(20px, 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 auto)<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, 10);
}

function checkValueWithScroll() {
    var leftValue = Math.round(window.getComputedStyle(box).getPropertyCSSValue("left").getFloatValue(CSSPrimitiveValue.CSS_NUMBER));

    if (leftValue > 11) // If we were reacting to scroll we'd have a value of 10.
        results.innerHTML += "PASS: Animation was not depending on scroll.<br>";
    else
        results.innerHTML += "FAIL: Value seems to be reacting to scroll. It was " + leftValue + "px<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. It specifies an end value, but that should be ignored because it is
not greater than the start. This means the animation will run to completion
rather than take the scroll value as input. Remember to scroll to the top of
the page before reloading!</p>
<div id="box"></div>

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