blob: 63e8abd28b3cd38bd8c46220300b994a13ffd286 [file] [log] [blame]
<html>
<head>
<style type="text/css">
#node {
transition: background-color 150ms cubic-bezier(0, 0.5, 0.5, 1);
}
#node.css-anim {
animation: anim 300ms ease-in-out;
}
@keyframes anim {
from {
width: 100px;
}
to {
width: 200px;
}
}
</style>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>
var player;
function startAnimationWithDelay()
{
player = node.animate([{ width: "100px" }, { width: "200px" }], { duration: 200, delay: 100 });
}
function startAnimationWithEndDelay()
{
player = node.animate([{ width: "100px" }, { width: "200px" }], { duration: 20000, delay: 100, endDelay: 200 });
}
function cancelAnimation()
{
player.cancel();
}
function startAnimationWithStepTiming()
{
player = node.animate([{ width: "100px", easing: "step(5, end)" }, { width: "200px", easing: "step-start" }], 200);
}
function startCSSAnimation()
{
node.classList.add("css-anim");
}
function startCSSTransition()
{
node.style.backgroundColor = "blue";
}
var initialize_Animations = function() {
InspectorTest.preloadModule("animation");
}
function test()
{
InspectorTest.selectNodeWithId("node", step1);
var timeline = new WebInspector.AnimationTimeline();
var elementsPanel = WebInspector.ElementsPanel.instance();
elementsPanel.setWidgetBelowDOM(timeline);
// Override timeline width for testing
WebInspector.AnimationTimeline.prototype.width = function() { return 1000; }
// Override animation color for testing
// FIXME: Set animation name of Web Animation instead; not supported yet
WebInspector.AnimationUI.Color = function() { return "black"; }
function step1()
{
InspectorTest.waitForAnimationAdded(step2);
InspectorTest.evaluateInPage("startAnimationWithDelay()");
}
function step2(group)
{
timeline._selectAnimationGroup(group);
timeline._redraw();
InspectorTest.addResult(">>>> Animation with start delay only");
InspectorTest.dumpAnimationTimeline(timeline);
timeline._reset();
InspectorTest.waitForAnimationAdded(step3);
InspectorTest.evaluateInPage("startAnimationWithEndDelay()");
}
function step3(group)
{
timeline._selectAnimationGroup(group);
timeline._redraw();
InspectorTest.addResult(">>>> Animation with start and end delay");
InspectorTest.dumpAnimationTimeline(timeline);
InspectorTest.addSniffer(WebInspector.AnimationTimeline.prototype, "_cancelAnimation", step4);
InspectorTest.evaluateInPage("cancelAnimation()");
}
function step4()
{
InspectorTest.addResult(">>>> Animation canceled");
// Force redraw since the draw is async scheduled
timeline._redraw();
InspectorTest.dumpAnimationTimeline(timeline);
timeline._reset();
InspectorTest.waitForAnimationAdded(step5);
InspectorTest.evaluateInPage("startAnimationWithStepTiming()");
}
function step5(group)
{
timeline._selectAnimationGroup(group);
timeline._redraw();
InspectorTest.addResult(">>>> Animation with step timing function");
InspectorTest.dumpAnimationTimeline(timeline);
timeline._reset();
InspectorTest.waitForAnimationAdded(step6);
InspectorTest.evaluateInPage("startCSSAnimation()");
}
function step6(group)
{
timeline._selectAnimationGroup(group);
timeline._redraw();
InspectorTest.addResult(">>>> CSS animation started");
InspectorTest.dumpAnimationTimeline(timeline);
timeline._reset();
InspectorTest.waitForAnimationAdded(step7);
InspectorTest.evaluateInPage("startCSSTransition()");
}
function step7(group)
{
timeline._selectAnimationGroup(group);
timeline._redraw();
InspectorTest.addResult(">>>> CSS transition started");
InspectorTest.dumpAnimationTimeline(timeline);
InspectorTest.completeTest();
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests the display of animations on the animation timeline.
</p>
<div id="node" style="background-color: red; height: 100px"></div>
</body>
</html>