| <!DOCTYPE html> |
| <html lang="en"> |
| <!-- Submitted from TestTWF Paris --> |
| <head> |
| <meta charset="utf-8"> |
| <title>Testing 1 - skew()</title> |
| <link rel="author" title="Myriam Goude" href="mailto:mymygo@gmail.com"> |
| <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> |
| <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> |
| <link rel="match" href="reference/skew-test1-ref.html"> |
| <meta name="fuzzy" content="maxDifference=17-97;totalPixels=96-771"> |
| <meta name="flags" content="svg"> |
| <meta name="assert" content="The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0"> |
| <style> |
| |
| h4 {clear:both;} |
| |
| /* Test 1 - skew on block types */ |
| |
| svg { |
| position:absolute; |
| } |
| |
| div { |
| width:150px; |
| height:150px; |
| background-color:lime; |
| } |
| |
| .skew_div { |
| |
| transform: skew(30deg,20deg); |
| transform-origin:0 0; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <h3> |
| Test 1 - Tests with degrees on block elements. |
| </h3> |
| <h4> |
| There should be a green block on the page. |
| </h4> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"> |
| <polygon points="1,1 149,56 235,203 88,149" style="fill:red"/> |
| </svg> |
| |
| <div class="skew_div"> |
| </div> |
| |
| </body> |
| </html> |
