Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<meta name="flags" content="svg">
<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 width="80" height="80" fill="green"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<meta name="flags" content="svg">
<style type="text/css">
svg {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect width="100%" height="100%" fill="green"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<meta name="flags" content="svg">
<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 width="100" height="100" fill="green"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with deg on rotate and pixel on translate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with the unit 'deg' on angle arguments and the absolute length unit 'px' on translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments without units on rotate or translate values</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments without units on angle arguments or translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in the vertical and horizontal direction to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90,20,20)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with grad on rotate and pt on translate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with the unit 'grad' on angle arguments and the absolute length unit 'pt' on translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(100grad,15pt,15pt)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with turn on rotate and pc on translate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with the unit 'turn' on angle arguments and the absolute length unit 'pc' on translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(0.25turn,1.25pc,1.25pc)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with rad on rotate and mm on translate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with the unit 'rad' on angle arguments and the absolute length unit 'mm' on translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(1.57079632674897rad,5.291666667mm,5.291666667mm)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with negative rotate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with a negative angle argument. The green rect in this test should be rotated 90 degrees counter-clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="-40" y="0" width="80" height="80" fill="green" transform="rotate(-90deg,20px,20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with negative translateX</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with a negative translationX-value argument. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by -20 pixels the horizontal directions and 20 pixels in the vertical direction to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="-40" y="-80" width="80" height="80" fill="green" transform="rotate(90deg,-20px,20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with negative translateY</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with a negative translationY-value argument. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in the horizontal direction and -20 pixels in the vertical direction to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="40" y="-80" width="80" height="80" fill="green" transform="rotate(90deg,20px,-20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with scientific numbers on degree angles</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments, with scientific numbers for angle arguments in degree. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(9.0e1deg,20px,20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with pixel units in scientific notation on translate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments, with absolute length unit 'px' in scientific numbers on translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90deg,2.0e1px,2.0e1px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with deg on rotate and percentage units on translate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with the unit 'deg' on angle arguments and the relative length unit '%' on translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90deg,25%,25%)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with deg on rotate and negative percentage units on translate</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with the unit 'deg' on angle arguments and the relative length unit '%' on translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by -20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-120" width="80" height="80" fill="green" transform="rotate(90deg,-25%,-25%)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with space delimited arguments</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-functional-notation">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments, where the arguments are separated by spaces with no commas. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90deg 20px 20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with comma delimited arguments</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-functional-notation">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments, where the arguments are separated by commas with no spaces. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with comma delimited arguments with a space after the comma</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-functional-notation">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function with three arguments can have the arguments be separated by optional commas with a space after the comma. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90deg, 20px, 20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with comma delimited arguments with multiple spaces before the commas</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-functional-notation">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function with three arguments can have the arguments be separated by optional commas with multiple spaces before the commas. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90deg ,20px ,20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with transform-origin with length values - 40px 40px</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" 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.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="40" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px)" transform-origin="40px 40px"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with transform-origin with first value 'center' and missing second argument</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments in combination with transform-origin using one keyword value. First, the transform-origin value of 'center' should translate the origin by 40px in both the vertical and horizontal directions temporarily to (0px 40px), which is the center of the green rect. Second, the green rect should be rotated 90 degrees clockwise after the transform origin has been translated by 20 pixels in both the vertical and horizontal directions, making the origin (20px 60px) temporarily. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="-40" y="0" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px)" transform-origin="center"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with transform-origin with first value '50%' and missing second argument</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments in combination with transform-origin using one relative value. First, the transform-origin value of '50%' should translate the origin by 40px in both the vertical and horizontal directions temporarily to (0px 40px), which is the center of the green rect. Second, the green rect should be rotated 90 degrees clockwise after the transform origin has been translated by 20 pixels in both the vertical and horizontal directions, making the origin (20px 60px) temporarily. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="-40" y="0" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px)" transform-origin="50%"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with transform-origin with first value 'right' and second value 'top'</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments in combination with transform-origin using two keyword values. First, the transform-origin value of 'right top' should translate the origin by 40px in the horizontal direction and by 80px in the vertical direction temporarily to (40px 80px), which is the top right corner of the green rect. Second, the green rect should be rotated 90 degrees clockwise after the transform origin has been translated by 20 pixels in both the vertical and horizontal directions, making the origin (60px 100px) temporarily. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="-40" y="80" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px)" transform-origin="right top"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with relative translation-values combined with absolute transform-origin length values</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" 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.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="40" width="80" height="80" fill="green" transform-origin="40px 40px" transform="rotate(90deg,25%,25%)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with absolute translation-values combined with relative transform-origin length values</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with absolute translation-values in combination with transform-origin using two relative values. First, the transform-origin value of '25% 25%' should translate the origin by 20px in both the vertical and horizontal directions temporarily to (-20px 20px). Second, the green rect should be rotated 90 degrees clockwise after the transform origin has been translated by an additional 40 pixels in both the horizontal and vertical directions, making the origin (20px 60px) temporarily. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="-40" y="0" width="80" height="80" fill="green" transform-origin="25% 25%" transform="rotate(90deg,40px,40px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with relative translation-values combined with relative transform-origin length values</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support three arguments with relative translation-values in combination with transform-origin using two relative values. First, the transform-origin value of '25% 25%' should translate the origin by 20px in both the vertical and horizontal directions temporarily to (-20px 20px). Second, the green rect should be rotated 90 degrees clockwise after the transform origin has been translated by an additional 40 pixels in both the horizontal and vertical directions, making the origin (20px 60px) temporarily. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="-40" y="0" width="80" height="80" fill="green" transform-origin="25% 25%" transform="rotate(90deg,50%,50%)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with one absolute translation-value argument</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then both translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise but the transform origin should not be translated. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg 20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with no translation-value arguments and a comma</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If no translation values are provided, and there is a comma after the rotate argument, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated and the transform origin should not be translated. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90deg,)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments, with a third absolute translation-value argument</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If a third absolute translation-value argument is provided, then all translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise, but the transform origin should not be translated. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px,20px)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments with one relative translation-value argument</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then both translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise but the transform origin should not be translated. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg 30%)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG rotate with three arguments, with a third relative translation-value argument</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If a third relative translation-value argument is provided, then all translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise, but the transform origin should not be translated. The green rect should completely cover the red rect.">
<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 x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg,30%,20%,40%)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument without unit on rotate</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support unit less arguments for angle. The green rect in the test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(45)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with degree unit on rotate</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'degree' on angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(45deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with grad unit on rotate</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'grad' on angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(50grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with turn unit on rotate</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'turn' on angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(0.125turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with radian unit on rotate</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'rad' on angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(0.785398163374485rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative, unit less turn</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative unit less angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(-315)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative degrees</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'degree' angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(-315deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative gradians</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'grad' angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(-350grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative radians</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'rad' angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(-5.497787143782138rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative turns</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'turn' angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(-0.875turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with unit less angle</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(405)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in degree</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in degree. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(405deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in gradian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in gradian. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(450grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in radian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in radian. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(7.068583470577035rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in turn</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in turns. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(1.125turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on unit less angles</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(4.5e1)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on degree angles</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in degree. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(4.5e1deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on gradian angles</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in gradians. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(45.0e1grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on radian angles</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in radians. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(0.785398163374485e0rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and with scientific numbers on turns</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in turns. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(1.25e-1turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for unit less arguments</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(450e-1)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for arguments in degree</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in degree. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(450e-1deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate and scientific numbers with negative exponents for arguments in gradian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in gradian. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(500e-1grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate and scientific numbers with negative exponents for arguments in radian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in radian. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(7.85398163374485e-1rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for arguments in turns</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-45-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in turns. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.">
<style type="text/css">
svg {
width: 250px;
height: 250px;
background: green;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg>
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(11.25e-1turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument without unit on rotate</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support unit less arguments for angle. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(90)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with degree unit on rotate</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'degree' on angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(90deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with grad unit on rotate</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'grad' on angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(100grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with turn unit on rotate</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'turn' on angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(0.25turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with radian unit on rotate</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support the unit 'rad' on angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(1.57079632674897rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative, unit less turn</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(-270)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative degrees</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'degree' angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(-270deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative gradians</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'grad' angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(-300grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative radians</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'rad' angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(1.570796327rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with negative turns</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support negative 'turn' angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(-0.75turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with unit less angle</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(450)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in degree</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in degree. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(450deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in gradian</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in gradian. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(500grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in radian</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in radian. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(7.853981634rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with angle in turn</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support 'modulo whole circle' for angle arguments in turns. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(1.25turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on unit less angles</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(9.0e1)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on degree angles</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in degree. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(9.0e1deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on gradian angles</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in gradians. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(10.0e1grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on radian angles</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in radians. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(0.1570796326794897e1rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on turns</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers for angle arguments in turns. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(0.025e1turn)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for unit less arguments</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(900e-1)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for arguments in degree</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in degree. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(900e-1deg)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate and scientific numbers with negative exponents for arguments in gradian</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in gradian. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(1000e-1grad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate and scientific numbers with negative exponents for arguments in radian</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in radian. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(15.70796326794897e-1rad)"/>
</svg>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for arguments in turns</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate">
<link rel="match" href="reference/svg-rotate-angle-90-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in turns. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.">
<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 x="1" y="1" width="98" height="98" fill="red"/>
<rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(2.5e-1turn)"/>
</svg>
</body>
</html>