diff options
Diffstat (limited to 'layout/reftests/svg/svg-integration')
125 files changed, 3019 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 000000000..34def2ff9 --- /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 000000000..c506a2b68 --- /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 000000000..007cd80c9 --- /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 000000000..c242dc91b --- /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 000000000..4bb8d89ee --- /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 000000000..ae4d2d509 --- /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 000000000..3885dd554 --- /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 000000000..ec25c044c --- /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 center);"></div> +</body> +</html>
\ No newline at end of file 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 000000000..1a52c6956 --- /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 000000000..a68b33e19 --- /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 center);"></div> +</body> +</html>
\ No newline at end of file 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 000000000..a07cbb66c --- /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 000000000..dea4071f2 --- /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 center);"></div> +</body> +</html>
\ No newline at end of file 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 000000000..caba51737 --- /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 000000000..dc4432ee4 --- /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 center);"></div> +</body> +</html>
\ No newline at end of file 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 000000000..cdf8da8ed --- /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 000000000..c335f7c3d --- /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 center) content-box;"></div> +</body> +</html>
\ No newline at end of file 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 000000000..7d055c4d7 --- /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 000000000..0b7b69443 --- /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 center) content-box;"></div> +</body> +</html>
\ No newline at end of file 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 000000000..7fed7ee45 --- /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 000000000..2e7ea353f --- /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 center) content-box;"></div> +</body> +</html>
\ No newline at end of file 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 000000000..6df5b5228 --- /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 center) content-box;"></div> +</body> +</html>
\ No newline at end of file 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 000000000..efded811f --- /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 000000000..482980af9 --- /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 000000000..3c4b35d7d --- /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 000000000..bc8e161cc --- /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 000000000..7cea5f2bb --- /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 000000000..4947ac1a2 --- /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 000000000..b41d7aecc --- /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 000000000..395002a2d --- /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 000000000..82b52ae45 --- /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-ellipse-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html new file mode 100644 index 000000000..fc0392da9 --- /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 000000000..77ff7b9b0 --- /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 000000000..6b80585b9 --- /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 000000000..9b1051d18 --- /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 000000000..b1d05cddf --- /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 000000000..50d97f3f5 --- /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 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-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html new file mode 100644 index 000000000..39c07e98e --- /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 000000000..ca23693c2 --- /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 000000000..560cfc076 --- /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 000000000..6bfa2d39f --- /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 000000000..35eab0305 --- /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 000000000..7af06c890 --- /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 000000000..81c016084 --- /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 000000000..1c15399e3 --- /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 000000000..2ac95f1be --- /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 000000000..1a87f8258 --- /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 000000000..01b60634f --- /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 000000000..faec64ce7 --- /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 000000000..5c57c3923 --- /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 000000000..bd3093f15 --- /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 000000000..b34a73228 --- /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 000000000..067a3f939 --- /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 000000000..7c937ed3e --- /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 000000000..5b141290f --- /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 000000000..cb345de91 --- /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 000000000..9d3c2dc9c --- /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 000000000..04edaf5a5 --- /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 000000000..2debdc38e --- /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 000000000..c5656d134 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.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 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(0% 25%, 50% 50px, 100px 75%, 0 150px) fill-box"></div> +</body> +</html>
\ No newline at end of file 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 000000000..f8a80ef2d --- /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 000000000..dc48d662e --- /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 000000000..203c7e101 --- /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 000000000..2a9f65f16 --- /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 000000000..45bc902c3 --- /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 000000000..f0f26e065 --- /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 000000000..1831eceba --- /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 000000000..6add82da0 --- /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 000000000..6a0132fb6 --- /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 000000000..731ff9153 --- /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/reftest-stylo.list b/layout/reftests/svg/svg-integration/clip-path/reftest-stylo.list new file mode 100644 index 000000000..273ece54e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/reftest-stylo.list @@ -0,0 +1,50 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# These tests verify that CSS clip-path behaves properly. +# e.g. clip-path: polygon(nonzero, 3px 3px, 20% 20%) + +default-preferences pref(layout.css.clip-path-shapes.enabled,true) + +# Following tests adapted from W3C csswg-test repo +== clip-path-polygon-001.html clip-path-polygon-001.html +== clip-path-polygon-002.html clip-path-polygon-002.html +== clip-path-polygon-003.html clip-path-polygon-003.html +== clip-path-polygon-004.html clip-path-polygon-004.html +skip == clip-path-polygon-005.html clip-path-polygon-005.html +== clip-path-polygon-006.html clip-path-polygon-006.html +== clip-path-polygon-007.html clip-path-polygon-007.html +== clip-path-polygon-008.html clip-path-polygon-008.html +== clip-path-polygon-009.html clip-path-polygon-009.html +== clip-path-polygon-010.html clip-path-polygon-010.html +== clip-path-polygon-011.html clip-path-polygon-011.html +== clip-path-polygon-012.html clip-path-polygon-012.html +== clip-path-polygon-013.html clip-path-polygon-013.html + +== clip-path-circle-001.html clip-path-circle-001.html +== clip-path-circle-002.html clip-path-circle-002.html +== clip-path-circle-003.html clip-path-circle-003.html +== clip-path-circle-004.html clip-path-circle-004.html +== clip-path-circle-005.html clip-path-circle-005.html +== clip-path-circle-006.html clip-path-circle-006.html +== clip-path-circle-007.html clip-path-circle-007.html +== clip-path-circle-008.html clip-path-circle-008.html +== clip-path-circle-009.html clip-path-circle-009.html +== clip-path-circle-010.html clip-path-circle-010.html +== clip-path-circle-011.html clip-path-circle-011.html +== clip-path-circle-012.html clip-path-circle-012.html +== clip-path-circle-013.html clip-path-circle-013.html +== clip-path-circle-014.html clip-path-circle-014.html +== clip-path-circle-015.html clip-path-circle-015.html +== clip-path-circle-016.html clip-path-circle-016.html +== clip-path-circle-017.html clip-path-circle-017.html +== clip-path-circle-018.html clip-path-circle-018.html +== clip-path-circle-019.html clip-path-circle-019.html +== clip-path-circle-020.html clip-path-circle-020.html + +== clip-path-ellipse-001.html clip-path-ellipse-001.html +== clip-path-ellipse-002.html clip-path-ellipse-002.html +== clip-path-ellipse-003.html clip-path-ellipse-003.html +== clip-path-ellipse-004.html clip-path-ellipse-004.html +== clip-path-ellipse-005.html clip-path-ellipse-005.html +== clip-path-ellipse-006.html clip-path-ellipse-006.html +== clip-path-ellipse-007.html clip-path-ellipse-007.html +== clip-path-ellipse-008.html clip-path-ellipse-008.html 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 000000000..fbc0f37f7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/reftest.list @@ -0,0 +1,58 @@ +# These tests verify that CSS clip-path behaves properly. +# e.g. clip-path: polygon(nonzero, 3px 3px, 20% 20%) + +default-preferences pref(layout.css.clip-path-shapes.enabled,true) + +# 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 +== clip-path-polygon-013.html clip-path-stripes-003-ref.html + +== clip-path-circle-001.html clip-path-circle-001-ref.html +== clip-path-circle-002.html clip-path-circle-001-ref.html +== clip-path-circle-003.html clip-path-circle-001-ref.html +== clip-path-circle-004.html clip-path-circle-001-ref.html +== clip-path-circle-005.html clip-path-circle-002-ref.html +== clip-path-circle-006.html clip-path-circle-001-ref.html +== clip-path-circle-007.html clip-path-circle-002-ref.html +== clip-path-circle-008.html clip-path-circle-002-ref.html +== clip-path-circle-009.html clip-path-circle-003-ref.html +== clip-path-circle-010.html clip-path-circle-004-ref.html +== clip-path-circle-011.html clip-path-circle-005-ref.html +== clip-path-circle-012.html clip-path-circle-006-ref.html +== clip-path-circle-013.html clip-path-circle-002-ref.html +== clip-path-circle-014.html clip-path-circle-007-ref.html +== clip-path-circle-015.html clip-path-circle-008-ref.html +== clip-path-circle-016.html clip-path-circle-009-ref.html +== clip-path-circle-017.html clip-path-circle-007-ref.html +== clip-path-circle-018.html clip-path-circle-010-ref.html +== clip-path-circle-019.html clip-path-circle-002-ref.html +== clip-path-circle-020.html clip-path-circle-002-ref.html + +== clip-path-ellipse-001.html clip-path-ellipse-001-ref.html +== clip-path-ellipse-002.html clip-path-ellipse-001-ref.html +== clip-path-ellipse-003.html clip-path-ellipse-001-ref.html +== clip-path-ellipse-004.html clip-path-ellipse-001-ref.html +== clip-path-ellipse-005.html clip-path-ellipse-001-ref.html +== clip-path-ellipse-006.html clip-path-ellipse-001-ref.html +== clip-path-ellipse-007.html clip-path-ellipse-001-ref.html +== 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(64,146) == clip-path-inset-002a.html clip-path-inset-002-ref.html +fuzzy(64,146) == clip-path-inset-002b.html clip-path-inset-002-ref.html +fuzzy(64,146) == clip-path-inset-002c.html clip-path-inset-002-ref.html +fuzzy(64,340) == clip-path-inset-003.html clip-path-inset-003-ref.html
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml new file mode 100644 index 000000000..7751e5f1f --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="position:absolute; top:0; left:0; clip-path: url(clipPath-html-01.xhtml#c1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-01.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-01.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg new file mode 100644 index 000000000..182b04217 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg @@ -0,0 +1,8 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="250" y="0" width="250" height="500" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml new file mode 100644 index 000000000..d1f513505 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0.5" y="0" width="0.5" height="1"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml new file mode 100644 index 000000000..433d5d471 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(clipPath-html-02.xhtml#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-02.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-02.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg new file mode 100644 index 000000000..83065a0cd --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="500" height="200" fill="lime"/> + <rect x="0" y="200" width="500" height="120" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml new file mode 100644 index 000000000..8429e71c7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0" y="0" width="1" height="0.8"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml new file mode 100644 index 000000000..fb0d8e87c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(clipPath-html-03.xhtml#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-03.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-03.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg new file mode 100644 index 000000000..19cf5eb16 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="100" height="150" fill="lime"/> + <rect x="100" y="0" width="100" height="200" fill="lime"/> + <rect x="100" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml new file mode 100644 index 000000000..eb6a1edbc --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="100" height="150"/> + <svg:rect x="100" y="0" width="100" height="300"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml new file mode 100644 index 000000000..4f35f255b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(clipPath-html-04.xhtml#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-04.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-04.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml new file mode 100644 index 000000000..640997d4d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0; line-height:100px;"> + <span style="display:inline-block; width:200px;" + /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span><br/> + <span style="display:inline-block; width:50px;" + /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml new file mode 100644 index 000000000..a516f1ff1 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1"> + <svg:rect x="50" y="0" width="200" height="200"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml new file mode 100644 index 000000000..6d4e7c897 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(clipPath-html-05.xhtml#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-05.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-05.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml new file mode 100644 index 000000000..f6e7d26ec --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0; line-height:100px;"> + <span style="display:inline-block; width:200px;" + /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span><br/> + <span style="display:inline-block; width:30px;" + /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml new file mode 100644 index 000000000..15a3be6b6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0.1" y="0" width="0.8" height="1"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml new file mode 100644 index 000000000..339bc629a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:10px; } +</style> +</head> +<body style="margin:0"> + <span style="clip-path: url(clipPath-html-06.xhtml#c1);"> + <span class="unit" style="background:lime;"></span> + <div style="height:200px; width:100px;"/> + <span class="unit" style="background:lime;"></span> + </span> + <svg:svg height="0" style="display: block"> + <!-- use an empty g to force clipPath-html-06.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-06.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml new file mode 100644 index 000000000..747f8105e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:50px; height:10px; } +</style> +</head> +<body style="margin:0"> + <span> + <span class="unit"></span> + <div style="height:200px;"/> + <span class="unit" style="background:lime;"></span> + </span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml new file mode 100644 index 000000000..8008d576e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:10px; } +</style> +</head> +<body style="margin:0"> + <span style="clip-path: url(#c1);"> + <span class="unit" style="background:lime;"></span> + <div style="height:200px; width:100px;"/> + <span class="unit" style="background:lime;"></span> + </span> + + <svg:svg height="0" style="display: block"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0" y="0.5" width="0.5" height="0.5"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg new file mode 100644 index 000000000..4d7153968 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="100" y="100" width="100" height="100" fill="black"/>
+ <rect x="150" y="150" width="50" height="50" fill="yellow"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml new file mode 100644 index 000000000..8391ad01e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml @@ -0,0 +1,31 @@ +<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+ <head>
+ <title>Test clip-path on outer-<svg> with border</title>
+ <style>
+
+html, body {
+ border: 0; margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="200" height="200" clip-path="url(#cp)"
+ style="border: solid 100px black; margin: 50px;">
+
+ <clipPath id="cp">
+ <path d="M50,50 150,50 150,150 50,150 z"/>
+ </clipPath>
+
+ <rect width="100%" height="100%" fill="yellow"/>
+
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml new file mode 100644 index 000000000..3eb0dfa3c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml @@ -0,0 +1,26 @@ +<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+ <head>
+ <title>Test clip-path on <div> with border</title>
+ <style>
+
+html, body {
+ border: 0; margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div style="clip-path: url(#cp); width: 200px; height: 200px; background: yellow; border: solid 100px black; margin: 50px;"></div>
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <clipPath id="cp">
+ <path d="M50,50 150,50 150,150 50,150 z"/>
+ </clipPath>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml new file mode 100644 index 000000000..4f9894154 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:250px; height:250px; background:lime;"></div> + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0.5" y="0" width="0.5" height="1"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml new file mode 100644 index 000000000..e1569f1f6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG clipPath clipping of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 1px; + top: 1px; + width: 3px; + height: 3px; + transform: scale(100,100); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" + style="display:block; position:absolute;"> + <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </clipPath> + <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.50" fill="white"/> + </clipPath> + <circle cx="150" cy="150" r="147" fill="red"/> + </svg> + + <div style="background: red; clip-path: url(#cp1);"/> + <div style="background: lime; clip-path: url(#cp2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml new file mode 100644 index 000000000..a36782231 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG clipPath clipping of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 50px; + top: 50px; + width: 150px; + height: 150px; + transform: scale(2,2); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" + style="display:block; position:absolute;"> + <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </clipPath> + <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.50" fill="white"/> + </clipPath> + <circle cx="200" cy="200" r="147" fill="red"/> + </svg> + + <div style="background: red; clip-path: url(#cp1);"/> + <div style="background: lime; clip-path: url(#cp2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml new file mode 100644 index 000000000..f28425ee0 --- /dev/null +++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style> +</head> +<body> + +<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg systemLanguage="x"><svg:rect width="100%" height="100%" fill="red"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml new file mode 100644 index 000000000..e60477f11 --- /dev/null +++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> + <title>Test that using elements from conditional-failing outer 'svg' elements works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style> +</head> +<body> + +<svg:svg requiredExtensions="x"><svg:rect id="r" width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg><svg:use xlink:href="#r"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml new file mode 100644 index 000000000..213f713a5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').setAttribute('requiredExtensions', 'x')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg id="a"><svg:rect width="100%" height="100%" fill="red"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml new file mode 100644 index 000000000..a2087c5da --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').removeAttribute('requiredExtensions')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg> +<svg:svg id="a" requiredExtensions="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml new file mode 100644 index 000000000..f042469e3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').setAttribute('systemLanguage', 'x')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg id="a" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient"><svg:rect width="100%" height="100%" fill="red"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml new file mode 100644 index 000000000..f82f3d510 --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg> +<svg:svg id="a" requiredFeatures="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml new file mode 100644 index 000000000..cb6a72388 --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(filter-html-01.xhtml#f1)"/> + <svg:svg height="0"> + <!-- use an empty g to force filter-html-01.xhtml to load before onload --> + <svg:use xlink:href="filter-html-01.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/filter-html-01-ref.svg b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg new file mode 100644 index 000000000..ecc3d4f9d --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <filter id="f1"> + <feFlood flood-color="black" result="black"/> + <feComposite in="SourceAlpha" operator="in"/> + <feOffset dx="10" dy="10"/> + <feComposite in="SourceGraphic"/> + </filter> + <rect x="50" y="50" width="200" height="200" fill="lime" filter="url(#f1)"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/filter-html-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-01.xhtml new file mode 100644 index 000000000..8e048cb1a --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-01.xhtml @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(#f1)"/> + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:filter id="f1"> + <svg:feFlood flood-color="black" result="black"/> + <svg:feComposite in="SourceAlpha" operator="in"/> + <svg:feOffset dx="10" dy="10"/> + <svg:feComposite in="SourceGraphic"/> + </svg:filter> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml new file mode 100644 index 000000000..b84d4e9d7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2"> +<body style="margin:0"> + <div style="background:lime; width:100px; height:100px; margin:25px; filter:url(#f1)"/> + <svg:svg height="0"> + <svg:filter id="f1"> + <svg:feFlood flood-color="black" result="black"/> + <svg:feComposite in="SourceAlpha" operator="in"/> + <svg:feOffset dx="5" dy="5"/> + <svg:feComposite in="SourceGraphic"/> + </svg:filter> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml new file mode 100644 index 000000000..95d1a2458 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml @@ -0,0 +1,14 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 50px; + height: 100px; + background-color: rgba(0,0,255,0.5); + } +</style> +</head> +<body> + <div/> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml new file mode 100644 index 000000000..d845463e0 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml @@ -0,0 +1,20 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + mask: url(#m1); + background-color: blue; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:mask id="m1" style="mask-type:alpha"> + <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff" fill-opacity="0.5"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml new file mode 100644 index 000000000..fc05430db --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml @@ -0,0 +1,21 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + opacity: 0.5; + mask:url(#m1); + background-color: blue; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:mask id="m1" style="mask-type:alpha"> + <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml new file mode 100644 index 000000000..e59812267 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml @@ -0,0 +1,21 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + clip-path: url(#c1); + background-color: blue; + opacity: 0.5; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="50" height="100"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml new file mode 100644 index 000000000..e59812267 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml @@ -0,0 +1,21 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + clip-path: url(#c1); + background-color: blue; + opacity: 0.5; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="50" height="100"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml new file mode 100644 index 000000000..83356f933 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml @@ -0,0 +1,25 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + clip-path: url(#c1); + mask:url(#m1); + background-color: blue; + opacity: 0.5; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:mask id="m1" style="mask-type:alpha"> + <svg:rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + </svg:mask> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="50" height="100"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml new file mode 100644 index 000000000..fba9fc4b0 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="mask: url(mask-html-01.xhtml#m1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- use an empty g to force mask-html-01.xhtml to load before onload --> + <svg:use xlink:href="mask-html-01.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml new file mode 100644 index 000000000..1fc3ecf08 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="mask: url(mask-html-01-resource.svg#m1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- use an empty g to force mask-html-01-resource.svg to load before onload --> + <svg:use xlink:href="mask-html-01-resource.svg#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-ref.svg b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg new file mode 100644 index 000000000..5afbf8f0c --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="500" height="500" style="mask: url(#m1); fill: lime;"/> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-color="white" stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> + </mask> +</svg> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-resource.svg b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg new file mode 100644 index 000000000..5522555f8 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg @@ -0,0 +1,33 @@ +<?xml-stylesheet + type="text/css" + href="data:text/css,circle { fill: white }" ?> +<!-- test for javascript: execution: shouldn't happen --> +<?xml-stylesheet + type="text/css" + href="javascript:'circle { fill: black }'" ?> +<svg height="0" xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + /* XXXbz this should really be an external reference to mask-html-01.xhtml + but there's the little problem of "fill" not using nsReferencedElement + yet, so that's broken */ + /* Test that media queries work on resource documents while we're here */ + @media (min-resolution: 1dpi) { + rect { fill: url(#g); } + } + </style> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <g id="empty" /> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-color="white" stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="black"/> + <rect x="0.5" y="0" width="0.5" height="1" fill="black"/> + </mask> + <script type="application/ecmascript"> + // Make sure scripts don't run + document.getElementById("m1").textContent = ""; + </script> +</svg> diff --git a/layout/reftests/svg/svg-integration/mask-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01.xhtml new file mode 100644 index 000000000..77c3b5c9c --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01.xhtml @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="mask: url(#m1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <svg:stop stop-color="white" offset="0"/> + <svg:stop stop-color="white" stop-opacity="0" offset="1"/> + </svg:linearGradient> + <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-xbl-bound-01.html b/layout/reftests/svg/svg-integration/mask-html-xbl-bound-01.html new file mode 100644 index 000000000..5a20fe505 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-xbl-bound-01.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=587585 --> +<!DOCTYPE html> +<title>Test mask reference in binding for mask in bound document with external binding</title> + +<body style="margin:0"> + <div style="-moz-binding: url(mask-html-xbl-bound-01.xbl#lime);"></div> + + <svg height="0"> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-color="white" stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> + </mask> + </svg> +</body> diff --git a/layout/reftests/svg/svg-integration/mask-html-xbl-bound-01.xbl b/layout/reftests/svg/svg-integration/mask-html-xbl-bound-01.xbl new file mode 100644 index 000000000..070059538 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-xbl-bound-01.xbl @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<bindings xmlns="http://www.mozilla.org/xbl"> + <binding id="lime"> + <content> + <div xmlns="http://www.w3.org/1999/xhtml" + style="mask: url(mask-html-xbl-bound-01.html#m1); + width:500px; height:500px; background:lime;"></div> + </content> + </binding> +</bindings> diff --git a/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml new file mode 100644 index 000000000..bc89dfa72 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2"> +<body style="margin:0"> + <div style="mask: url(#m1); width:250px; height:250px; background:lime;"></div> + <svg:svg height="0"> + <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <svg:stop stop-color="white" offset="0"/> + <svg:stop stop-color="white" stop-opacity="0" offset="1"/> + </svg:linearGradient> + <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml new file mode 100644 index 000000000..1e1a2ed55 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG masking of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 1px; + top: 1px; + width: 3px; + height: 3px; + transform: scale(100,100); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" + style="display:block; position:absolute;"> + <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.5" fill="white"/> + </mask> + <circle cx="150" cy="150" r="147" fill="red"/> + </svg> + + <div style="background: red; mask: url(#mask1);"/> + <div style="background: lime; mask: url(#mask2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml new file mode 100644 index 000000000..c83f5a3ea --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG masking of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 50px; + top: 50px; + width: 150px; + height: 150px; + transform: scale(2,2); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" + style="display:block; position:absolute;"> + <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.50" fill="white"/> + </mask> + <circle cx="200" cy="200" r="147" fill="red"/> + </svg> + + <div style="background: red; mask: url(#mask1);"/> + <div style="background: lime; mask: url(#mask2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml new file mode 100644 index 000000000..66291d3bf --- /dev/null +++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG patterning under transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +svg { + display: block; + position: absolute; +} + +.scaled { + left: 1px; + top: 1px; + width: 3px; + height: 3px; + transform: scale(100,100); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + <circle cx="151" cy="151" r="148" fill="red"/> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="scaled"> + <pattern id="redDot" width="1" height="1"> + <circle cx="1.5" cy="1.5" r="1.48" fill="red"/> + </pattern> + <pattern id="limeDot" width="1" height="1"> + <circle cx="1.5" cy="1.5" r="1.5" fill="lime"/> + </pattern> + <rect width="100%" height="100%" fill="url(#redDot)"/> + <rect width="100%" height="100%" fill="url(#limeDot)"/> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml new file mode 100644 index 000000000..f9182b272 --- /dev/null +++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG patterning under transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +svg { + display: block; + position: absolute; +} + +.scaled { + left: 50px; + top: 50px; + width: 150px; + height: 150px; + transform: scale(2,2); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"> + <circle cx="200" cy="200" r="147" fill="red"/> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="scaled"> + <pattern id="redDot" width="1" height="1"> + <circle cx="75" cy="75" r="74" fill="red"/> + </pattern> + <pattern id="limeDot" width="1" height="1"> + <circle cx="75" cy="75" r="75" fill="lime"/> + </pattern> + <rect width="100%" height="100%" fill="url(#redDot)"/> + <rect width="100%" height="100%" fill="url(#limeDot)"/> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/reftest-stylo.list b/layout/reftests/svg/svg-integration/reftest-stylo.list new file mode 100644 index 000000000..a157f501b --- /dev/null +++ b/layout/reftests/svg/svg-integration/reftest-stylo.list @@ -0,0 +1,49 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# clip-path tests +include clip-path/reftest-stylo.list + +== clipPath-html-01.xhtml clipPath-html-01.xhtml +== clipPath-html-01-extref.xhtml clipPath-html-01-extref.xhtml +== clipPath-html-02.xhtml clipPath-html-02.xhtml +== clipPath-html-02-extref.xhtml clipPath-html-02-extref.xhtml +== clipPath-html-03.xhtml clipPath-html-03.xhtml +== clipPath-html-03-extref.xhtml clipPath-html-03-extref.xhtml +== clipPath-html-04.xhtml clipPath-html-04.xhtml +== clipPath-html-04-extref.xhtml clipPath-html-04-extref.xhtml +fails fuzzy-if(true,140,70) == clipPath-html-05.xhtml clipPath-html-05.xhtml +# Bug 776089 +fails fuzzy-if(true,140,70) == clipPath-html-05-extref.xhtml clipPath-html-05-extref.xhtml +# Bug 776089 +fuzzy-if(Android,255,30) == clipPath-html-06.xhtml clipPath-html-06.xhtml +fuzzy-if(Android,255,30) == clipPath-html-06-extref.xhtml clipPath-html-06-extref.xhtml +== clipPath-html-07.xhtml clipPath-html-07.xhtml +== clipPath-html-08.xhtml clipPath-html-08.xhtml +# reuse 07-ref.svg +== clipPath-html-zoomed-01.xhtml clipPath-html-zoomed-01.xhtml +== clipPath-transformed-html-01.xhtml clipPath-transformed-html-01.xhtml +== clipPath-transformed-html-02.xhtml clipPath-transformed-html-02.xhtml +== conditions-outer-svg-01.xhtml conditions-outer-svg-01.xhtml +== conditions-outer-svg-02.xhtml conditions-outer-svg-02.xhtml +== dynamic-conditions-outer-svg-01.xhtml dynamic-conditions-outer-svg-01.xhtml +== dynamic-conditions-outer-svg-02.xhtml dynamic-conditions-outer-svg-02.xhtml +== dynamic-conditions-outer-svg-03.xhtml dynamic-conditions-outer-svg-03.xhtml +== dynamic-conditions-outer-svg-04.xhtml dynamic-conditions-outer-svg-04.xhtml +== filter-html-01.xhtml filter-html-01.xhtml +random-if(B2G||Mulet||Android) == filter-html-01-extref.xhtml filter-html-01-extref.xhtml +# Bug 1063987 +# Initial mulet triage: parity with B2G/B2G Desktop +# Android: bug 1198380 +== filter-html-zoomed-01.xhtml filter-html-zoomed-01.xhtml +== mask-html-01.xhtml mask-html-01.xhtml +== mask-html-01-extref-01.xhtml mask-html-01-extref-01.xhtml +random == mask-html-01-extref-02.xhtml mask-html-01-extref-02.xhtml +# random due to bug 877661 +fuzzy-if(B2G&&browserIsRemote,1,2300) == mask-html-zoomed-01.xhtml mask-html-zoomed-01.xhtml +# Skil XBL test case on B2G +skip-if(B2G||Mulet) == mask-html-xbl-bound-01.html mask-html-xbl-bound-01.html +# Initial mulet triage: parity with B2G/B2G Desktop +== mask-transformed-html-01.xhtml mask-transformed-html-01.xhtml +== mask-transformed-html-02.xhtml mask-transformed-html-02.xhtml +== patterned-svg-under-transformed-html-01.xhtml patterned-svg-under-transformed-html-01.xhtml +== patterned-svg-under-transformed-html-02.xhtml patterned-svg-under-transformed-html-02.xhtml + diff --git a/layout/reftests/svg/svg-integration/reftest.list b/layout/reftests/svg/svg-integration/reftest.list new file mode 100644 index 000000000..6d7b76b75 --- /dev/null +++ b/layout/reftests/svg/svg-integration/reftest.list @@ -0,0 +1,44 @@ +# clip-path tests +include clip-path/reftest.list + +== clipPath-html-01.xhtml clipPath-html-01-ref.svg +== clipPath-html-01-extref.xhtml clipPath-html-01-ref.svg +== clipPath-html-02.xhtml clipPath-html-02-ref.svg +== clipPath-html-02-extref.xhtml clipPath-html-02-ref.svg +== clipPath-html-03.xhtml clipPath-html-03-ref.svg +== clipPath-html-03-extref.xhtml clipPath-html-03-ref.svg +== clipPath-html-04.xhtml clipPath-html-04-ref.xhtml +== clipPath-html-04-extref.xhtml clipPath-html-04-ref.xhtml +fuzzy-if(true,140,70) == clipPath-html-05.xhtml clipPath-html-05-ref.xhtml # Bug 776089 +fuzzy-if(true,140,70) == clipPath-html-05-extref.xhtml clipPath-html-05-ref.xhtml # Bug 776089 +fuzzy-if(Android,255,30) == clipPath-html-06.xhtml clipPath-html-06-ref.xhtml +fuzzy-if(Android,255,30) == clipPath-html-06-extref.xhtml clipPath-html-06-ref.xhtml +== clipPath-html-07.xhtml clipPath-html-07-ref.svg +== clipPath-html-08.xhtml clipPath-html-07-ref.svg # reuse 07-ref.svg +== clipPath-html-zoomed-01.xhtml clipPath-html-01-ref.svg +== clipPath-transformed-html-01.xhtml ../pass.svg +== clipPath-transformed-html-02.xhtml ../pass.svg +== conditions-outer-svg-01.xhtml ../pass.svg +== conditions-outer-svg-02.xhtml ../pass.svg +== dynamic-conditions-outer-svg-01.xhtml ../pass.svg +== dynamic-conditions-outer-svg-02.xhtml ../pass.svg +== dynamic-conditions-outer-svg-03.xhtml ../pass.svg +== dynamic-conditions-outer-svg-04.xhtml ../pass.svg +== filter-html-01.xhtml filter-html-01-ref.svg +random-if(Android) == filter-html-01-extref.xhtml filter-html-01-ref.svg # Android: bug 1198380 +== filter-html-zoomed-01.xhtml filter-html-01-ref.svg +== mask-html-01.xhtml mask-html-01-ref.svg +== mask-html-01-extref-01.xhtml mask-html-01-ref.svg +random == mask-html-01-extref-02.xhtml mask-html-01-ref.svg # random due to bug 877661 +== mask-html-zoomed-01.xhtml mask-html-01-ref.svg +== mask-html-xbl-bound-01.html mask-html-01-ref.svg +== mask-transformed-html-01.xhtml ../pass.svg +== mask-transformed-html-02.xhtml ../pass.svg +fuzzy-if(skiaContent,1,5) == patterned-svg-under-transformed-html-01.xhtml ../pass.svg +== patterned-svg-under-transformed-html-02.xhtml ../pass.svg + +fuzzy(1,5000) == mask-clipPath-opacity-01a.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(1,5000) == mask-clipPath-opacity-01b.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(1,5000) == mask-clipPath-opacity-01c.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(1,5000) == mask-clipPath-opacity-01d.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(1,5000) == mask-clipPath-opacity-01e.xhtml mask-clipPath-opacity-01-ref.xhtml |
