| <!DOCTYPE html> |
| <style> |
| #target { |
| -webkit-clip-path: circle(0px at 1px 2px); |
| transition: -webkit-clip-path 1s; |
| } |
| </style> |
| This test must be run under the test harness. |
| <div id="target"></div> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| var target = document.getElementById('target'); |
| var result = ''; |
| onload = function() { |
| target.style.webkitClipPath = getComputedStyle(target).webkitClipPath; |
| requestAnimationFrame(step1); |
| }; |
| function step1() { |
| target.offsetTop; |
| result = document.timeline.getAnimations().length == 0 ? |
| 'PASS - No transition started.' : |
| 'FAIL - Unexpected transition started.'; |
| target.style.webkitClipPath = 'circle(200px at 0px 0px)'; |
| requestAnimationFrame(step2); |
| } |
| function step2() { |
| result += document.timeline.getAnimations().length == 1 ? |
| '\nPASS - Transition started.' : |
| '\nFAIL - Transition did not start.'; |
| document.documentElement.style.whiteSpace = 'pre'; |
| document.documentElement.textContent = result; |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
