transform-translatex-006.html (1802B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: transform property with translateX function</title> 5 <link rel="author" title="Serena Wales" href="mailto:serena@codeforamerica.org"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> 8 <link rel="match" href="reference/transform-translatex-006-ref.html"> 9 <meta name="assert" content="This tests that translateX(50px) translates a box by 50 pixels in the X direction."> 10 <style type="text/css"> 11 /* Positioned container allows for the self-describing statement to still 12 be visible in the case of failure */ 13 .container { 14 position: absolute; 15 } 16 .greenSquare { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 transform: translateX(50px); 24 /* Add CSS transform here */ 25 } 26 /* This div should only be visible if the test fails */ 27 .redSquare { 28 position: absolute; 29 /* It is approximately the same size as the test div, but with a 1px margin */ 30 width: 100px; 31 height: 100px; 32 background-color: red; 33 top: 0px; 34 left: 50px; 35 } 36 </style> 37 </head> 38 <body> 39 <p>The test passes if there is a green square and no red.</p> 40 <div class="container"> 41 <!-- This is the square that should not be visible if the test passes --> 42 <div class="redSquare"></div> 43 <!-- This is the square being tested with the transform --> 44 <div class="greenSquare"></div> 45 </div> 46 </body> 47 </html>