Index: third_party/WebKit/LayoutTests/csspaint/paint2d-gradient.html |
diff --git a/third_party/WebKit/LayoutTests/csspaint/paint2d-gradient.html b/third_party/WebKit/LayoutTests/csspaint/paint2d-gradient.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9887e9232a228e9d686448587adc8dc4ed0c0ef5 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/csspaint/paint2d-gradient.html |
@@ -0,0 +1,41 @@ |
+<!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: 200px; |
+ height: 100px; |
+ background-image: paint(gradients); |
+ } |
+</style> |
+</head> |
+<body> |
+<div id="output"></div> |
+ |
+<script id="code" type="text/worklet"> |
+registerPaint('gradients', class { |
+ paint(ctx, geom) { |
+ var linearGradient = ctx.createLinearGradient(0, 0, 100, 100); |
+ linearGradient.addColorStop(0, 'blue'); |
+ linearGradient.addColorStop(0.5, 'red'); |
+ linearGradient.addColorStop(1, 'white'); |
+ ctx.fillStyle = linearGradient; |
+ ctx.fillRect(0, 0, 100, 100); |
+ |
+ var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50); |
+ radialGradient.addColorStop(0, 'blue'); |
+ radialGradient.addColorStop(0.5, 'red'); |
+ radialGradient.addColorStop(1, 'white'); |
+ ctx.fillStyle = radialGradient; |
+ ctx.fillRect(100, 0, 100, 100); |
+ } |
+}); |
+</script> |
+ |
+<script> |
+ importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent); |
+</script> |
+</body> |
+</html> |