third_party/WebKit/LayoutTests/transitions/remove-accelerated-transition.html

   1 <html>
   2   <head>
   3     <style>
   4       #a {
   5         background-color: red;
   6         height: 100px;
   7         width: 100px;
   8         -webkit-transition: height 0.5s linear;
   9         overflow: hidden;
  10       }
  11
  12       #b {
  13         background-color: blue;
  14         height: 100px;
  15         width: 100px;
  16         -webkit-transition: -webkit-transform 0.5s linear;
  17       }
  18     </style>
  19     <script>
  20       if (window.testRunner) {
  21         testRunner.dumpAsText();
  22         testRunner.waitUntilDone();
  23       }
  24
  25       function endTest() {
  26         if (window.testRunner) {
  27           testRunner.notifyDone();
  28         }
  29       }
  30
  31       function startTest() {
  32         var a = document.getElementById("a");
  33         var b = document.getElementById("b");
  34         a.addEventListener("webkitTransitionEnd", endTest, false);
  35
  36         // Trigger transitions.
  37         a.style.height = "0px";
  38         b.style.webkitTransform = "translateX(10px)";
  39
  40         // Force layout.
  41         document.body.offsetHeight;
  42
  43         // Remove the transform transition by hiding its div.
  44         b.style.display = "none";
  45       }
  46     </script>
  47   </head>
  48   <body onload="startTest()">
  49     <div id="a">FAIL</div>
  50     <div id="b"></div>
  51     PASS
  52   </body>
  53
  54 </html>