| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS Transforms Test: transform property with translate function and one parameter</title> | |
| <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> | |
| <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> | |
| <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> | |
| <link rel="match" href="reference/translate-optional-second-ref.html"> | |
| <meta name="assert" content=" If the second parameter is not provided, it has zero as a value. This transform moves the element by 100 pixels in X direction."> | |
| <style type="text/css"> | |
| .greenSquare { | |
| position: absolute; | |
| top: 50px; | |
| left: 0; | |
| width: 100px; | |
| height: 100px; | |
| background: green; | |
| transform: translate(100px); | |
| } | |
| .redSquare { | |
| position: absolute; | |
| top: 51px; | |
| left: 101px; | |
| width: 98px; | |
| height: 98px; | |
| background: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>The test passes if there is a green square and no red.</p> | |
| <div class="redSquare"></div> | |
| <div class="greenSquare"></div> | |
| </body> | |
| </html> |