diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/translate')
28 files changed, 680 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html new file mode 100644 index 0000000000..61bf38c03a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html @@ -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: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="100" y="50" width="75" height="75" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html new file mode 100644 index 0000000000..297187d753 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html @@ -0,0 +1,23 @@ +<!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 ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + line-height: 1; + font: 50px Ahem; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="40" y="40" width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html new file mode 100644 index 0000000000..eea34503ed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html @@ -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: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="50" y="75" width="150" height="150" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html new file mode 100644 index 0000000000..913349a833 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html @@ -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: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="50" y="100" width="200" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ref.html new file mode 100644 index 0000000000..19d1187bd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ref.html @@ -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: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="50" y="50" width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html new file mode 100644 index 0000000000..bd22fefaaa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html @@ -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: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="50" y="100" width="100" height="200" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html new file mode 100644 index 0000000000..1f60f3fcb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate and transform properties and the SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="100" y="100" width="200" height="200" fill="green"/> + </svg> +</body> +</html> + + diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html new file mode 100644 index 0000000000..cce3f40477 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate property and SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="100" y="100" width="200" height="200" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/translate-in-svg-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-in-svg-ref.html new file mode 100644 index 0000000000..ed185a63b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-in-svg-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: the CSS translate property applied to an SVG element</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="100" y="100" width="100" height="100" fill="green" /> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-001.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-001.html new file mode 100644 index 0000000000..be48af33ff --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value arguments without unit</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-009.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-009.html new file mode 100644 index 0000000000..f59a0a1462 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-009.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value and unit less arguments in scientific notation</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-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-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(5.0e1 5.0e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-017.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-017.html new file mode 100644 index 0000000000..864ca2e2d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-017.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value unit less arguments in scientific notation with negative exponents</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-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-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments in scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(500e-1 500e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-025.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-025.html new file mode 100644 index 0000000000..ffccb8e69c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-025.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with negative translation-value arguments without unit</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support negative unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="100" width="100" height="100" fill="green" transform="translate(-50 -50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-033.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-033.html new file mode 100644 index 0000000000..a218a4794a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-033.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value and negative unit less arguments in scientific notation</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-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-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support negative unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="100" width="100" height="100" fill="green" transform="translate(-5.0e1 -5.0e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-041.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-041.html new file mode 100644 index 0000000000..175eb6e446 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-041.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value unit less negative arguments in scientific notation with negative exponents</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-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-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments in negative scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="100" width="100" height="100" fill="green" transform="translate(-500e-1 -500e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-049.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-049.html new file mode 100644 index 0000000000..2684b07ed8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-049.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with one translation-value argument</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect y="50" width="100" height="100" fill="green" transform="translate(50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-050.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-050.html new file mode 100644 index 0000000000..2519e05085 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-050.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with one negative translation-value argument</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="50" width="100" height="100" fill="green" transform="translate(-50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-051.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-051.html new file mode 100644 index 0000000000..bb965eb412 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-051.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with no spaces</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with no spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50,50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-052.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-052.html new file mode 100644 index 0000000000..d7656bf2e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-052.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with a space in between</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with a space in between. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50, 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-053.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-053.html new file mode 100644 index 0000000000..cf3da372ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-053.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with arguments separated by multiple spaces</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can multiple spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-054.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-054.html new file mode 100644 index 0000000000..90061d4c35 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-054.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with multiple spaces before the comma</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with multiple spaces before the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 ,50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-055.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-055.html new file mode 100644 index 0000000000..54c5cc908b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-055.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with multiple spaces before and after the comma</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with multiple spaces before and after the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 , 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-001.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-001.html new file mode 100644 index 0000000000..8c88e92f0b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translation-value arguments with translate applied twice</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-multiple-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function can be called multiple times on the same element. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="76" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="green" transform="translate(25 25) translate(25 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-002.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-002.html new file mode 100644 index 0000000000..c8c438c777 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translation-value arguments with translate applied twice in both directions</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/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-multiple-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function can be applied multiple times and in both directions. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="76" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="green" transform="translate(150 150) translate(-100 -75)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-with-units.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-with-units.html new file mode 100644 index 0000000000..32561409ad --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-with-units.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG transform attribute with units on translate</title> + <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2623"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="assert" content="The translate transform function should not support the CSS transform syntax with units. The green rects in this test should have no transform applied."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg width="300" height="300"> + <rect x="50" y="50" width="100" height="100" fill="red"/> + <rect x="50" y="50" width="100" height="25" fill="green" transform="translate(10px 10px)"/> + <rect x="50" y="75" width="100" height="25" fill="green" transform="translate(10in 10in)"/> + <rect x="50" y="100" width="100" height="25" fill="green" transform="translate(10% 10%)"/> + <rect x="50" y="125" width="100" height="25" fill="green" transform="translate(10% 10)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html new file mode 100644 index 0000000000..5d316e0b6a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate and transform properties and the SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-translate"> + <link rel="match" href="reference/translate-and-transform-attribute-in-svg-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The CSS translate property is applied in combination with the CSS transform property and the SVG transform attribute has no effect."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="101" y="101" width="198" height="198" fill="red"/> + <rect width="100" height="100" fill="green" transform="rotate(45)" style="transform: scale(2); translate: 100px 100px" /> + </svg> +</body> +</html> + + diff --git a/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html new file mode 100644 index 0000000000..e44fd14506 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate property and SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-translate"> + <link rel="match" href="reference/translate-and-transform-css-property-in-svg-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The CSS translate property is applied in combination with the SVG transform attribute in the absence of a CSS transform property."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="101" y="101" width="198" height="198" fill="red"/> + <rect width="100" height="100" fill="green" transform="scale(2)" style="translate: 100px 100px" /> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/translate-in-svg.html b/testing/web-platform/tests/css/css-transforms/translate/translate-in-svg.html new file mode 100644 index 0000000000..6652f543f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/translate-in-svg.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: the CSS translate property applied to an SVG element</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-translate"> + <link rel="match" href="reference/translate-in-svg-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The CSS translate property is applied to an SVG element."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="101" y="101" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" style="translate: 100px 100px" /> + </svg> +</body> +</html> |