haikuwebkit/LayoutTests/animations/fill-mode-forwards.html

97 lines
2.6 KiB
HTML
Raw Permalink Normal View History

<html>
<head>
<script>
Use testRunner instead of layoutTestController in animations tests https://bugs.webkit.org/show_bug.cgi?id=88757 Reviewed by Tony Chang. * animations/3d/change-transform-in-end-event.html: * animations/3d/replace-filling-transform.html: * animations/3d/state-at-end-event-transform.html: * animations/3d/transform-origin-vs-functions.html: * animations/animation-add-events-in-handler.html: * animations/animation-border-overflow.html: * animations/animation-controller-drt-api.html: * animations/animation-direction-reverse-fill-mode-hardware.html: * animations/animation-direction-reverse-fill-mode.html: * animations/animation-drt-api-multiple-keyframes.html: * animations/animation-drt-api.html: * animations/animation-end-event-destroy-renderer.html: * animations/animation-end-event-short-iterations.html: * animations/animation-hit-test-transform.html: * animations/animation-hit-test.html: * animations/animation-iteration-event-destroy-renderer.html: * animations/animation-matrix-negative-scale-unmatrix.html: * animations/animation-on-inline-crash.html: * animations/animation-shorthand-overriding.html: * animations/animation-shorthand-removed.html: * animations/animation-shorthand.html: * animations/animation-start-event-destroy-renderer.html: * animations/animation-welcome-safari.html: * animations/body-removal-crash.html: * animations/change-keyframes-name.html: * animations/change-transform-style-during-animation.html: * animations/combo-transform-translate+scale.html: * animations/empty-keyframes.html: * animations/fill-mode-forwards.html: * animations/fill-mode-iteration-count-non-integer.html: * animations/fill-mode-missing-from-to-keyframes.html: * animations/fill-mode-multiple-keyframes.html: * animations/fill-mode-removed.html: * animations/fill-mode-reverse.html: * animations/fill-mode-transform.html: * animations/fill-mode.html: * animations/fill-unset-properties.html: * animations/font-size-using-ems.html-disabled: * animations/import-crash.html: * animations/keyframe-timing-functions-transform.html: * animations/keyframe-timing-functions2.html: * animations/keyframes-iteration-count-non-integer.html: * animations/longhand-timing-function.html: * animations/missing-from-to-transforms.html: * animations/missing-from-to.html: * animations/pause-crash.html: * animations/resources/animation-test-helpers.js: (checkExpectedValue): (endTest): * animations/state-at-end-event.html: * animations/suspend-resume-animation-events.html: * animations/suspend-transform-animation.html: * animations/transition-and-animation-3.html: * animations/unanimated-style.html: Canonical link: https://commits.webkit.org/106621@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@119985 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-06-11 17:22:07 +00:00
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
var pulsingSquareAnimationEnded = false;
var popAnimationCounter = 0;
function addPopAnimation() {
var square = document.getElementById("square");
square.className = "pop";
popAnimationCounter++;
}
function removePopAnimation() {
var square = document.getElementById("square");
square.className = "";
if (popAnimationCounter == 2) {
var result = document.getElementById("result");
if (pulsingSquareAnimationEnded)
result.innerHTML = "FAIL - pop animation should not be finished after pulse animation"
else
result.innerHTML = "PASS - Test working";
Use testRunner instead of layoutTestController in animations tests https://bugs.webkit.org/show_bug.cgi?id=88757 Reviewed by Tony Chang. * animations/3d/change-transform-in-end-event.html: * animations/3d/replace-filling-transform.html: * animations/3d/state-at-end-event-transform.html: * animations/3d/transform-origin-vs-functions.html: * animations/animation-add-events-in-handler.html: * animations/animation-border-overflow.html: * animations/animation-controller-drt-api.html: * animations/animation-direction-reverse-fill-mode-hardware.html: * animations/animation-direction-reverse-fill-mode.html: * animations/animation-drt-api-multiple-keyframes.html: * animations/animation-drt-api.html: * animations/animation-end-event-destroy-renderer.html: * animations/animation-end-event-short-iterations.html: * animations/animation-hit-test-transform.html: * animations/animation-hit-test.html: * animations/animation-iteration-event-destroy-renderer.html: * animations/animation-matrix-negative-scale-unmatrix.html: * animations/animation-on-inline-crash.html: * animations/animation-shorthand-overriding.html: * animations/animation-shorthand-removed.html: * animations/animation-shorthand.html: * animations/animation-start-event-destroy-renderer.html: * animations/animation-welcome-safari.html: * animations/body-removal-crash.html: * animations/change-keyframes-name.html: * animations/change-transform-style-during-animation.html: * animations/combo-transform-translate+scale.html: * animations/empty-keyframes.html: * animations/fill-mode-forwards.html: * animations/fill-mode-iteration-count-non-integer.html: * animations/fill-mode-missing-from-to-keyframes.html: * animations/fill-mode-multiple-keyframes.html: * animations/fill-mode-removed.html: * animations/fill-mode-reverse.html: * animations/fill-mode-transform.html: * animations/fill-mode.html: * animations/fill-unset-properties.html: * animations/font-size-using-ems.html-disabled: * animations/import-crash.html: * animations/keyframe-timing-functions-transform.html: * animations/keyframe-timing-functions2.html: * animations/keyframes-iteration-count-non-integer.html: * animations/longhand-timing-function.html: * animations/missing-from-to-transforms.html: * animations/missing-from-to.html: * animations/pause-crash.html: * animations/resources/animation-test-helpers.js: (checkExpectedValue): (endTest): * animations/state-at-end-event.html: * animations/suspend-resume-animation-events.html: * animations/suspend-transform-animation.html: * animations/transition-and-animation-3.html: * animations/unanimated-style.html: Canonical link: https://commits.webkit.org/106621@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@119985 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-06-11 17:22:07 +00:00
if (window.testRunner)
testRunner.notifyDone();
}
}
function pulsingSquareEnded() {
pulsingSquareAnimationEnded = true;
}
</script>
<style>
body {
margin-left: 100px;
margin-top: 50px;
}
#square {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
background-color: blue;
opacity: 0;
}
#pulsing-square {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 350px;
background-color: red;
opacity: 0;
-webkit-animation-name: pulse;
-webkit-animation-duration: 0.4s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: 3;
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(0.05); opacity: 1; }
30% { opacity: 1; }
60% { -webkit-transform: scale(0.8); opacity: 0; }
100% { -webkit-transform: scale(0.8); opacity: 0; }
}
@-webkit-keyframes pop {
0% { -webkit-transform: scale(0.05); opacity: 0; }
33% { -webkit-transform: scale(1.08); opacity: 1; }
66% { -webkit-transform: scale(0.92); opacity: 1; }
100% { -webkit-transform: scale(1.0); opacity: 1; }
}
.pop {
-webkit-animation-name: pop;
-webkit-animation-duration: 0.1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div id="square" onwebkitanimationend="removePopAnimation();"></div>
<div id="pulsing-square" onwebkitanimationiteration="setTimeout(addPopAnimation(), 50);"
onwebkitanimationend="pulsingSquareEnded()"></div>
<div id="result"></div>
</body>
</html>