third_party/WebKit/ManualTests/interrupted-compound-transform.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Interrupted Transitions on Transform Test</title>
   8   <style type="text/css" media="screen">
   9     #container {
  10       width: 400px;
  11       height: 400px;
  12       margin: 20px;
  13       border: 1px solid black;
  14       perspective: 800;
  15     }
  16     #tester {
  17       width: 300px;
  18       height: 300px;
  19       margin: 50px;
  20       background-color: blue;
  21       -webkit-transition: transform 3s linear;
  22       transform: rotateX(65deg) translateZ(75px) rotateZ(0deg);
  23       transform-style: preserve-3d;
  24     }
  25     #pos1 {
  26       position:absolute;
  27       width: 300px;
  28       height: 300px;
  29       margin: 50px;
  30       border: 2px solid #F00;
  31       transform: rotateX(65deg) translateZ(75px) rotateZ(118deg);
  32       transform-style: preserve-3d;
  33     }
  34     #pos2 {
  35       position:absolute;
  36       width: 300px;
  37       height: 300px;
  38       margin: 50px;
  39       border: 2px solid #0F0;
  40       transform: rotateX(65deg) translateZ(75px) rotateZ(80deg);
  41       transform-style: preserve-3d;
  42     }
  43   </style>
  44   <script type="text/javascript" charset="utf-8">
  45     function setAngle(index)
  46     {
  47       var tester = document.getElementById('tester');
  48       tester.style.transform = "rotateX(65deg) translateZ(75px) rotateZ(" + index + "deg)";
  49     }
  50
  51     function runTest()
  52     {
  53       window.setTimeout(function() {
  54         setAngle(240);
  55       }, 0);
  56
  57       window.setTimeout(function() {
  58         setAngle(80);
  59       }, 1500);
  60     }
  61     window.addEventListener('load', runTest, false);
  62   </script>
  63 </head>
  64 <body>
  65 In this test you should see a blue diamond spinning in the clockwise direction. After 1.5 seconds it should stop
  66 close to the red outlne and then spin counterclockwise. After 3 more seconds it should stop close to the
  67 position of the green outline.
  68 (see: <a href="https://bugs.webkit.org/show_bug.cgi?id=26162">https://bugs.webkit.org/show_bug.cgi?id=26162)</a>
  69 <div id="container">
  70   <div id="pos1">
  71   </div>
  72   <div id="pos2">
  73   </div>
  74   <div id="tester">
  75   </div>
  76 </div>
  77
  78 </body>
  79 </html>