<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing translate(x)</title>
    <style type="text/css" media="screen">
      
      div {
        position: absolute;
        width: 300px;
        height: 100px;
      }
      
      #box1 {
        top: 100px;
        left: 100px;
        background-color: blue;
        -webkit-transform: translate(400px); // this should evaluate as 400px, 0px
      }

      #box2 {
        top: 500px;
        left: 500px;
        background-color: green;
        -webkit-transform: translate3d(0px, 0px, -1px);
      }

      #box3 {
        top: 100px;
        left: 500px;
        background-color: red;
        -webkit-transform: translate3d(0px, 0px, -1px);
      }
      
    </style>
  </head>
  <body>
    <h1>Testing default translate parameter</h1>
    <p>There should be blue and green boxes shown. If there is a red box visible, the test has failed</p>
    
    <div id="box3">
      If you can see this box, then the test has failed.
    </div>

    <div id="box1">
      This box should be visible (it is translated).
    </div>

    <div id="box2">
      This box should be visible.
    </div>

    
  </body>
</html>