LayoutTests/transitions/extra-transition.html

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