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