diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/svg/svg-integration/clip-path | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream/124.0.1.tar.xz firefox-upstream/124.0.1.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/svg-integration/clip-path')
76 files changed, 1839 insertions, 0 deletions
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html new file mode 100644 index 0000000000..34def2ff95 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: url(#c1)"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html new file mode 100644 index 0000000000..c506a2b684 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with no values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle without values for clipping of a square. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle();"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html new file mode 100644 index 0000000000..007cd80c9d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html new file mode 100644 index 0000000000..c242dc91b3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with farthest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with farthest-side for clipping of a square. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(farthest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html new file mode 100644 index 0000000000..4bb8d89ee1 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 003</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-left: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html new file mode 100644 index 0000000000..ae4d2d5098 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with closest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with the value closest-side for clipping of a square. On pass you + should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(closest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html new file mode 100644 index 0000000000..3885dd5547 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 004</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html new file mode 100644 index 0000000000..6bff6f8399 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 0; height: 100px; border: solid green 100px; background-color: green; clip-path: circle(at top 100px left 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html new file mode 100644 index 0000000000..1a52c69567 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 005</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="300" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html new file mode 100644 index 0000000000..aeea854ea2 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at bottom 100px left 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html new file mode 100644 index 0000000000..a07cbb66cd --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 006</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 400px; height: 400px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html new file mode 100644 index 0000000000..423f4b24ca --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 003</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 0; border: solid green 100px; background-color: green; clip-path: circle(at left 100px top 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html new file mode 100644 index 0000000000..caba51737b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 007</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html new file mode 100644 index 0000000000..fbf204fd7e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 004</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at right 100px top 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html new file mode 100644 index 0000000000..cdf8da8ede --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 008</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="150" cy="150" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html new file mode 100644 index 0000000000..564b6cd105 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 005</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: circle(at left -100px top 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html new file mode 100644 index 0000000000..7d055c4d7d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 009</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="200" cy="200" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html new file mode 100644 index 0000000000..949c6afd14 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 006</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-003-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-right: 200px; width: 0; height: 200px; background-color: green; clip-path: circle(at right -100px top 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html new file mode 100644 index 0000000000..7fed7ee45c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 010</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding: 100px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="200" cy="200" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html new file mode 100644 index 0000000000..4952c6f48d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 007</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-004-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; padding-top: 200px; background-color: green; clip-path: circle(at top -100px left 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html new file mode 100644 index 0000000000..d2a00b5e80 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 008</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-005-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; padding-bottom: 200px; background-color: green; clip-path: circle(at bottom -100px left 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html new file mode 100644 index 0000000000..efded811f8 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 009</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-006-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(100px at 100px 100px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html new file mode 100644 index 0000000000..482980af9b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 010</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(25% at 25% 25%);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html new file mode 100644 index 0000000000..3c4b35d7d3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-007-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword border-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) border-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html new file mode 100644 index 0000000000..bc8e161cc6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with padding-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-008-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword padding-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) padding-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html new file mode 100644 index 0000000000..7cea5f2bbb --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with content-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-009-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword content-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html new file mode 100644 index 0000000000..4947ac1a27 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with margin-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-007-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword margin-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; box-shadow: 0 0 0 50px green; clip-path: circle(100px at 150px 150px) margin-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html new file mode 100644 index 0000000000..b41d7aecc5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on rectangle 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-010-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a differently sized rectangle. On + pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 100px; background-color: green; clip-path: circle(farthest-side at center 100px) content-box; padding: 100px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html new file mode 100644 index 0000000000..395002a2d2 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on rectangle 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a differently sized rectangle. On + pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 400px; background-color: green; clip-path: circle(closest-side at center 100px) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html new file mode 100644 index 0000000000..82b52ae457 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on rectangle 003</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a differently sized rectangle. This + also tests the correct usage of the specified formula: + r = sqrt(width^2 + height^2) + On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 60px; height: 80px; padding: 60px 70px 60px 70px; background-color: green; clip-path: circle(100px) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html new file mode 100644 index 0000000000..c87ded532f --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on circle 021</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 600px; height: 600px; background-color: green; clip-path: circle();"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html new file mode 100644 index 0000000000..a9229e6ea7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on circle 021</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-021-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape circle() with large reference box and percentage radius."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 600px; height: 600px; background-color: green; clip-path: circle(50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html new file mode 100644 index 0000000000..fc0392da94 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's ellipse function 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <ellipse cx="200" cy="100" rx="200" ry="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html new file mode 100644 index 0000000000..77ff7b9b0e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function without values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse without values for clipping of a rectangle. On pass you should see + a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse();"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html new file mode 100644 index 0000000000..6b80585b90 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with absolute radii</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with absolute radii for clipping of a rectangle. On pass you should + see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(200px 100px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html new file mode 100644 index 0000000000..9b1051d189 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function percentage radii</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with percentage radii for clipping of a rectangle. On pass you + should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(50% 50%);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html new file mode 100644 index 0000000000..b1d05cddf5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with farthest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with the value farthest-side for clipping of a rectangle. On pass + you should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(farthest-side farthest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html new file mode 100644 index 0000000000..116a08e4c1 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with closest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with the value closest-side and position for clipping of a + rectangle. On pass you should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; padding-top: 200px; background-color: green; clip-path: ellipse(closest-side closest-side at top -100px left 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html new file mode 100644 index 0000000000..39c07e98e4 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with position 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with a position for clipping of a rectangle. On pass you should see + a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(200px closest-side at left center) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html new file mode 100644 index 0000000000..ca23693c2c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with position 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with a position for clipping of a rectangle. On pass you should see + a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(farthest-side 50% at left center) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html new file mode 100644 index 0000000000..560cfc0761 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with the keyword border-box for clipping of a rectangle. On pass + you should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(closest-side closest-side) border-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html new file mode 100644 index 0000000000..6bfa2d39fd --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's inset function 001</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 40px; + background-color: green; + position: relative; + top: 10px; + left: 10px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html new file mode 100644 index 0000000000..35eab0305c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with 10px on all sides</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-001-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px); + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html new file mode 100644 index 0000000000..7af06c8907 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with different insets on each side</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-001-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 120px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px 20px); + position: relative; + left: -10px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html new file mode 100644 index 0000000000..81c016084c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with different insets for all 4 sides</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-001-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 110px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(5px 10px 15px 20px); + position: relative; + left: -10px; + top: 5px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html new file mode 100644 index 0000000000..1c15399e3d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's inset function (with rounded corners) 002</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 180px; + height: 180px; + background-color: green; + position: relative; + top: 10px; + left: 10px; + border-radius: 20px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html new file mode 100644 index 0000000000..2ac95f1beb --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-002-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 20px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html new file mode 100644 index 0000000000..1a87f8258a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-002-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 20px 20px 20px 20px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html new file mode 100644 index 0000000000..01b60634f7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-002-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 20px / 20px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html new file mode 100644 index 0000000000..faec64ce7c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's inset function (with different rounded corners) 003</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 180px; + height: 180px; + background-color: green; + position: relative; + top: 10px; + left: 10px; + border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html new file mode 100644 index 0000000000..5c57c39239 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with different rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-003-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 10px 20px 30px 40px / 50px 60px 70px 80px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html new file mode 100644 index 0000000000..bd3093f15b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with absolute values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test absolute value arguments. On pass you should + see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html new file mode 100644 index 0000000000..b34a73228e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test percentage values for arguments. Percentage + values are relative to specified reference box. If no reference box was + specified, percentage values are relative to border-box. A number of + percentage values are specified as coordinates. On pass you should see a + green square and no red."> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html new file mode 100644 index 0000000000..067a3f939a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with absolute and percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test absolute and percentage value arguments. On + pass you should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html new file mode 100644 index 0000000000..7c937ed3ea --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with fill rule evenodd</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-border-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape 'polygon' for clipping. + The point list for the polygon creates a 'whole' with the dimension of the background. With + the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background + of the parent div box visible. + On pass you should see a green box with a blue border."> +</head> +<body> + <p>The test passes if there is a green rectangle with a blue border.</p> + <div style="background-color: green; width: 250px;"> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html new file mode 100644 index 0000000000..5b141290fe --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with fill rule nonzero</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-border-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. The point list for the polygon creates a 'hole' + with the dimension of the background of the clipped element. With the fill + rule 'nonzero', this hole is clipped out. The clipping makes the green + background of the parent div box visible. On pass you should see a green + square with a blue border."> +</head> +<body> + <p>The test passes if there is a green rectangle with a blue border.</p> + <div style="background-color: green; width: 250px;"> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(nonzero, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 50px 50px, 50px 150px, 200px 150px, 200px 50px, 0 50px)"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html new file mode 100644 index 0000000000..cb345de91d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with padding-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-square-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'padding-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green square + and no red."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; +} +</style> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="clip-path: polygon(0% 0%, 100% 0%, 100px 100%, 0 100px) padding-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html new file mode 100644 index 0000000000..9d3c2dc9c3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'border-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) border-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html new file mode 100644 index 0000000000..04edaf5a5a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with margin-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-002-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'margin-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; + border-left: lime solid 25px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html new file mode 100644 index 0000000000..2debdc38e4 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with content-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-square-002-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'content-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green square + and no red."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; +} +</style> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="clip-path: polygon(0% 0px, 50px 0%, 100% 50px, 0px 100%) content-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html new file mode 100644 index 0000000000..37f1ad5f81 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with fill-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'fill-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(-75px -50%, 50% -25px, 25px 150%, -75px 75px) + fill-box"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html new file mode 100644 index 0000000000..f8a80ef2df --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with stroke-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'stroke-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) stroke-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html new file mode 100644 index 0000000000..dc48d662e5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with view-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'view-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) view-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html new file mode 100644 index 0000000000..203c7e1015 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html @@ -0,0 +1,51 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon different units</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-003-ref.html"> + <meta name="assert" content="Test the support of different units for + polygon coordinates. The test passes if you see a multiple green and blue + stripe pairs. For each pair, the blue and green stripe must be of same + length."> +<style> +div { + width: 100%; + height: 20px; + background-color: green; + padding: 0; + margin: 0; +} +div:nth-child(odd) { + margin-bottom: 5px; + background-color: blue; +} +</style> +<body> + <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> + <div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div> + <div style="width: 50%"></div> + + <div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div> + <div style="width: 20em"></div> + + <!-- Activate when SVG2 is supported. + <div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div> + <div style="width: 50vw"></div> + + <div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div> + <div style="width: 40vh"></div> + + <div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div> + <div style="width: calc(30% + 15px)"></div>--> + + <div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div> + <div style="width: 30ex"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html new file mode 100644 index 0000000000..2a9f65f163 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green rectangle with a blue border.</p> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html new file mode 100644 index 0000000000..45bc902c3d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html new file mode 100644 index 0000000000..f0f26e065c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html new file mode 100644 index 0000000000..1831ecebae --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html new file mode 100644 index 0000000000..6add82da00 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'border-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: url(#c1)"></div> + <svg> + <clipPath id="c1"> + <rect x="0" y="50" width="100" height="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html new file mode 100644 index 0000000000..6a0132fb69 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; + border-left: lime solid 25px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div> + <svg> + <clipPath id="c1"> + <rect x="0" y="50" width="50" height="50"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html new file mode 100644 index 0000000000..731ff91533 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html @@ -0,0 +1,63 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +<style> +div { + height: 20px; + width: 100%; + background-color: green; + padding: 0; + margin: 0; +} +div:nth-child(odd) { + margin-bottom: 5px; + background-color: blue; +} +</style> +<body> + <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> + <div style="clip-path: url(#c1)"></div> + <div style="width: 50%"></div> + + <div style="clip-path: url(#c2)"></div> + <div style="width: 20em"></div> + + <!--<div style="clip-path: url(#c3)"></div> + <div style="width: 50vw"></div> + + <div style="clip-path: url(#c4)"></div> + <div style="width: 40vh"></div> + + <div style="clip-path: url(#c5)"></div> + <div style="width: calc(30% + 15px)"></div>--> + + <div style="clip-path: url(#c6)"></div> + <div style="width: 30ex"></div> + <svg> + <clipPath id="c1" clipPathUnits="objectBoundingBox"> + <rect width="0.5" height="1"/> + </clipPath> + <clipPath id="c2"> + <rect width="20em" height="20"/> + </clipPath> + <!--<clipPath id="c3"> + <rect width="50vw" height="20"/> + </clipPath> + <clipPath id="c4"> + <rect width="40vh" height="20"/> + </clipPath> + <clipPath id="c5"> + <rect width="calc(30% + 15px)" height="20"/> + </clipPath>--> + <clipPath id="c6"> + <rect width="30ex" height="20"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html new file mode 100644 index 0000000000..64d41f90c5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<body> + <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart."> + <g> + <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect> + <g> + <g> + <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect> + </g> + <g> + <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path> + </g> + </g> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html new file mode 100644 index 0000000000..30ddee2d56 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<body> + <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart."> + <defs id="defs"> + <clipPath id="_ABSTRACT_RENDERER_ID_1"> + <rect x="20" y="22" width="297" height="124"></rect> + </clipPath> + </defs> + <g> + <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect> + <g clip-path="url(#_ABSTRACT_RENDERER_ID_1)"> + <g> + <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect> + </g> + <g> + <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path> + </g> + </g> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html new file mode 100644 index 0000000000..f4a0c48e93 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html @@ -0,0 +1,5 @@ +<svg> + <g> + <circle cx="50" cy="50" r="50" style="fill: green;"></circle> + </g> +</svg> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html new file mode 100644 index 0000000000..44ec2997f2 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html @@ -0,0 +1,10 @@ +<svg> + <defs> + <clipPath id="clip" transform="translate(-50,0)"> + <rect x="0" y="0" width="100" height="100" transform="translate(50,0)"></rect> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <circle cx="50" cy="50" r="50" style="fill: green;"></circle> + </g> +</svg> diff --git a/layout/reftests/svg/svg-integration/clip-path/reftest.list b/layout/reftests/svg/svg-integration/clip-path/reftest.list new file mode 100644 index 0000000000..82d4c813f5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/reftest.list @@ -0,0 +1,61 @@ +# These tests verify that CSS clip-path behaves properly. +# e.g. clip-path: polygon(nonzero, 3px 3px, 20% 20%) + +# Following tests adapted from W3C csswg-test repo +== clip-path-polygon-001.html clip-path-rectangle-ref.html +== clip-path-polygon-002.html clip-path-rectangle-ref.html +== clip-path-polygon-003.html clip-path-rectangle-ref.html +== clip-path-polygon-004.html clip-path-rectangle-border-ref.html +== clip-path-polygon-005.html clip-path-rectangle-border-ref.html +== clip-path-polygon-006.html clip-path-square-001-ref.html +== clip-path-polygon-007.html clip-path-stripes-001-ref.html +== clip-path-polygon-008.html clip-path-stripes-002-ref.html +== clip-path-polygon-009.html clip-path-square-002-ref.html +== clip-path-polygon-010.html clip-path-stripes-001-ref.html +== clip-path-polygon-011.html clip-path-stripes-001-ref.html +== clip-path-polygon-012.html clip-path-stripes-001-ref.html +fuzzy(0-1,0-20) == clip-path-polygon-013.html clip-path-stripes-003-ref.html + +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-001.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-002.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-003.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-004.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-005.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-006.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-007.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-008.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-009.html clip-path-circle-003-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-010.html clip-path-circle-004-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-011.html clip-path-circle-005-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-012.html clip-path-circle-006-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-013.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-925) == clip-path-circle-014.html clip-path-circle-007-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-925) == clip-path-circle-015.html clip-path-circle-008-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-925) == clip-path-circle-016.html clip-path-circle-009-ref.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-16,0-9) fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-017.html clip-path-circle-007-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-018.html clip-path-circle-010-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-019.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-020.html clip-path-circle-002-ref.html +fuzzy-if(winWidget||cocoaWidget,0-1,0-11) == clip-path-circle-021.html clip-path-circle-021-ref.html + +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-001.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-002.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-003.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-004.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-005.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-006.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-007.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-008.html clip-path-ellipse-001-ref.html + +== clip-path-inset-001a.html clip-path-inset-001-ref.html +== clip-path-inset-001b.html clip-path-inset-001-ref.html +== clip-path-inset-001c.html clip-path-inset-001-ref.html +# Anti-aliasing behavior for masking and borders is different +fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002a.html clip-path-inset-002-ref.html +fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002b.html clip-path-inset-002-ref.html +fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002c.html clip-path-inset-002-ref.html +fuzzy-if(useDrawSnapshot,0-64,0-340) fuzzy-if(!useDrawSnapshot,0-1,0-60) == clip-path-inset-003.html clip-path-inset-003-ref.html + +fuzzy(0-1,0-17) == clip-path-stroke-001.html clip-path-stroke-001-ref.html + +== clip-path-transform-001.html clip-path-transform-001-ref.html |