blob: c8e7a2b8bdfe8d54f4249eb22f09787c39e2da4f (
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
|
<!DOCTYPE html>
<html><head>
<title>CSS Transforms Test: SVG presentation attribute, translateX on group, scaleX on child1, matrix on child2</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<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="reference/svg-green-square-ref.htm" rel="match">
<meta content="svg" name="flags">
<meta 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." name="assert">
<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 y="41" width="78" fill="red" x="41" height="78"></rect> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="translateX(20)">
<rect width="156" y="41" x="42" fill="red" transform="scaleX(0.5)" height="78"></rect> <!-- false positive if scaleX is negative -->
<rect width="40" fill="green" transform="matrix(-2 0 0 -2 100 120)" height="40"></rect>
</g>
</svg>
</body></html>
|
