Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transforms/group/svg-transform-nested-022.html - WPT Dashboard Interop Dashboard
<!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="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="scale(0.5 1)"/> <!-- 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>