ttwf-transform-skewy-001.html (1396B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transform Using skewY() function</title> 5 <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="match" href="reference/ttwf-reftest-transform-skewy-001.html"> 8 <meta name="fuzzy" content="maxDifference=63-68;totalPixels=100-200"> 9 <meta name="assert" content="Test that the green shape is skew on Y axis by 45 degrees"> 10 <style type="text/css"> 11 .greenSquare { 12 position: absolute; 13 top: 100px; 14 left: 100px; 15 width: 100px; 16 height: 100px; 17 transform: skewY(45deg); 18 background: green; 19 } 20 .redSquare { 21 position: absolute; 22 top: 50px; 23 left: 100px; 24 } 25 </style> 26 </head> 27 <body> 28 <p>The test passes if there is a green shape and no red.</p> 29 <div> 30 <div class="redSquare"> 31 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 32 width="100px" height="200px" viewBox="0 0 100 200" xml:space="preserve"> 33 <polygon fill="red" points="100,200 0,99.999 0,0 100,100 "/> 34 </svg> 35 </div> 36 <div class="greenSquare"></div> 37 </div> 38 </body> 39 </html>