Index: third_party/WebKit/LayoutTests/csspaint/paint2d-paths.html |
diff --git a/third_party/WebKit/LayoutTests/csspaint/paint2d-paths.html b/third_party/WebKit/LayoutTests/csspaint/paint2d-paths.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..13d12f2b53f7e4996260e2d02a30060cd1585f3e |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/csspaint/paint2d-paths.html |
@@ -0,0 +1,49 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<script src="../resources/run-after-layout-and-paint.js"></script> |
+<script src="resources/test-runner-paint-worklet.js"></script> |
+<style> |
+ #output { |
+ width: 300px; |
+ height: 400px; |
+ background-image: paint(paths); |
+ } |
+</style> |
+</head> |
+<body> |
+<div id="output"></div> |
+ |
+<script id="code" type="text/worklet"> |
+registerPaint('paths', class { |
+ paint(ctx, geom) { |
+ ctx.beginPath(); |
+ ctx.lineWidth = '10'; |
+ ctx.strokeStyle = 'green'; |
+ ctx.moveTo(15, 15); |
+ ctx.lineTo(135, 15); |
+ ctx.lineTo(70, 170); |
+ ctx.closePath(); |
+ ctx.stroke(); |
+ |
+ var path1 = new Path2D(); |
+ path1.moveTo(250, 25); |
+ path1.bezierCurveTo(110, 150, 110, 300, 200, 200); |
+ ctx.strokeStyle = 'purple'; |
+ ctx.setLineDash([ 10, 5 ]); |
+ ctx.stroke(path1); |
+ |
+ ctx.fillStyle = 'red'; |
+ ctx.beginPath() |
+ ctx.arc(75, 325, 50, 0, Math.PI * 2, true); |
+ ctx.arc(75, 325, 20, 0, Math.PI * 2, true); |
+ ctx.fill('evenodd'); |
+ } |
+}); |
+</script> |
+ |
+<script> |
+ importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent); |
+</script> |
+</body> |
+</html> |