diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/skew-test1.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-transforms/skew-test1.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/skew-test1.html b/testing/web-platform/tests/css/css-transforms/skew-test1.html new file mode 100644 index 0000000000..cb17809765 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skew-test1.html @@ -0,0 +1,54 @@ +<!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-233;totalPixels=90-858"> + <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> |