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/matrix | |
| 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/matrix')
71 files changed, 2454 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html new file mode 100644 index 0000000000..1989c044ca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="100" y="50" width="40" height="40" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html new file mode 100644 index 0000000000..fa16f97b3b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <rect x="0" y="0" width="50" height="50" fill="green"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-001.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-001.html new file mode 100644 index 0000000000..2e17c1ed78 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up horizontally only: 2 0 0 1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="0" y="0" width="25" height="50" fill="green"/> + <rect x="25" y="0" width="25" height="50" fill="fuchsia"/> + <rect x="0" y="50" width="25" height="50" fill="yellow"/> + <rect x="25" y="50" width="25" height="50" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(2 0 0 1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-002.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-002.html new file mode 100644 index 0000000000..4f1926580e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down horizontally only: 0.5 0 0 1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="0" y="0" width="100" height="50" fill="green"/> + <rect x="100" y="0" width="100" height="50" fill="fuchsia"/> + <rect x="0" y="50" width="100" height="50" fill="yellow"/> + <rect x="100" y="50" width="100" height="50" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-003.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-003.html new file mode 100644 index 0000000000..35639bc8fc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up vertically only: 1 0 0 2 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="0" y="0" width="50" height="25" fill="green"/> + <rect x="50" y="0" width="50" height="25" fill="fuchsia"/> + <rect x="0" y="25" width="50" height="25" fill="yellow"/> + <rect x="50" y="25" width="50" height="25" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(1 0 0 2 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-004.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-004.html new file mode 100644 index 0000000000..e2f7b2667b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down vertically only: 1 0 0 0.5 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="0" y="0" width="50" height="100" fill="green"/> + <rect x="50" y="0" width="50" height="100" fill="fuchsia"/> + <rect x="0" y="100" width="50" height="100" fill="yellow"/> + <rect x="50" y="100" width="50" height="100" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 0 0.5 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-005.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-005.html new file mode 100644 index 0000000000..4fb8ccbe89 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping left and scaling up horizontally: -2 0 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally."> + <style type="text/css"> + svg { + width: 600px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="0" y="0" width="25" height="50" fill="fuchsia"/> + <rect x="25" y="0" width="25" height="50" fill="green"/> + <rect x="0" y="50" width="25" height="50" fill="blue"/> + <rect x="25" y="50" width="25" height="50" fill="yellow"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 1 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-006.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-006.html new file mode 100644 index 0000000000..a0cb233fa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-006.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping left and scaling down horizontally: -0.5 0 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="0" y="0" width="100" height="50" fill="fuchsia"/> + <rect x="100" y="0" width="100" height="50" fill="green"/> + <rect x="0" y="50" width="100" height="50" fill="blue"/> + <rect x="100" y="50" width="100" height="50" fill="yellow"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 1 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-007.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-007.html new file mode 100644 index 0000000000..61c2dc6e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-007.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling up vertically: 1 0 0 -2 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="0" y="0" width="50" height="25" fill="yellow"/> + <rect x="50" y="0" width="50" height="25" fill="blue"/> + <rect x="0" y="25" width="50" height="25" fill="green"/> + <rect x="50" y="25" width="50" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(1 0 0 -2 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-008.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-008.html new file mode 100644 index 0000000000..57fc8003d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-008.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling down vertically: 1 0 0 -0.5 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="0" y="0" width="50" height="100" fill="yellow"/> + <rect x="50" y="0" width="50" height="100" fill="blue"/> + <rect x="0" y="100" width="50" height="100" fill="green"/> + <rect x="50" y="100" width="50" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 0 -0.5 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-009.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-009.html new file mode 100644 index 0000000000..cee19cb723 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-009.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 0.2e1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="0" y="0" width="25" height="25" fill="green"/> + <rect x="25" y="0" width="25" height="25" fill="fuchsia"/> + <rect x="0" y="25" width="25" height="25" fill="yellow"/> + <rect x="25" y="25" width="25" height="25" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(0.2e1 0 0 0.2e1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-010.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-010.html new file mode 100644 index 0000000000..c52eef236b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-010.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 -0.2e1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="0" y="0" width="25" height="25" fill="blue"/> + <rect x="25" y="0" width="25" height="25" fill="yellow"/> + <rect x="0" y="25" width="25" height="25" fill="fuchsia"/> + <rect x="25" y="25" width="25" height="25" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(-0.2e1 0 0 -0.2e1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-011.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-011.html new file mode 100644 index 0000000000..bb9a528752 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-011.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down horizontally and vertically in scientific numbers with negative exponents: 5e-1 0 0 5e-1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="fuchsia"/> + <rect x="0" y="100" width="100" height="100" fill="yellow"/> + <rect x="100" y="100" width="100" height="100" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(5e-1 0 0 5e-1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-012.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-012.html new file mode 100644 index 0000000000..ba7331eb6a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-012.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling down horizontally and vertically with scientific numbers with negative exponents: -5e-1 0 0 -5e-1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-5e-1 0 0 -5e-1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-013.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-013.html new file mode 100644 index 0000000000..a977822286 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-013.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up horizontally and down vertically: 2 0 0 0.5 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="0" y="0" width="25" height="100" fill="green"/> + <rect x="25" y="0" width="25" height="100" fill="fuchsia"/> + <rect x="0" y="100" width="25" height="100" fill="yellow"/> + <rect x="25" y="100" width="25" height="100" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(2 0 0 0.5 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-014.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-014.html new file mode 100644 index 0000000000..46633c1d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-014.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down horizontally and up vertically: 0.5 0 0 2 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="0" y="0" width="100" height="25" fill="green"/> + <rect x="100" y="0" width="100" height="25" fill="fuchsia"/> + <rect x="0" y="25" width="100" height="25" fill="yellow"/> + <rect x="100" y="25" width="100" height="25" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 2 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-015.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-015.html new file mode 100644 index 0000000000..e6ea9a0792 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-015.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling up horizontally and down vertically: -2 0 0 -0.5 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="0" y="0" width="25" height="100" fill="blue"/> + <rect x="25" y="0" width="25" height="100" fill="yellow"/> + <rect x="0" y="100" width="25" height="100" fill="fuchsia"/> + <rect x="25" y="100" width="25" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-016.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-016.html new file mode 100644 index 0000000000..980c9feb2b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-016.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling down horizontally and up vertically: -0.5 0 0 -2 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="0" y="0" width="100" height="25" fill="blue"/> + <rect x="100" y="0" width="100" height="25" fill="yellow"/> + <rect x="0" y="25" width="100" height="25" fill="fuchsia"/> + <rect x="100" y="25" width="100" height="25" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 -2 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-017.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-017.html new file mode 100644 index 0000000000..2aa3df21b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-017.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling up horizontally and vertically: 2 0 0 -2 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="0" y="0" width="25" height="25" fill="yellow"/> + <rect x="25" y="0" width="25" height="25" fill="blue"/> + <rect x="0" y="25" width="25" height="25" fill="green"/> + <rect x="25" y="25" width="25" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(2 0 0 -2 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-018.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-018.html new file mode 100644 index 0000000000..ae9a910db0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-018.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling down horizontally and vertically: 0.5 0 0 -0.5 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="yellow"/> + <rect x="100" y="0" width="100" height="100" fill="blue"/> + <rect x="0" y="100" width="100" height="100" fill="green"/> + <rect x="100" y="100" width="100" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 -0.5 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-019.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-019.html new file mode 100644 index 0000000000..78936949bc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-019.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping left and scaling down horizontally and vertically: -0.5 0 0 0.5 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="green"/> + <rect x="0" y="0" width="100" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 0.5 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-020.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-020.html new file mode 100644 index 0000000000..deea3527a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-020.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling up horizontally and down vertically: 2 0 0 -0.5 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="0" y="0" width="25" height="100" fill="yellow"/> + <rect x="25" y="0" width="25" height="100" fill="blue"/> + <rect x="0" y="100" width="25" height="100" fill="green"/> + <rect x="25" y="100" width="25" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(2 0 0 -0.5 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-021.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-021.html new file mode 100644 index 0000000000..7c2d27cb00 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-021.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling up horizontally and down vertically: -2 0 0 0.5 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="25" y="100" width="25" height="100" fill="yellow"/> + <rect x="0" y="100" width="25" height="100" fill="blue"/> + <rect x="25" y="0" width="25" height="100" fill="green"/> + <rect x="0" y="0" width="25" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 0.5 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-022.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-022.html new file mode 100644 index 0000000000..bd50757793 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-022.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling down horizontally and up vertically: 0.5 0 0 -2 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="0" y="0" width="100" height="25" fill="yellow"/> + <rect x="100" y="0" width="100" height="25" fill="blue"/> + <rect x="0" y="25" width="100" height="25" fill="green"/> + <rect x="100" y="25" width="100" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 -2 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-023.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-023.html new file mode 100644 index 0000000000..e45d17c058 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-023.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling down horizontally and up vertically: -0.5 0 0 2 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="100" y="25" width="100" height="25" fill="yellow"/> + <rect x="0" y="25" width="100" height="25" fill="blue"/> + <rect x="100" y="0" width="100" height="25" fill="green"/> + <rect x="0" y="0" width="100" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 2 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-024.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-024.html new file mode 100644 index 0000000000..73b4212df0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-024.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling up horizontally and vertically: -2 0 0 2 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="25" y="25" width="25" height="25" fill="yellow"/> + <rect x="0" y="25" width="25" height="25" fill="blue"/> + <rect x="25" y="0" width="25" height="25" fill="green"/> + <rect x="0" y="0" width="25" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 2 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-025.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-025.html new file mode 100644 index 0000000000..c1bf20b9c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-025.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left: -1 0 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="yellow"/> + <rect x="0" y="50" width="50" height="50" fill="blue"/> + <rect x="50" y="0" width="50" height="50" fill="green"/> + <rect x="0" y="0" width="50" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 1 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-026.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-026.html new file mode 100644 index 0000000000..8f8513130a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-026.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up: 1 0 0 0 -1 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="0" y="0" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="green"/> + <rect x="50" y="50" width="50" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(1 0 0 -1 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-027.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-027.html new file mode 100644 index 0000000000..7d4d9ef995 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-027.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and up: -1 0 0 0 -1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and up."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="0" width="50" height="50" fill="yellow"/> + <rect x="0" y="0" width="50" height="50" fill="blue"/> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="0" y="50" width="50" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 -1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-028.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-028.html new file mode 100644 index 0000000000..4be4c927d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-028.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling up horizontally: 2 0 0 -1 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="0" y="0" width="25" height="50" fill="yellow"/> + <rect x="25" y="0" width="25" height="50" fill="blue"/> + <rect x="0" y="50" width="25" height="50" fill="green"/> + <rect x="25" y="50" width="25" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(2 0 0 -1 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-029.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-029.html new file mode 100644 index 0000000000..eb6d763b71 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-029.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left and scaling up horizontally with scientific numbers: -2 0 0 -1 10e1 10e1</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="25" y="0" width="25" height="50" fill="yellow"/> + <rect x="0" y="0" width="25" height="50" fill="blue"/> + <rect x="25" y="50" width="25" height="50" fill="green"/> + <rect x="0" y="50" width="25" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 -1 10e1 10e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-030.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-030.html new file mode 100644 index 0000000000..ca8f1c4bb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-030.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling down horizontally: 0.5 0 0 -1 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled down horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="0" y="0" width="100" height="50" fill="yellow"/> + <rect x="100" y="0" width="100" height="50" fill="blue"/> + <rect x="0" y="50" width="100" height="50" fill="green"/> + <rect x="100" y="50" width="100" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 -1 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-031.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-031.html new file mode 100644 index 0000000000..1a3313ccc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-031.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left and scaling down horizontally: -0.5 0 0 -1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled down horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="100" y="0" width="100" height="50" fill="yellow"/> + <rect x="0" y="0" width="100" height="50" fill="blue"/> + <rect x="100" y="50" width="100" height="50" fill="green"/> + <rect x="0" y="50" width="100" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 -1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-032.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-032.html new file mode 100644 index 0000000000..5c3701eb56 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-032.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling up vertically: -1 0 0 2 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="50" y="25" width="50" height="25" fill="yellow"/> + <rect x="0" y="25" width="50" height="25" fill="blue"/> + <rect x="50" y="0" width="50" height="25" fill="green"/> + <rect x="0" y="0" width="50" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 2 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-033.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-033.html new file mode 100644 index 0000000000..9c4649c6ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-033.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left and scaling up vertically with scientific numbers with negative exponents: -1 0 0 -2 1000e-1 1000e-1</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="50" y="0" width="50" height="25" fill="yellow"/> + <rect x="0" y="0" width="50" height="25" fill="blue"/> + <rect x="50" y="25" width="50" height="25" fill="green"/> + <rect x="0" y="25" width="50" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 -2 1000e-1 1000e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-034.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-034.html new file mode 100644 index 0000000000..1a20217e77 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-034.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling down vertically: -1 0 0 0.5 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="50" y="100" width="50" height="100" fill="yellow"/> + <rect x="0" y="100" width="50" height="100" fill="blue"/> + <rect x="50" y="0" width="50" height="100" fill="green"/> + <rect x="0" y="0" width="50" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 0.5 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-035.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-035.html new file mode 100644 index 0000000000..a5c98f170c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-035.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and up and scaling down vertically: -1 0 0 -0.5 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and up scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="50" y="0" width="50" height="100" fill="yellow"/> + <rect x="0" y="0" width="50" height="100" fill="blue"/> + <rect x="50" y="100" width="50" height="100" fill="green"/> + <rect x="0" y="100" width="50" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-036.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-036.html new file mode 100644 index 0000000000..1b9e295e99 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-036.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing right: 1 0 1 1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should skewed right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 1 1 0 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-037.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-037.html new file mode 100644 index 0000000000..bbd0b5be95 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-037.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing down: 1 1 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should skewed down horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 1 0 1 100 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-038.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-038.html new file mode 100644 index 0000000000..bac73d63df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-038.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing left: 1 0 -1 100 50</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed left horinzontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 -1 1 100 50)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-039.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-039.html new file mode 100644 index 0000000000..ed3ea7aa12 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-039.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing up: 1 -1 0 1 50 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed up vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 -1 0 1 50 100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-040.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-040.html new file mode 100644 index 0000000000..a8b446f343 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-040.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing up and left with scientific numbers: 1 -0.05e1 -0.05e1 1 100 50</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be skewed up vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 -0.05e1 -0.05e1 1 100 50)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-041.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-041.html new file mode 100644 index 0000000000..9e08b96762 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-041.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing down and right with scientific numbers: 1 0.05e1 0.05e1 1 50 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be skewed down vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0.05e1 0.05e1 1 50 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-042.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-042.html new file mode 100644 index 0000000000..dad9be8cf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-042.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing down and left: 1 -0.5 0.5 1 50 50</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed down vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 -0.5 0.5 1 50 50)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-043.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-043.html new file mode 100644 index 0000000000..ba22980e26 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-043.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing up and right: 1 0.5 -0.5 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed up vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0.5 -0.5 1 100 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-044.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-044.html new file mode 100644 index 0000000000..6439e3716c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-044.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and scaling up and skewing down and right: 2 0.5 0.5 2 50 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up vertically and horizontally and skewed down vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + <rect x="50" y="0" width="50" height="50" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(2 0.5 0.5 2 50 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-045.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-045.html new file mode 100644 index 0000000000..3e3ffb4e7f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-045.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and scaling down and skewing up and left: 0.75 -0.5 -0.5 0.75 190 150</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down vertically and horizontally and skewed up vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> + <rect x="200" y="200" width="200" height="200" fill="red"/> + <rect x="0" y="200" width="200" height="200" fill="red"/> + <rect x="0" y="0" width="200" height="200" fill="green"/> + <rect x="200" y="0" width="200" height="200" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect x="-450" y="-450" width="400" height="400" fill="url(#coloredBoxes)" transform="matrix(0.75 -0.5 -0.5 0.75 190 150)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-046.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-046.html new file mode 100644 index 0000000000..8f7a7f73f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-046.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left, scaling up, and skewing down and right with scientific numbers with negative exponents: -2 5e-1 5e-1 2 250 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped left, scaled up, and skewed down vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="0" width="50" height="50" fill="red"/> + <rect x="50" y="0" width="50" height="50" fill="green"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(-2 5e-1 5e-1 2 250 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-047.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-047.html new file mode 100644 index 0000000000..6fc2a2639c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-047.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up, scaling down, and skewing up and left with scientific numbers with negative exponents: 0.5 -5e-1 0 -5e-1 250 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped down, scaled down, and skewed up vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> + <rect x="200" y="200" width="200" height="200" fill="red"/> + <rect x="0" y="200" width="200" height="200" fill="green"/> + <rect x="0" y="0" width="200" height="200" fill="red"/> + <rect x="200" y="0" width="200" height="200" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect x="-450" width="400" height="400" fill="url(#coloredBoxes)" transform="matrix(0.5 -5e-1 0 -5e-1 250 100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-048.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-048.html new file mode 100644 index 0000000000..580716a0e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-048.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left, scaling up horizontally and down vertically, and skewing right and down: -2 0.25 0.25 -0.5 200 200</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left, scaled up horizontally and down vertically, and skewed right and down."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="400"> + <rect x="50" y="200" width="50" height="200" fill="green"/> + <rect x="0" y="200" width="50" height="200" fill="red"/> + <rect x="0" y="0" width="50" height="200" fill="red"/> + <rect x="50" y="0" width="50" height="200" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="100" height="400" fill="url(#coloredBoxes)" transform="matrix(-2 0.25 0.25 -0.5 200 200)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-049.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-049.html new file mode 100644 index 0000000000..9cc5928fa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-049.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas and no spaces</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5,0,0,-0.5,100,100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-050.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-050.html new file mode 100644 index 0000000000..2051fa8f05 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-050.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with spaces before the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 ,0 ,0 ,-0.5 ,100 ,100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-051.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-051.html new file mode 100644 index 0000000000..edbd3b4448 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-051.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with spaces after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5, 0, 0, -0.5, 100, 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-052.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-052.html new file mode 100644 index 0000000000..52191979d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-052.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with spaces before and after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 , 0 , 0 , -0.5 , 100 , 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-053.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-053.html new file mode 100644 index 0000000000..56d4ac4a8d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-053.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with multiple spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 ,0 ,0 ,-0.5 ,100 ,100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-054.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-054.html new file mode 100644 index 0000000000..0e4f1f4665 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-054.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with multiple spaces after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with multiple spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5, 0, 0, -0.5, 100, 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-055.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-055.html new file mode 100644 index 0000000000..6a8cdf1f7a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-055.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before and after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with multiple spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 , 0 , 0 , -0.5 , 100 , 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-056.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-056.html new file mode 100644 index 0000000000..a5177e02b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-056.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by multiple spaces</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by multiple spaces. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-057.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-057.html new file mode 100644 index 0000000000..55dc3499b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-057.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by a mix of spaces and commas</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by a mix of spaces and commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5,0 ,0, -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-058.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-058.html new file mode 100644 index 0000000000..4465b83b64 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-058.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'a' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage values. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(50% 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-059.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-059.html new file mode 100644 index 0000000000..e292d6be83 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-059.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'b' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support degree units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 45deg 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-060.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-060.html new file mode 100644 index 0000000000..434e325469 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-060.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'c' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support gradian units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 50grad -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-061.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-061.html new file mode 100644 index 0000000000..0c27b67506 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-061.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'd' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 50% 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-062.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-062.html new file mode 100644 index 0000000000..f628426554 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-062.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'e' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support px units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 0.5 100px 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-063.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-063.html new file mode 100644 index 0000000000..da21e0a8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-063.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'f' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support pt units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 0.5 100 100pt)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-064.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-064.html new file mode 100644 index 0000000000..116acf9bea --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-064.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'a' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage values. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(50% 0 0 -0.5 100 100) translate(100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-065.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-065.html new file mode 100644 index 0000000000..b372f4b9dd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-065.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'b' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support radian units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 45rad 0 -0.5 100 100) translate(0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-066.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-066.html new file mode 100644 index 0000000000..175ee37f63 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-066.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'c' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support turn units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.125turn -0.5 100 100) translate(100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-067.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-067.html new file mode 100644 index 0000000000..60422fb5c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-067.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'd' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 50% 100 100) scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-068.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-068.html new file mode 100644 index 0000000000..7232ebe44d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-068.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'e' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support pc units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100pc 100) scale(0.5 1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-069.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-069.html new file mode 100644 index 0000000000..bf50033693 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-069.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'f' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support mm units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100 100mm) scale(1 0.5)"/> + </svg> +</body> +</html> |