| <!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> |
