<!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.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.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>
Codebase Browser
chromium