diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/group')
42 files changed, 1139 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html new file mode 100644 index 0000000000..64bcfbe7df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-ref.html b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-ref.html new file mode 100644 index 0000000000..ea386e774b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="40" y="40" width="80" height="80" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-001.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-001.html new file mode 100644 index 0000000000..e0f7306754 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated, therefore the child element should be translated to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 40)"> + <rect width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-002.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-002.html new file mode 100644 index 0000000000..cb4d7aac46 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translateX on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated horizontally, therefore the child element should be translated horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 0)"> + <rect y="40" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-003.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-003.html new file mode 100644 index 0000000000..6f21fe2c88 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translateY on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated vertically, therefore the child element should be translated vertically to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(0 40)"> + <rect x="40" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-004.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-004.html new file mode 100644 index 0000000000..e22809bb48 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled, therefore the child element should be scaled to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2)"> + <rect x="20" y="20" width="40" height="40" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-005.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-005.html new file mode 100644 index 0000000000..5d5e5ada46 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scaleX on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled horizontally, therefore the child element should be scaled horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="20" y="40" width="40" height="80" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-006.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-006.html new file mode 100644 index 0000000000..2bbf77d26f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scaleY on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled vertically, therefore the child element should be scaled vertically to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(1 2)"> + <rect x="40" y="20" width="80" height="40" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-007.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-007.html new file mode 100644 index 0000000000..ce47ad19d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be rotated, therefore the child element should be rotated. The green rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(90)"> + <rect x="40" y="-120" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-008.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-008.html new file mode 100644 index 0000000000..e095b7f989 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-008.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be skewed horizontally, therefore the child element should be skewed horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 100,99 Z" fill="red"/> + <g transform="skewX(45)"> + <rect width="100" height="100" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-009.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-009.html new file mode 100644 index 0000000000..da16c47f98 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-009.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewY on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be skewed vertically, therefore the child element should be skewed vertically to completely cover the red rect."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 1,100 99,198 99,100 Z" fill="red"/> + <g transform="skewY(45)"> + <rect width="100" height="100" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-010.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-010.html new file mode 100644 index 0000000000..9076cb881c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-010.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should have the transform matrix applied, therefore the child element should be scaled and translated to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="matrix(-2 0 0 -2 120 120)"> + <rect width="40" height="40" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-011.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-011.html new file mode 100644 index 0000000000..59c4e77b27 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate with three arguments on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be rotated and translated, therefore the child element should be rotated and translated. The green rect in this test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(90,20,20)"> + <rect x="40" y="-80" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-001.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-001.html new file mode 100644 index 0000000000..c3060313df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate on group, translate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated. Additionally, the child rect should be translated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(20 20)"> + <rect width="80" height="80" fill="green" transform="translate(20 20)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-002.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-002.html new file mode 100644 index 0000000000..37e897c14a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateX on group, translateX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated horizontally. Additionally, the child rect should be translated horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(20 0)"> + <rect y="40" width="80" height="80" fill="green" transform="translate(20 0)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-003.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-003.html new file mode 100644 index 0000000000..092946744a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateY on group, translateY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated vertically. Additionally, the child rect should be translated vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(0 20)"> + <rect x="40" width="80" height="80" fill="green" transform="translate(0 20)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-004.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-004.html new file mode 100644 index 0000000000..810c60d293 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scale on group, scale on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled. Additionally, the child rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2)"> + <rect x="10" y="10" width="20" height="20" fill="green" transform="scale(2)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-005.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-005.html new file mode 100644 index 0000000000..ca693d2c34 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, scaleX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="10" y="40" width="20" height="80" fill="green" transform="scale(2 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-006.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-006.html new file mode 100644 index 0000000000..91f1d3e857 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleY on group, scaleY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled vertically. Additionally, the child rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(1 2)"> + <rect x="40" y="10" width="80" height="20" fill="green" transform="scale(1 2)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-007.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-007.html new file mode 100644 index 0000000000..026a5f84cc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, rotate on group, rotate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be rotated. Additionally, the child rect should be rotated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(45)"> + <rect x="40" y="-120" width="80" height="80" fill="green" transform="rotate(45)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-008.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-008.html new file mode 100644 index 0000000000..80b153344e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-008.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewX on group, skewX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed horizontally. Additionally, the child rect should be skewed horizontally."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 99,1 196,99 100,99 Z" fill="red"/> + <g transform="skewX(27)"> + <rect width="100" height="100" fill="green" transform="skewX(26)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-009.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-009.html new file mode 100644 index 0000000000..bb747ea330 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-009.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewY on group, skewY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-1"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed vertically. Additionally, the child rect should be skewed vertically."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 1,99 99,197 99,100 Z" fill="red"/> + <g transform="skewY(27)"> + <rect width="100" height="100" fill="green" transform="skewY(26)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-010.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-010.html new file mode 100644 index 0000000000..14e385752f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-010.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, matrix on group, matrix on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled and translated. Additionally, the child rect should be scaled and translated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="matrix(-0.25 0 0 -0.25 50 50)"> + <rect width="160" height="160" fill="green" transform="matrix(2 0 0 2 -280 -280)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-011.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-011.html new file mode 100644 index 0000000000..8c67bafb2e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-011.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translate on group, scale on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated. Additionally, the child rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 40)"> + <rect width="40" height="40" fill="green" transform="scale(2)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-012.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-012.html new file mode 100644 index 0000000000..a6571892df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-012.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateX on group, scaleY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated horizontally. Additionally, the child rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 0)"> + <rect y="20" width="80" height="40" fill="green" transform="scale(1 2)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-013.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-013.html new file mode 100644 index 0000000000..355746b1b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-013.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateY on group, skewX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated vertically. Additionally, the child rect should be skewed horizontally."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,26 100,26 198,124 100,124 Z" fill="red"/> + <g transform="translate(0 25)"> + <rect width="100" height="100" fill="green" transform="skewX(45)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-014.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-014.html new file mode 100644 index 0000000000..e6da31a682 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-014.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scale on group, skewY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled. Additionally, the child rect should be skewed vertically."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 1,100 99,198 99,100 Z" fill="red"/> + <g transform="scale(0.5)"> + <rect width="200" height="200" fill="green" transform="skewY(45)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-015.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-015.html new file mode 100644 index 0000000000..6ec40d41d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-015.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, rotate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be rotated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="40" y="-60" width="80" height="40" fill="green" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-016.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-016.html new file mode 100644 index 0000000000..22db9eaebc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-016.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleY on group, translateX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled vertically. Additionally, the child rect should be translated horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(1 2)"> + <rect y="20" width="80" height="40" fill="green" transform="translate(40 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-017.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-017.html new file mode 100644 index 0000000000..3797318afa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-017.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, rotate on group, translateY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be rotated. Additionally, the child rect should be translated vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(90)"> + <rect x="40" y="-160" width="80" height="80" fill="green" transform="translate(0 40)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-018.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-018.html new file mode 100644 index 0000000000..798078e872 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-018.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewX on group, scaleX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed horizontally. Additionally, the child rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 100,99 Z" fill="red"/> + <g transform="skewX(45)"> + <!-- FIXME: This test will still pass if the transform= is ignored --> + <rect width="200" height="100" fill="green" transform="scale(0.5 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-019.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-019.html new file mode 100644 index 0000000000..c3fb59ece6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-019.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewY on group, translate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed vertically. Additionally, the child rect should be translated."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 21,42 21,140 119,238 119,140 Z" fill="red"/> + <g transform="skewY(45)"> + <rect width="100" height="100" fill="green" transform="translate(20 20)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-020.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-020.html new file mode 100644 index 0000000000..a90af99610 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-020.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, matrix on group, scaleX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled and translated. Additionally, the child rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="matrix(-1 0 0 -2 120 120)"> + <rect width="40" height="40" fill="green" transform="scale(2 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-021.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-021.html new file mode 100644 index 0000000000..3b8be89f3f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-021.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translate on group, scaleY on child1, rotate on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated. Additionally, the first rect should be scaled vertically and the second rect should be rotated."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="translate(20 20)"> + <rect x="21" y="42" width="78" height="156" fill="red" transform="scale(1 0.5)"/> <!-- false positive if scaleY is negative; need to fix --> + <rect x="20" y="-100" width="80" height="80" fill="green" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-022.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-022.html new file mode 100644 index 0000000000..3ef4bba5a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-022.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateX on group, scaleX on child1, matrix on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated horizontally. Additionally, the first rect should be scaled horizontally and the second rect should have the transform matrix applied."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="translate(20 0)"> + <rect x="42" y="41" width="156" height="78" fill="red" transform="scale(0.5 1)"/> <!-- false positive if scaleX is negative --> + <rect width="40" height="40" fill="green" transform="matrix(-2 0 0 -2 100 120)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-023.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-023.html new file mode 100644 index 0000000000..a240df2f43 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-023.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateY on group, translate on child1, scale on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated vertically. Additionally, the first rect should be translated and the second rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="translate(0 25)"> + <rect x="1" y="1" width="78" height="78" fill="red" transform="translate(40 15)"/> + <rect x="80" y="30" width="160" height="160" fill="green" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-024.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-024.html new file mode 100644 index 0000000000..baab7bfa87 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-024.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scale on group, translateX on child1, scaleX on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled. Additionally, the first rect should be translated horizontally and the second rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="scale(0.5)"> + <rect x="62" y="82" width="156" height="156" fill="red" transform="translate(20 0)"/> + <rect x="160" y="80" width="320" height="160" fill="green" transform="scale(0.5 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-025.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-025.html new file mode 100644 index 0000000000..68958f6f51 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-025.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, translateY on child1, scale on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled horizontally. Additionally, the first rect should be translated vertically and the second rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="scale(0.5 1)"> + <rect x="82" y="21" width="156" height="78" fill="red" transform="translate(0 20)"/> + <rect x="160" y="80" width="320" height="160" fill="green" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-026.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-026.html new file mode 100644 index 0000000000..5c87506a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-026.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleY on group, translate on child1, rotate on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled vertically. Additionally, the first rect should be translated and the second rect should be rotated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="scale(1 0.5)"> <!-- false positive if scaleY is negative; need to fix --> + <rect x="21" y="42" width="78" height="156" fill="red" transform="translate(20 40)"/> + <rect x="80" y="-120" width="160" height="80" fill="green" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-027.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-027.html new file mode 100644 index 0000000000..f4119792ff --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-027.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, rotate on group, translateX on child1, scaleY on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be rotated. Additionally, the first rect should be translated horizontally and the second rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="rotate(90)"> + <rect x="20" y="-120" width="80" height="80" fill="green" transform="translate(20 0)"/> + <rect x="40" y="-240" width="80" height="160" fill="green" transform="scale(1 0.5)"/> <!-- false positive if scaleY is negative; need to fix --> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-028.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-028.html new file mode 100644 index 0000000000..69d88bc272 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-028.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, matrix on group, scaleY on child1, translateY on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should have the transform matrix applied. Additionally, the first rect should be translated vertically and the second rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="matrix(-0.5 0 0 -0.5 120 90)"> + <rect x="2" y="-116" width="156" height="312" fill="red" transform="scale(1 0.5)"/> <!-- false positive if scaleY is between 0.4 and -0.3 --> + <rect width="160" height="160" fill="green" transform="translate(0 -60)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-029.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-029.html new file mode 100644 index 0000000000..3a28c97a1c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-029.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, rotate with three arguments on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be rotated after the transform origin is translated."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="40" y="-20" width="80" height="40" fill="green" transform="rotate(90,20,20)"/> + </g> + </svg> +</body> +</html> |