mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1075457, part 2 - Implement circle() and ellipse() for the |clip-path| property. r=mstange, r=jwatt
This commit is contained in:
Dirk Schulze
parent
a6e76ae846
commit
d884a54dd4
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -16,4 +16,34 @@ default-preferences pref(layout.css.clip-path-shapes.enabled,true)
|
||||
== 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-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
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
#include "gfx2DGlue.h"
|
||||
#include "gfxPlatform.h"
|
||||
#include "mozilla/gfx/2D.h"
|
||||
#include "mozilla/gfx/PathHelpers.h"
|
||||
#include "nsCSSRendering.h"
|
||||
#include "nsIFrame.h"
|
||||
#include "nsRenderingContext.h"
|
||||
#include "nsRuleNode.h"
|
||||
@ -92,10 +94,12 @@ nsCSSClipPathInstance::CreateClipPath(DrawTarget* aDrawTarget)
|
||||
|
||||
nsStyleBasicShape* basicShape = mClipPathStyle.GetBasicShape();
|
||||
switch (basicShape->GetShapeType()) {
|
||||
case nsStyleBasicShape::Type::eCircle:
|
||||
return CreateClipPathCircle(aDrawTarget, r);
|
||||
case nsStyleBasicShape::Type::eEllipse:
|
||||
return CreateClipPathEllipse(aDrawTarget, r);
|
||||
case nsStyleBasicShape::Type::ePolygon:
|
||||
return CreateClipPathPolygon(aDrawTarget, r);
|
||||
case nsStyleBasicShape::Type::eCircle:
|
||||
case nsStyleBasicShape::Type::eEllipse:
|
||||
case nsStyleBasicShape::Type::eInset:
|
||||
// XXXkrit support all basic shapes
|
||||
break;
|
||||
@ -107,6 +111,108 @@ nsCSSClipPathInstance::CreateClipPath(DrawTarget* aDrawTarget)
|
||||
return builder->Finish();
|
||||
}
|
||||
|
||||
static void
|
||||
EnumerationToLength(nscoord& aCoord, int32_t aType,
|
||||
nscoord aCenter, nscoord aPosMin, nscoord aPosMax)
|
||||
{
|
||||
nscoord dist1 = abs(aPosMin - aCenter);
|
||||
nscoord dist2 = abs(aPosMax - aCenter);
|
||||
switch (aType) {
|
||||
case NS_RADIUS_FARTHEST_SIDE:
|
||||
aCoord = dist1 > dist2 ? dist1 : dist2;
|
||||
break;
|
||||
case NS_RADIUS_CLOSEST_SIDE:
|
||||
aCoord = dist1 > dist2 ? dist2 : dist1;
|
||||
break;
|
||||
default:
|
||||
NS_NOTREACHED("unknown keyword");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
already_AddRefed<Path>
|
||||
nsCSSClipPathInstance::CreateClipPathCircle(DrawTarget* aDrawTarget,
|
||||
const nsRect& aRefBox)
|
||||
{
|
||||
nsStyleBasicShape* basicShape = mClipPathStyle.GetBasicShape();
|
||||
|
||||
RefPtr<PathBuilder> builder = aDrawTarget->CreatePathBuilder();
|
||||
|
||||
nsPoint topLeft, anchor;
|
||||
nsSize size = nsSize(aRefBox.width, aRefBox.height);
|
||||
nsImageRenderer::ComputeObjectAnchorPoint(basicShape->GetPosition(),
|
||||
size, size,
|
||||
&topLeft, &anchor);
|
||||
Point center = Point(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
|
||||
|
||||
const nsTArray<nsStyleCoord>& coords = basicShape->Coordinates();
|
||||
MOZ_ASSERT(coords.Length() == 1, "wrong number of arguments");
|
||||
float referenceLength = sqrt((aRefBox.width * aRefBox.width +
|
||||
aRefBox.height * aRefBox.height) / 2.0);
|
||||
nscoord r = 0;
|
||||
if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
|
||||
nscoord horizontal, vertical;
|
||||
EnumerationToLength(horizontal, coords[0].GetIntValue(),
|
||||
center.x, aRefBox.x, aRefBox.x + aRefBox.width);
|
||||
EnumerationToLength(vertical, coords[0].GetIntValue(),
|
||||
center.y, aRefBox.y, aRefBox.y + aRefBox.height);
|
||||
if (coords[0].GetIntValue() == NS_RADIUS_FARTHEST_SIDE) {
|
||||
r = horizontal > vertical ? horizontal : vertical;
|
||||
} else {
|
||||
r = horizontal < vertical ? horizontal : vertical;
|
||||
}
|
||||
} else {
|
||||
r = nsRuleNode::ComputeCoordPercentCalc(coords[0], referenceLength);
|
||||
}
|
||||
|
||||
nscoord appUnitsPerDevPixel =
|
||||
mTargetFrame->PresContext()->AppUnitsPerDevPixel();
|
||||
builder->Arc(center / appUnitsPerDevPixel, r / appUnitsPerDevPixel,
|
||||
0, Float(2 * M_PI));
|
||||
builder->Close();
|
||||
return builder->Finish();
|
||||
}
|
||||
|
||||
already_AddRefed<Path>
|
||||
nsCSSClipPathInstance::CreateClipPathEllipse(DrawTarget* aDrawTarget,
|
||||
const nsRect& aRefBox)
|
||||
{
|
||||
nsStyleBasicShape* basicShape = mClipPathStyle.GetBasicShape();
|
||||
|
||||
RefPtr<PathBuilder> builder = aDrawTarget->CreatePathBuilder();
|
||||
|
||||
nsPoint topLeft, anchor;
|
||||
nsSize size = nsSize(aRefBox.width, aRefBox.height);
|
||||
nsImageRenderer::ComputeObjectAnchorPoint(basicShape->GetPosition(),
|
||||
size, size,
|
||||
&topLeft, &anchor);
|
||||
Point center = Point(anchor.x + aRefBox.x, anchor.y + aRefBox.y);
|
||||
|
||||
const nsTArray<nsStyleCoord>& coords = basicShape->Coordinates();
|
||||
MOZ_ASSERT(coords.Length() == 2, "wrong number of arguments");
|
||||
nscoord rx = 0, ry = 0;
|
||||
if (coords[0].GetUnit() == eStyleUnit_Enumerated) {
|
||||
EnumerationToLength(rx, coords[0].GetIntValue(),
|
||||
center.x, aRefBox.x, aRefBox.x + aRefBox.width);
|
||||
} else {
|
||||
rx = nsRuleNode::ComputeCoordPercentCalc(coords[0], aRefBox.width);
|
||||
}
|
||||
if (coords[1].GetUnit() == eStyleUnit_Enumerated) {
|
||||
EnumerationToLength(ry, coords[1].GetIntValue(),
|
||||
center.y, aRefBox.y, aRefBox.y + aRefBox.height);
|
||||
} else {
|
||||
ry = nsRuleNode::ComputeCoordPercentCalc(coords[1], aRefBox.height);
|
||||
}
|
||||
|
||||
nscoord appUnitsPerDevPixel =
|
||||
mTargetFrame->PresContext()->AppUnitsPerDevPixel();
|
||||
EllipseToBezier(builder.get(),
|
||||
center / appUnitsPerDevPixel,
|
||||
Size(rx, ry) / appUnitsPerDevPixel);
|
||||
builder->Close();
|
||||
return builder->Finish();
|
||||
}
|
||||
|
||||
already_AddRefed<Path>
|
||||
nsCSSClipPathInstance::CreateClipPathPolygon(DrawTarget* aDrawTarget,
|
||||
const nsRect& aRefBox)
|
||||
|
||||
@ -36,6 +36,12 @@ private:
|
||||
|
||||
already_AddRefed<Path> CreateClipPath(DrawTarget* aDrawTarget);
|
||||
|
||||
already_AddRefed<Path> CreateClipPathCircle(DrawTarget* aDrawTarget,
|
||||
const nsRect& aRefBox);
|
||||
|
||||
already_AddRefed<Path> CreateClipPathEllipse(DrawTarget* aDrawTarget,
|
||||
const nsRect& aRefBox);
|
||||
|
||||
already_AddRefed<Path> CreateClipPathPolygon(DrawTarget* aDrawTarget,
|
||||
const nsRect& aRefBox);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user