blob: 2a324a9bb19e70a27ea2de5904783c6e6159a355 (
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
|
<!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 rotate with three arguments with relative translation-values combined with absolute transform-origin length values</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/#svg-transform-functions" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property" rel="help" />
<link href="reference/svg-rotate-3args-ref.xht" rel="match" />
<meta content="svg" name="flags" />
<meta content="The rotate transform function must support three arguments with relative translation-values in combination with transform-origin using two absolute pixel values. First, the transform-origin value of '40px 40px' should translate the origin by 40px in both the vertical and horizontal directions temporarily to (40px 40px). Second, the green rect should be rotated 90 degrees clockwise after the transform origin has been translated by an additional 20 pixels in both the horizontal and vertical directions, making the origin (60px 60px) temporarily. The green rect should completely cover the red rect." name="assert" />
<style type="text/css">
svg {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect y="1" width="78" fill="red" x="1" height="78"></rect>
<rect width="80" fill="green" y="40" x="0" transform-origin="40px 40px" transform="rotate(90deg,25%,25%)" height="80"></rect>
</svg>
</body></html>
|
