diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-transforms/transform-origin | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/transform-origin')
87 files changed, 2967 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html new file mode 100644 index 0000000000..8369f6abd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html @@ -0,0 +1,27 @@ +<!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 vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="2cm" height="2cm" transform="rotate(360)" fill="url(#grad)"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html new file mode 100644 index 0000000000..9be32c6d6d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html @@ -0,0 +1,27 @@ +<!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 vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="1.5in" height="1.5in" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html new file mode 100644 index 0000000000..3a18177794 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html @@ -0,0 +1,27 @@ +<!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 vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="80pt" height="80pt" transform="rotate(360)" fill="url(#grad)"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html new file mode 100644 index 0000000000..652e65caf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html @@ -0,0 +1,27 @@ +<!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 vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html new file mode 100644 index 0000000000..3302f68bd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html @@ -0,0 +1,27 @@ +<!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 vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="150" height="150" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html new file mode 100644 index 0000000000..3302f68bd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html @@ -0,0 +1,27 @@ +<!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 vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="150" height="150" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-001.html new file mode 100644 index 0000000000..2f2256361c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="translate(100, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-002.html new file mode 100644 index 0000000000..d7d238c26e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="translate(100, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-003.html new file mode 100644 index 0000000000..3afea97a7e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 100px 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (100,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="100" width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="100px 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-004.html new file mode 100644 index 0000000000..c33c9809c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 100px</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,100px) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90) translate(-100 0)" transform-origin="0 100px"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-005.html new file mode 100644 index 0000000000..0f1d4d260f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 50px 50px</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (50px,50px) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="50px 50px"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-006.html new file mode 100644 index 0000000000..f29363483a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-006.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 100px 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (100,0) temporarily and must support unit less values for presentation attributes."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="100" width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="100 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-007.html new file mode 100644 index 0000000000..d1b067e0e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-007.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 100</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,100px) temporarily and must support unit less values for presentation attributes."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90) translate(-100 0)" transform-origin="0 100"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-008.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-008.html new file mode 100644 index 0000000000..545cbe0132 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-008.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 50 50</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (50px,50px) temporarily and must support unit less values for presentation attributes."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="50 50"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html new file mode 100644 index 0000000000..6324edf6ca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in cm - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="translate(75.5905512, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html new file mode 100644 index 0000000000..83c1ffc814 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in cm - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="translate(75.5905512, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html new file mode 100644 index 0000000000..f20e052222 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 2cm 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (2cm,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect x="2cm" width="2cm" height="2cm" fill="url(#grad)" transform="rotate(90)" transform-origin="2cm 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html new file mode 100644 index 0000000000..09bd7735de --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 2cm</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,2cm) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="rotate(90) translate(-75.5905512 0)" transform-origin="0 2cm"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html new file mode 100644 index 0000000000..6c16f0e111 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 1cm 1cm</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (1cm,1cm) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="rotate(90)" transform-origin="1cm 1cm"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html new file mode 100644 index 0000000000..4d2d58df2e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in inch - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="translate(144, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html new file mode 100644 index 0000000000..0bd200cfbe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in inch - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="translate(144, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html new file mode 100644 index 0000000000..2108ef1840 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 1.5in 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (1.5in,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect x="1.5in" width="1.5in" height="1.5in" fill="url(#grad)" transform="rotate(90)" transform-origin="1.5in 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html new file mode 100644 index 0000000000..ec44d317cc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 1.5in</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,1.5in) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="rotate(90) translate(-144 0)" transform-origin="0 1.5in"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html new file mode 100644 index 0000000000..98b33c25c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0.75in 0.75in</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0.75in, 0.75in) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="rotate(90)" transform-origin="0.75in 0.75in"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html new file mode 100644 index 0000000000..6772fd10b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in pt - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="translate(106.666667, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html new file mode 100644 index 0000000000..94b4b58dae --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in pt - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="translate(106.6666667, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html new file mode 100644 index 0000000000..2d456b9c01 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 80pt 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (80pt,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect x="80pt" width="80pt" height="80pt" fill="url(#grad)" transform="rotate(90)" transform-origin="80pt 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html new file mode 100644 index 0000000000..494edb2a63 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 80pt</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,80pt) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="rotate(90) translate(-106.6666667 0)" transform-origin="0 80pt"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html new file mode 100644 index 0000000000..f307282379 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 40pt 40pt</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (40pt,40pt) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="rotate(90)" transform-origin="40pt 40pt"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html new file mode 100644 index 0000000000..54e0031ee9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, first value absolute value and missing second argument</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html new file mode 100644 index 0000000000..ad58d8c431 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, first value 'center' value and missing second argument</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html new file mode 100644 index 0000000000..65f4d60035 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, first value '50%' value and missing second argument</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html new file mode 100644 index 0000000000..3b76a772df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '50% 50%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50% 50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html new file mode 100644 index 0000000000..87e22fbe51 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '50% center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50% center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html new file mode 100644 index 0000000000..e74489e513 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 50%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center 50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html new file mode 100644 index 0000000000..e03a8d0d13 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html new file mode 100644 index 0000000000..c9e9e3b70b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '75 center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="75 center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html new file mode 100644 index 0000000000..a40a998d90 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '75 50%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="75 50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html new file mode 100644 index 0000000000..0f4335dd10 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center 75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html new file mode 100644 index 0000000000..9ff00e6213 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '50% 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50% 75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html new file mode 100644 index 0000000000..e3c8a9b672 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '0'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 0,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html new file mode 100644 index 0000000000..b4977ea8e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '150'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="150"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html new file mode 100644 index 0000000000..6249beb7d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html new file mode 100644 index 0000000000..180f6cf8ca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html new file mode 100644 index 0000000000..7a0b0128cc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75)" transform-origin="left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html new file mode 100644 index 0000000000..41abf1a014 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '25%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If the second argument is missing, it is assumed to be center. The initial point of origin gets translated to 37.5,75."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-37.5,-37.5)" transform-origin="25%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html new file mode 100644 index 0000000000..6252022d3f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,0. A single argument 'top' gets interpreted as 'center top'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,-75)" transform-origin="top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html new file mode 100644 index 0000000000..af42850b30 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,150. A single argument 'bottom' gets interpreted as 'center bottom'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,75)" transform-origin="bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html new file mode 100644 index 0000000000..8ca59aa904 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '0% 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since '0% 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="0% 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html new file mode 100644 index 0000000000..5b3ce3373e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'top right' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="top right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html new file mode 100644 index 0000000000..d6b4a25b88 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'top left' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="top left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html new file mode 100644 index 0000000000..d7b0c77f4b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75 since 'top center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="top center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html new file mode 100644 index 0000000000..24347e8cd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,225 since 'bottom left' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,75)" transform-origin="bottom left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html new file mode 100644 index 0000000000..7cf1d16c04 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,225 since 'bottom center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150,150)" transform-origin="bottom center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html new file mode 100644 index 0000000000..42d8044f58 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,225 since 'bottom right' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,225)" transform-origin="bottom right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html new file mode 100644 index 0000000000..2e65ae445e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'right top' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html new file mode 100644 index 0000000000..91c288e639 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,150 since 'right center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 150)" transform-origin="right center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html new file mode 100644 index 0000000000..0010c4d836 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,225 since 'right bottom' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,225)" transform-origin="right bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html new file mode 100644 index 0000000000..3faaee6647 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'right 0' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html new file mode 100644 index 0000000000..369be12dd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'right 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html new file mode 100644 index 0000000000..40e79ba7d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,225 since 'right 100%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,225)" transform-origin="right 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html new file mode 100644 index 0000000000..9abce87f70 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'left top' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="left top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html new file mode 100644 index 0000000000..16c1eeebb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,150 since 'left center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150 0)" transform-origin="left center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html new file mode 100644 index 0000000000..4a8c485673 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,225 since 'left bottom' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,75)" transform-origin="left bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html new file mode 100644 index 0000000000..2ed45e7cfe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'left 0' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="left 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html new file mode 100644 index 0000000000..4a40e18760 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'left 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="left 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html new file mode 100644 index 0000000000..50924a663c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,225 since 'left 100%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,75)" transform-origin="left 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html new file mode 100644 index 0000000000..2e2b446309 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75 since 'center top' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html new file mode 100644 index 0000000000..3b46d2d22c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,225 since 'center bottom' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150,150)" transform-origin="center bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html new file mode 100644 index 0000000000..62189588a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,150 since 'center left' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150 0)" transform-origin="center left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html new file mode 100644 index 0000000000..3e8f278d31 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,150 since 'center right' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 150)" transform-origin="center right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html new file mode 100644 index 0000000000..b1d5a346c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,225 since 'center 100%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150,150)" transform-origin="center 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html new file mode 100644 index 0000000000..e8352af401 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '0 center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 0,150 since '-75 center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,-75)" transform-origin="-75 center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html new file mode 100644 index 0000000000..8af656ee7c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75 since 'center 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html new file mode 100644 index 0000000000..fd7d9764e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 0'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,0 since 'center -75' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,-75)" transform-origin="center -75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html new file mode 100644 index 0000000000..a7e9211697 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html new file mode 100644 index 0000000000..d9296ec019 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html new file mode 100644 index 0000000000..afee0ebc71 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top 150'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top 150"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html new file mode 100644 index 0000000000..cdf1270bf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom 150'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom 150"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html new file mode 100644 index 0000000000..e06e6f47dc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html new file mode 100644 index 0000000000..09d02c5cdb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html new file mode 100644 index 0000000000..727197b975 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html new file mode 100644 index 0000000000..da91e51199 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html new file mode 100644 index 0000000000..39dcbf4f73 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'left left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="left left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html new file mode 100644 index 0000000000..b13dd1e393 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'left right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="left right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html new file mode 100644 index 0000000000..f53d7f0a79 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'right right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="right right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html new file mode 100644 index 0000000000..69fe6f8129 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'right left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="right left"/> + </svg> + </body> +</html> |