blob: 2782c6b9bf47cba35e5c896e69f6cc02119e5ff2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with spaces before and after the comma</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<link href="http://www.w3.org/TR/css-transforms-1/#svg-transform" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#funcdef-matrix" rel="help" />
<link href="reference/svg-matrix-four-color-ref.xht" rel="match" />
<meta content="svg" name="flags" />
<meta content="The matrix function must support arguments separated by commas with spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically." name="assert" />
<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 xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern width="200" patternUnits="userSpaceOnUse" y="0" x="0" id="coloredBoxes" height="200">
<rect y="0" width="100" fill="blue" x="0" height="100"></rect>
<rect y="0" width="100" fill="yellow" x="100" height="100"></rect>
<rect y="100" width="100" fill="fuchsia" x="0" height="100"></rect>
<rect y="100" width="100" fill="green" x="100" height="100"></rect>
</pattern>
</defs>
<rect y="1" width="98" fill="red" x="1" height="98"></rect>
<rect width="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 , 0 , 0 , -0.5 , 100 , 100)" height="200"></rect>
</svg>
</body></html>
|
