Execute CSS Animations using new AnimationController
https://bugs.webkit.org/show_bug.cgi?id=20119
I still need to file some follow-on bugs that EricS noticed.
Reviewed by Dave Hyatt
Some new tests:
* manual-tests/animate-duration.html: Added.
* manual-tests/animate-left.html: Added.
* manual-tests/animate-none.html: Added.
* css/CSSStyleSelector.cpp:
* dom/Document.cpp:
- don't redo style when page is place into cache
* page/AnimationController.cpp:
* page/AnimationController.h:
- execute the animations
* rendering/RenderObject.cpp:
* rendering/style/RenderStyle.h:
- make border radii const (for blending)
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@35646 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebCore/manual-tests/animate-none.html b/WebCore/manual-tests/animate-none.html
new file mode 100644
index 0000000..4cb2c8b
--- /dev/null
+++ b/WebCore/manual-tests/animate-none.html
@@ -0,0 +1,207 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Testing animation-name: none</title>
+
+ <style type="text/css" media="screen">
+ div {
+ width: 300px;
+ height: 100px;
+ margin: 10px;
+ -webkit-animation-name: 'fail';
+ -webkit-animation-duration: 3.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'fail' {
+ from {
+ -webkit-transform: rotate(-90deg);
+ }
+ to {
+ -webkit-transform: rotate(90deg);
+ }
+ }
+
+ #box1 {
+ position: relative;
+ background-color: blue;
+ -webkit-animation-name: 'sway1';
+ -webkit-animation-duration: 2.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway1' {
+ from {
+ -webkit-transform: translate(0, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box2 {
+ position: relative;
+ background-color: red;
+ -webkit-animation-name: 'sway2';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway2' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box3 {
+ position: relative;
+ background-color: green;
+ -webkit-animation-name: 'sway3';
+ -webkit-animation-duration: 3.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway3' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box4 {
+ position: relative;
+ background-color: orange;
+ -webkit-animation-name: 'none';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ #box5 {
+ position: relative;
+ background-color: purple;
+ -webkit-animation-name: 'none';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ #box6 {
+ position: relative;
+ background-color: blue;
+ -webkit-animation-name: 'fade', 'sway6';
+ -webkit-animation-duration: 3s, 4s;
+ -webkit-animation-iteration-count: infinite, infinite;
+ -webkit-animation-direction: alternate, alternate;
+ -webkit-animation-timing-function: linear, linear;
+ }
+
+ @-webkit-keyframes 'sway6' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ @-webkit-keyframes 'fade' {
+ from {
+ opacity: 1.0;
+ }
+ to {
+ opacity: 0.1;
+ }
+ }
+
+ /* set up animation that should never be run */
+ @-webkit-keyframes none {
+ from {
+ -webkit-transform: translate(200px, 0) rotate(-90deg);
+ }
+ to {
+ -webkit-transform: translate(0px, 0) rotate(90deg);
+ }
+ }
+
+ </style>
+ <script type="text/javascript" charset="utf-8">
+ function killanims() {
+ console.log("click");
+ var box1 = document.getElementById("box1");
+ box1.style.webkitAnimationName = '';
+ var box2 = document.getElementById("box2");
+ box2.style.webkitAnimationName = 'none';
+ var box3 = document.getElementById("box3");
+ box3.style.webkitAnimationName = "'none'";
+ var box6 = document.getElementById("box6");
+ box6.style.webkitAnimationName = "none, 'sway6'";
+ }
+
+ setTimeout(killanims, 2000);
+ </script>
+ </head>
+ <body>
+
+ <h2>Testing animation: none</h2>
+
+ <p>
+ After 2 seconds only the blue rectangles should be
+ animating.
+ Any resulting animation
+ that involves rotation or fading means that this test has FAILED.</p>
+
+ <div id="box1">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to '' (the empty string).
+ The CSS rule should cause the animation to continue.
+ </div>
+
+ <div id="box2">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to 'none' (as an identifier).
+ This should cause the animation to stop.
+ </div>
+
+ <div id="box3">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to 'none' (as a string).
+ This should cause the animation to stop.
+ </div>
+
+ <div id="box4">
+ This rectangle starts with an animation, but animation-name is
+ set to 'none' (as an identifier). No animation should run.
+ </div>
+
+ <div id="box5">
+ This rectangle starts with an animation, but animation-name is
+ set to 'none' (as a string). No animation should run.
+ </div>
+
+ <div id="box6">
+ This rectangle starts with two animations. After 2 seconds a timer
+ will set the animation-name on the fade to 'none'. The other
+ animation (horizontal) should continue.
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
