third_party/WebKit/LayoutTests/animations/animation-direction-normal-expected.html

   1 <html lang="en">
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   4   <title>Test of -webkit-animation-direction</title>
   5   <style type="text/css" media="screen">
   6     body {
   7       margin: 0;
   8     }
   9
  10     #box {
  11       position: absolute;
  12       left: 0px;
  13       top: 100px;
  14       height: 100px;
  15       width: 100px;
  16       background-color: red;
  17       margin: 0;
  18       transform: translateX(50px);
  19     }
  20     #safezone {
  21       position: absolute;
  22       top: 100px;
  23       height: 100px;
  24       width: 130px;
  25       left: 30px;
  26       background-color: green;
  27     }
  28   </style>
  29   </script>
  30 </head>
  31 <body>
  32 <!-- This tests the operation of -webkit-animation-direction. After 1 second the red boxes should be hidden by the green boxes. You should see no red boxes. -->
  33 <div id="box"></div>
  34 <div id="safezone"></div>
  35 <div id="result">
  36 Warning this test is running in real-time and may be flaky.<br>
  37 PASS - "webkitTransform" property for "box" element at 0.5s saw something close to: 1,0,0,1,50,0<br>
  38 PASS - "webkitTransform" property for "box" element at 1s saw something close to: 1,0,0,1,100,0<br>
  39 PASS - "webkitTransform" property for "box" element at 2.5s saw something close to: 1,0,0,1,50,0
  40 </div>
  41 </div>
  42 </body>
  43 </html>