| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Transforms Test: SVG presentation attribute, matrix on group, scaleY on child1, translateY on child2</title> |
| <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.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/svg-green-square-ref.html"> |
| <meta name="flags" content="svg"> |
| <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should have the transform matrix applied. Additionally, the first rect should be translated vertically and the second rect should be scaled vertically."> |
| <style type="text/css"> |
| svg { |
| width: 300px; |
| height: 300px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>The test passes if there is a green square and no red.</p> |
| <svg> |
| <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> |
| <g transform="matrix(-0.5 0 0 -0.5 120 90)"> |
| <rect x="2" y="-116" width="156" height="312" fill="red" transform="scaleY(0.5)"/> <!-- false positive if scaleY is between 0.4 and -0.3 --> |
| <rect width="160" height="160" fill="green" transform="translate(0 -60)"/> |
| </g> |
| </svg> |
| </body> |
| </html> |
