| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| #target { |
| position: relative; |
| left: 100px; |
| height: 50px; |
| width: 50px; |
| background-color: green; |
| -webkit-transition-property: left; |
| -webkit-transition-duration: 4s; |
| -webkit-transition-timing-function: linear; |
| -webkit-transition-delay: 1s; |
| } |
| |
| #target.moved { |
| left: 200px; |
| } |
| </style> |
| <script src="resources/transition-test-helpers.js"></script> |
| <script> |
| function endTest() { |
| if (window.testRunner) { |
| var target = document.getElementById('target'); |
| internals.pauseTransitionAtTimeOnElement("left", 2.0, target); |
| var left = window.getComputedStyle(target).left; |
| var result = "PASS"; |
| if (left != "125px") { |
| result = "FAIL - expected 125px got " + left; |
| } |
| document.getElementById('result').innerHTML = "<p>" + result + "</p>"; |
| testRunner.notifyDone(); |
| } |
| } |
| |
| function startTest() { |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| document.getElementById("target").className = "moved"; |
| waitForAnimationStart(endTest, 1); |
| } |
| </script> |
| </head> |
| <body onload="startTest()"> |
| <h1>Test for transition delay on testRunner API</h1> |
| |
| <p>This test works only in DumpRenderTree. It uses an API exposed |
| only there to jump to a particular time in a running transition. |
| Tests bug <a href="https://bugs.webkit.org/show_bug.cgi?id=22368">22368</a> |
| </p> |
| |
| <div id="target"></div> |
| |
| <div id="result"></div> |
| |
| </body> |
| </html> |
