diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-transforms/document-styles | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/document-styles')
15 files changed, 537 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html b/testing/web-platform/tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html new file mode 100644 index 0000000000..3a95342030 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-001.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-001.html new file mode 100644 index 0000000000..c719d39ee6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG element with presentation attribute style on the same element</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: rotate(90deg); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-002.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-002.html new file mode 100644 index 0000000000..96bce830b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG child element with presentation attribute styles on the parent and child elements</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG elements should override presentation attribute styles on the same element. Presentation attribute styles on its parent should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels, and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: translateY(-100px); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-003.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-003.html new file mode 100644 index 0000000000..c1fe39dba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG group element and presentation attribute style on child element</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG group elements should be pre-multipled on the child elements. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: rotate(90deg); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-004.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-004.html new file mode 100644 index 0000000000..1a7c139028 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG group element and presentation attribute style on group and child elements</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG group elements override presentation attribute styles on the same element. Presentation attribute styles on child elements should be post-multiplied. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: rotate(90deg); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup" transform="scale(0.5)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-005.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-005.html new file mode 100644 index 0000000000..cbf5d103bf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute style of SVG element with invalid document transform style</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-006.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-006.html new file mode 100644 index 0000000000..71975eea1c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-006.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute styles of SVG element with invalid document transform style and presentation attribute style on group</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-007.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-007.html new file mode 100644 index 0000000000..b88407c0e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-007.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style on SVG child element with valid presentation attribute style on group and invalid presentation attribute style on child</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles on an element are invalid, no transform should be applied. However, valid presentation attribute styles on the group should still be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-008.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-008.html new file mode 100644 index 0000000000..329d09b973 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-008.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document and presentation attribute styles on an SVG element</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-009.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-009.html new file mode 100644 index 0000000000..32252e7d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-009.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style on SVG group with valid presentation attribute style on child element</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on group elements should not be applied, but valid presentation attribute styles on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-010.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-010.html new file mode 100644 index 0000000000..47cba53a28 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-010.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style on SVG group with valid presentation attribute styles on group and child elements</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on group elements should fall back to presentation attribute styles on the same element. Presentation attribute styles on the child should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup" transform="rotate(90)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-011.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-011.html new file mode 100644 index 0000000000..cc6fee768f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-011.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style and invalid presentation attribute style on SVG group and valid presentation attribute style on child</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/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles on a group are invalid, no transform should be applied. However, the valid presentation attribute style on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup" transform="scale(invalid)"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-012.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-012.html new file mode 100644 index 0000000000..e649ef2ddf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-012.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Document style of rotate with three arguments on SVG element with presentation attribute style on the same element</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/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document style of rotate with three arguments on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: rotate(90deg); + transform-origin: 20px 20px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-013.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-013.html new file mode 100644 index 0000000000..e12bc8f0d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-013.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Fall back to presentation attribute style of rotate with three arguments of SVG element with invalid document style</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/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document styles on SVG elements should fall back to presentation attributes styles of rotate with three arguments on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="rotate(90,20,20)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-014.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-014.html new file mode 100644 index 0000000000..c7a43b1582 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-014.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Invalid document and presentation attribute styles on an SVG element using rotate with three arguments</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or rotated."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="rotate(90,invalid,invalid)"/> + </svg> +</body> +</html> |