| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Transforms Test: SVG presentation attribute with relative and absolute combined translation-value arguments for translate - relative width, tx in %, ty unit less</title> |
| <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@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="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> |
| <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> |
| <link rel="match" href="reference/svg-translate-relative-ref.html"> |
| <meta name="flags" content="svg"> |
| <meta name="assert" content="The translate transform function can have combinations of relative and absolute arguments and can be applied to relative sized shapes. The rect in the test should be moved 50 pixels in the X direction and 100 pixels in the Y direction"> |
| <style type="text/css"> |
| svg { |
| width: 200px; |
| height: 400px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>The test passes if there is a green rectangle and no red.</p> |
| <svg> |
| <rect x="51" y="101" width="98" height="198" fill="red"/> |
| <rect width="50%" height="200" fill="green" transform="translate(50% 100)"/> |
| </svg> |
| </body> |
| </html> |
