css-transform-scale-002.html (1827B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: transform property with scale function and move its origin</title> 5 <link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com"> 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/#transform-origin-property"> 8 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-functions"> 9 <link rel="match" href="reference/css-transform-scale-ref-002.html"> 10 <meta name="assert" content="The transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner."> 11 <style type="text/css"> 12 .container { 13 position: absolute; 14 } 15 .greenSquare { 16 position: absolute; 17 top: 0; 18 left: 0; 19 width: 100px; 20 height: 100px; 21 background-color: green; 22 transform-origin: 0 0; 23 transform: scale(2); 24 } 25 26 27 /* This div should only be visible if the test fails */ 28 .redSquare { 29 position: absolute; 30 /* It is approximately the same size as the test div, but with a 1px margin */ 31 width: 98px; 32 height: 98px; 33 background-color: red; 34 left: 100px; 35 top :100px; 36 } 37 </style> 38 </head> 39 <body> 40 <p>The test passes if the green square completely covers the red square.</p> 41 <div class="container"> 42 <!-- This is the square that should not be visible if the test passes --> 43 <div class="redSquare"></div> 44 <!-- This is the square being tested with the transform --> 45 <div class="greenSquare"></div> 46 </div> 47 </body> 48 </html>