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/matrix/svg-matrix-069.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'f' value with another transform function</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="match" href="reference/svg-matrix-four-color-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The matrix function does not support mm units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.">
<style type="text/css">
svg {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p>
<svg>
<defs>
<pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
<rect x="50" y="50" width="50" height="50" fill="blue"/>
<rect x="0" y="50" width="50" height="50" fill="yellow"/>
<rect x="50" y="0" width="50" height="50" fill="fuchsia"/>
<rect x="0" y="0" width="50" height="50" fill="green"/>
</pattern>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100 100mm) scale(1 0.5)"/>
</svg>
</body>
</html>