[OT-PW] Implement DrawPattern

xidachen · chromium-wpt-export-bot · commit 424c4b83cbbe · 2019-08-06T21:12:03.000-04:00
Right now when we use CSS paint to paint the background-image, and have background-repeat specified, our implementation cannot handle that because PaintWorkletDeferredImage doesn't implement DrawPattern. Currently the code path goes into the GeneratedImage::DrawPattern and that cannot handle the off-thread case. This CL implements DrawPattern for off-thread paint worklet, and two layout tests are passing with it. Another layout test is added for additional testing. Bug: 957457 Change-Id: I707b4d8e47a6bcd747156e60f1860c1ecdae22e0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1691090 Reviewed-by: Khushal <khushalsagar@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Kentaro Hara <haraken@chromium.org> Reviewed-by: Stephen Chenney <schenney@chromium.org> Commit-Queue: Xida Chen <xidachen@chromium.org> Cr-Commit-Position: refs/heads/master@{#684594}
diff --git a/css/css-paint-api/background-repeat-x-ref.html b/css/css-paint-api/background-repeat-x-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="canvas" width="200" height="200"></canvas>
+<script>
+var ctx = document.getElementById('canvas').getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(0, 0, 50, 50);
+ctx.fillRect(100, 0, 50, 50);
+</script>
+</body>
+</html>
diff --git a/css/css-paint-api/background-repeat-x.https.html b/css/css-paint-api/background-repeat-x.https.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
+<link rel="match" href="background-repeat-x-ref.html">
+<style>
+.container {
+  width: 200px;
+  height: 200px;
+}
+#foo {
+  background: paint(foo) top left/50% 50% repeat-x;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<body>
+<div id="foo" class="container"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('foo', class {
+    paint(ctx, geom) {
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, 50, 50);
+    }
+});
+</script>
+
+<script>
+    importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
+</script>
+</body>
+</html>
