blob: c2845baa4e3cec94c4fcdc18f65aff85af55f95a (
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>
<html><head>
<title>CSS Transforms Test: SVG rotate with three arguments with transform-origin with length values - 40px 40px</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.htm" rel="match">
<meta content="svg" name="flags">
<meta content="The rotate transform function must support three arguments in combination with transform-origin using absolute values. First, the transform-origin should translate the origin by 40px in both the vertical and horizontal directions temporarily to (40px 40px). Second, the green rect should be rotated by 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>
<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,20px,20px)" height="80"></rect>
</svg>
</body></html>
|
