| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Transforms Test: SVG presentation attribute, translateX on group, scaleX on child1, matrix 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 be translated horizontally. Additionally, the first rect should be scaled horizontally and the second rect should have the transform matrix applied."> |
| <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="translate(20 0)"> |
| <rect x="42" y="41" width="156" height="78" fill="red" transform="scaleX(0.5)"/> <!-- false positive if scaleX is negative --> |
| <rect width="40" height="40" fill="green" transform="matrix(-2 0 0 -2 100 120)"/> |
| </g> |
| </svg> |
| </body> |
| </html> |
