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