src/third_party/WebKit/LayoutTests/transitions/extra-transition.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5   body {
   6       background: url('resources/Aurora.jpg');
   7       -webkit-background-size: 100% 100%;
   8       font-family: "Lucida Grande";
   9       height: 800px;
  10   }
  11
  12   #features {
  13       position: relative;
  14       width: 400px;
  15       list-style: none;
  16   }
  17
  18   #features > li > .picture {
  19       -webkit-transition-property: transform;
  20       -webkit-transition-duration: 500ms;
  21       -webkit-transition-timing-function: ease-in;
  22       transform: rotate(-5deg);
  23       opacity: 0.2;
  24       border: 5px solid white;
  25       background-color: gray;
  26       position: absolute;
  27       left: 20%;
  28       width: 380px;
  29       height: 180px;
  30       top: 30px;
  31   }
  32
  33   #features > li.enabled > .picture {
  34       -webkit-transition-timing-function: ease-out;
  35       transform:rotate(10deg);
  36   }
  37
  38   #features > li > .description {
  39       -webkit-transition-property: transform;
  40       -webkit-transition-duration: 560ms;
  41       -webkit-transition-timing-function: ease-in;
  42       line-height: 1.4em;
  43       position: absolute;
  44       background-color: black;
  45       color: white;
  46       margin: 10px;
  47       padding: 10px;
  48       border: 3px solid white;
  49       -webkit-border-radius: 9px;
  50       font-size: 16px;
  51       left: 20%;
  52       top: 330px;
  53       width: 350px;
  54   }
  55
  56   #features > li.enabled > .description {
  57       transform:translate3d(100px,0,0);
  58   }
  59   </style>
  60   <script>
  61   if (window.testRunner) {
  62     testRunner.waitUntilDone();
  63     testRunner.dumpAsText();
  64   }
  65
  66   function init()
  67   {
  68       document.getElementById("item").className = "enabled";
  69       setTimeout(check, 1000);
  70   }
  71
  72   function log(s)
  73   {
  74     var results = document.getElementById('results');
  75     results.innerHTML += s + '<br>';
  76   }
  77
  78   function check()
  79   {
  80       var transform = window.getComputedStyle(document.getElementById('description')).transform;
  81       if (transform == "matrix(1, 0, 0, 1, 100, 0)")
  82           log('transform="'+transform+'" as expected: PASS');
  83         else
  84         log('transform="'+transform+'", expected "matrix(1, 0, 0, 1, 100, 0)": FAIL');
  85
  86       if (window.testRunner)
  87         testRunner.notifyDone();
  88   }
  89   </script>
  90 </head>
  91 <body onload="init()">
  92
  93 <ul id="features">
  94 <li id="item">
  95     <div class="picture"></div>
  96   <div id="description" class="description">
  97     <b>Spaces</b> lets you group your application windows and banish
  98     clutter completely. Leopard gives you a space for everything and
  99     makes it easy to switch between your spaces. Start by simply
 100     clicking the Spaces icon in the Dock.
 101   </div>
 102 </li>
 103 </ul>
 104 <div id="results"></div>
 105 </body>
 106 </html>