<!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, 120px);
}

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

var results;
var box;

var scrollMin = 20;
var scrollMax = 120;

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");
    var leftValue = window.getComputedStyle(box).left;
    if (leftValue == "0px")
        results.innerHTML = "PASS: Value before animation is applied is 0px<br>";
    else
        results.innerHTML = "FAIL: Value before animation is applied should be auto, was " + leftValue + "<br>";
    box.className = "animating";
    setTimeout(checkValueWithoutScroll, 0);
}

function checkValueWithoutScroll() {
    var leftValue = window.getComputedStyle(box).left;
    if (leftValue == "0px")
        results.innerHTML += "PASS: Value with animation but no scroll was 0px<br>";
    else
        results.innerHTML += "FAIL: Value with animation but no scroll should be 0px, was " + leftValue + "<br>";

    window.scrollTo(0, scrollMin + 10);
    setTimeout(function () {
        checkValueWithScroll(10);
    }, 0);
}

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

    if (leftValue == scrollAmount)
        results.innerHTML += "PASS: Value with scroll amount of " + scrollAmount + " was " + scrollAmount + "px<br>";
    else
        results.innerHTML += "FAIL: Value with scroll amount of " + scrollAmount + " should be " + scrollAmount + "px, was " + leftValue + "px<br>";

    if (scrollMin + scrollAmount + 10 < scrollMax) {
        window.scrollTo(0, scrollMin + scrollAmount + 10);
        setTimeout(function () {
            checkValueWithScroll(scrollAmount + 10);
        }, 0);
    } else {
        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 then animates smoothly, moving 100px to the left over the next
100px of scrolling. Remember to scroll to the top of the page before reloading!</p>
<div id="box"></div>

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