--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/transition-timing-functions.html Fri Sep 17 09:02:29 2010 +0300
@@ -0,0 +1,122 @@
+<!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>Timing Functions for Transitions</title>
+ <style type="text/css" media="screen">
+
+ body {
+ margin: 10px;
+ padding: 0;
+ }
+
+ .container div {
+ position: relative;
+ width: 250px;
+ height: 50px;
+ background: #99c;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: 5s;
+ margin-bottom: 10px;
+ }
+
+ .container:hover .default,
+ .container:hover .ease,
+ .container:hover .linear,
+ .container:hover .ease-in,
+ .container:hover .ease-out,
+ .container:hover .ease-in-out,
+ .container:hover .cubic,
+ .container:hover .error {
+ left: 400px;
+ }
+
+ .container .ease {
+ -webkit-transition-timing-function: ease;
+ }
+
+ .container .linear {
+ -webkit-transition-timing-function: linear;
+ }
+
+ .container .ease-in {
+ -webkit-transition-timing-function: ease-in;
+ }
+
+ .container .ease-out {
+ -webkit-transition-timing-function: ease-out;
+ }
+
+ .container .ease-in-out {
+ -webkit-transition-timing-function: ease-in-out;
+ }
+
+ .container .cubic {
+ -webkit-transition-timing-function: cubic-bezier(.42, .0, .58, 1.0)
+ }
+
+ .container .error {
+ -webkit-transition-timing-function: bananas;
+ }
+
+ #endmarker {
+ position: absolute;
+ width: 10px;
+ left: 400px;
+ top: 100px;
+ height: 500px;
+ background-color: red;
+ }
+
+
+ </style>
+ </head>
+ <body>
+ <div id="endmarker">
+ </div>
+
+ <h1>Timing functions for transitions</h1>
+ <p>On hover, the elements below should transition using the
+ described timing functions</p>
+
+ <div class="container">
+
+ <div class="default">
+ Default (no timing function specified, should be the same as Ease)
+ </div>
+
+ <div class="ease">
+ Ease (the default ease function)
+ </div>
+
+ <div class="linear">
+ Linear
+ </div>
+
+ <div class="ease-in">
+ Ease In
+ </div>
+
+ <div class="ease-out">
+ Ease Out
+ </div>
+
+ <div class="ease-in-out">
+ Ease In Out
+ </div>
+
+ <div class="cubic">
+ Cubic bezier specified the same as Ease In Out
+ </div>
+
+ <div class="error">
+ Bogus definition, should become default of Ease
+ </div>
+
+ </div>
+
+
+
+ </body>
+</html>
\ No newline at end of file