| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS Transforms Test: transform property with scale 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/scale-optional-second-ref.html"> | |
| <meta name="assert" content="If the second parameter of scale function is not provided, it takes a value equal to the first. This transform causes the element to appear twice as long in both the X and Y axes."> | |
| <style type="text/css"> | |
| .greenSquare { | |
| position: absolute; | |
| top: 100px; | |
| left: 100px; | |
| width: 100px; | |
| height: 100px; | |
| background: green; | |
| transform:scale(2); | |
| } | |
| .redSquare { | |
| position: absolute; | |
| top: 52px; | |
| left: 52px; | |
| width: 196px; | |
| height: 196px; | |
| 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> |