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/skewX | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.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/skewX')
9 files changed, 229 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewx-ref.html b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewx-ref.html new file mode 100644 index 0000000000..9504c266b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewx-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 { + 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> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html new file mode 100644 index 0000000000..22b857ffb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-001.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-001.html new file mode 100644 index 0000000000..8c3181b089 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and angle argument without unit on skewX</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-skewx"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support unit less arguments for angle. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 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 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(45)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-006.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-006.html new file mode 100644 index 0000000000..9f3f3c3362 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX with negative, unit less turn</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-skewx"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support negative, unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 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 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(-315)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-011.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-011.html new file mode 100644 index 0000000000..e7539d23da --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and more than full circle skewX with unit less angle</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-skewx"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 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 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(405)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-016.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-016.html new file mode 100644 index 0000000000..29078907f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-016.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers on unit less angles</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 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 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(4.5e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-021.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-021.html new file mode 100644 index 0000000000..73944503df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-021.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers with negative exponents for unit less arguments</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 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 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(450e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-with-units.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-with-units.html new file mode 100644 index 0000000000..128ee49a7c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-with-units.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG transform attribute with units on skewX</title> + <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2623"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="assert" content="The skewX transform function should not support the CSS transform syntax with units. The green rects in this test should have no transform applied."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg width="250" height="250" style="background: green"> + <rect width="100" height="100" fill="red"/> + <rect y="0" width="100" height="50" fill="green" transform="skewX(45deg)"/> + <rect y="50" width="100" height="50" fill="green" transform="skewX(45rad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewxy-001.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewxy-001.html new file mode 100644 index 0000000000..23467a9936 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewxy-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute with skewX and skewY</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-skewx"> + <link rel="match" href="reference/svg-skewxy-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The green rect in this test should be skewed horizontally 45 degrees and vertically 45 degrees to completely cover the red path."> + <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-1"> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 4,3 101,99 296,197 200,101 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(45) skewY(45)"/> + </svg> +</body> +</html> |