--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/interrupted-compound-transform.html Fri Sep 17 09:02:29 2010 +0300
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Interrupted Transitions on Transform Test</title>
+ <style type="text/css" media="screen">
+ #container {
+ width: 400px;
+ height: 400px;
+ margin: 20px;
+ border: 1px solid black;
+ -webkit-perspective: 800;
+ }
+ #tester {
+ width: 300px;
+ height: 300px;
+ margin: 50px;
+ background-color: blue;
+ -webkit-transition: -webkit-transform 3s linear;
+ -webkit-transform: rotateX(65deg) translateZ(75px) rotateZ(0deg);
+ -webkit-transform-style: preserve-3d;
+ }
+ #pos1 {
+ position:absolute;
+ width: 300px;
+ height: 300px;
+ margin: 50px;
+ border: 2px solid #F00;
+ -webkit-transform: rotateX(65deg) translateZ(75px) rotateZ(118deg);
+ -webkit-transform-style: preserve-3d;
+ }
+ #pos2 {
+ position:absolute;
+ width: 300px;
+ height: 300px;
+ margin: 50px;
+ border: 2px solid #0F0;
+ -webkit-transform: rotateX(65deg) translateZ(75px) rotateZ(80deg);
+ -webkit-transform-style: preserve-3d;
+ }
+ </style>
+ <script type="text/javascript" charset="utf-8">
+ function setAngle(index)
+ {
+ var tester = document.getElementById('tester');
+ tester.style.webkitTransform = "rotateX(65deg) translateZ(75px) rotateZ(" + index + "deg)";
+ }
+
+ function runTest()
+ {
+ window.setTimeout(function() {
+ setAngle(240);
+ }, 0);
+
+ window.setTimeout(function() {
+ setAngle(80);
+ }, 1500);
+ }
+ window.addEventListener('load', runTest, false);
+ </script>
+</head>
+<body>
+In this test you should see a blue diamond spinning in the clockwise direction. After 1.5 seconds it should stop
+close to the red outlne and then spin counterclockwise. After 3 more seconds it should stop close to the
+position of the green outline.
+(see: <a href="https://bugs.webkit.org/show_bug.cgi?id=26162">https://bugs.webkit.org/show_bug.cgi?id=26162)</a>
+<div id="container">
+ <div id="pos1">
+ </div>
+ <div id="pos2">
+ </div>
+ <div id="tester">
+ </div>
+</div>
+
+</body>
+</html>