[OT-PW] Make it work with OOP-R

This CL makes off-thread paint worklet work with OOP-R. OOP-R serialize
an PaintOp and stores the serialized buffer in a shared memory. GPU
then reads the memory and de-serialize it.

For off-thread paint worklet, we are producing a DrawImageRectOp. Note
that this DrawImageRectOp is different than a normal one. It is a
DrawImageRectOp that contains a DrawRecord that contains multiple
PaintOps in it. So this CL adds a special code path to serialize it,
for paint worklet DrawImageRectOp only. The way to serialize it is to
iterate over all the PaintOps inside the DrawRecord. In this way, we
do not need to change anything on the GPU de-serialize code.

We also changed the layout tests. We changed some tests, now using
fillRect instead of strokeRect.
The problem with strokeRect is that using GPU rasterization could
easily result in subpixel difference on different platforms. Using
fillRect will avoid that.

Bug: 1020238
Change-Id: Ie0aadfe217e462547cc16a273d09ec8a64f055a0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1957012Reviewed-by: Yi Gu <yigu@chromium.org>
Reviewed-by: Khushal <khushalsagar@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#725554}

cc/paint/paint_op_buffer_serializer.cc

@@ -274,25 +274,59 @@ void PaintOpBufferSerializer::SerializeBuffer(
     if (skip_op)
       continue;
 
-    if (op->GetType() != PaintOpType::DrawRecord) {
-      bool success = false;
-      if (op->IsPaintOpWithFlags()) {
-        success = SerializeOpWithFlags(static_cast<const PaintOpWithFlags*>(op),
-                                       &options, params, iter.alpha());
-      } else {
-        success = SerializeOp(op, options, params);
-      }
+    if (op->GetType() == PaintOpType::DrawRecord) {
+      int save_count = text_blob_canvas_.getSaveCount();
+      Save(options, params);
+      SerializeBuffer(static_cast<const DrawRecordOp*>(op)->record.get(),
+                      nullptr);
+      RestoreToCount(save_count, options, params);
+      continue;
+    }
 
+    if (op->GetType() == PaintOpType::DrawImageRect &&
+        static_cast<const DrawImageRectOp*>(op)->image.IsPaintWorklet()) {
+      DCHECK(options.image_provider);
+      const DrawImageRectOp* draw_op = static_cast<const DrawImageRectOp*>(op);
+      ImageProvider::ScopedResult result =
+          options.image_provider->GetRasterContent(DrawImage(draw_op->image));
+      if (!result || !result.paint_record())
+        continue;
+
+      int save_count = text_blob_canvas_.getSaveCount();
+      Save(options, params);
+      // The following ops are copying the canvas's ops from
+      // DrawImageRectOp::RasterWithFlags.
+      SkMatrix trans = SkMatrix::MakeRectToRect(draw_op->src, draw_op->dst,
+                                                SkMatrix::kFill_ScaleToFit);
+      ConcatOp concat_op(trans);
+      bool success = SerializeOp(&concat_op, options, params);
+      if (!success)
+        return;
+      ClipRectOp clip_rect_op(draw_op->src, SkClipOp::kIntersect, false);
+      success = SerializeOp(&clip_rect_op, options, params);
+      if (!success)
+        return;
+      SaveLayerOp save_layer_op(&draw_op->src, options.flags_to_serialize);
+      success = SerializeOpWithFlags(&save_layer_op, &options, params, 255);
       if (!success)
         return;
+
+      SerializeBuffer(result.paint_record(), nullptr);
+      RestoreToCount(save_count, options, params);
+
       continue;
     }
 
-    int save_count = text_blob_canvas_.getSaveCount();
-    Save(options, params);
-    SerializeBuffer(static_cast<const DrawRecordOp*>(op)->record.get(),
-                    nullptr);
-    RestoreToCount(save_count, options, params);
+    bool success = false;
+    if (op->IsPaintOpWithFlags()) {
+      success = SerializeOpWithFlags(static_cast<const PaintOpWithFlags*>(op),
+                                     &options, params, iter.alpha());
+    } else {
+      success = SerializeOp(op, options, params);
+    }
+
+    if (!success)
+      return;
   }
 }
 

cc/paint/paint_op_writer.cc

@@ -363,9 +363,17 @@ sk_sp<PaintShader> PaintOpWriter::TransformShaderIfNecessary(
   const auto& ctm = options_.canvas->getTotalMatrix();
 
   if (type == PaintShader::Type::kImage) {
-    return original->CreateDecodedImage(ctm, quality, options_.image_provider,
-                                        paint_image_transfer_cache_entry_id,
-                                        &quality, paint_image_needs_mips);
+    if (!original->paint_image().IsPaintWorklet()) {
+      return original->CreateDecodedImage(ctm, quality, options_.image_provider,
+                                          paint_image_transfer_cache_entry_id,
+                                          &quality, paint_image_needs_mips);
+    }
+    sk_sp<PaintShader> record_shader =
+        original->CreatePaintWorkletRecord(options_.image_provider);
+    if (!record_shader)
+      return nullptr;
+    return record_shader->CreateScaledPaintRecord(
+        ctm, options_.max_texture_size, paint_record_post_scale);
   }
 
   if (type == PaintShader::Type::kPaintRecord) {

cc/paint/paint_shader.cc

@@ -339,6 +339,21 @@ sk_sp<PaintShader> PaintShader::CreateScaledPaintRecord(
   return shader;
 }
 
+sk_sp<PaintShader> PaintShader::CreatePaintWorkletRecord(
+    ImageProvider* image_provider) const {
+  DCHECK_EQ(shader_type_, Type::kImage);
+  DCHECK(image_ && image_.IsPaintWorklet());
+
+  ImageProvider::ScopedResult result =
+      image_provider->GetRasterContent(DrawImage(image_));
+  if (!result || !result.paint_record())
+    return nullptr;
+  SkMatrix local_matrix = GetLocalMatrix();
+  return PaintShader::MakePaintRecord(
+      sk_ref_sp<PaintRecord>(result.paint_record()), tile_, tx_, ty_,
+      &local_matrix);
+}
+
 sk_sp<PaintShader> PaintShader::CreateDecodedImage(
     const SkMatrix& ctm,
     SkFilterQuality quality,

cc/paint/paint_shader.h

@@ -205,6 +205,10 @@ class CC_PAINT_EXPORT PaintShader : public SkRefCnt {
                                         SkFilterQuality* raster_quality,
                                         bool* needs_mips) const;
 
+  // Creates a paint record shader for worklet-backed images.
+  sk_sp<PaintShader> CreatePaintWorkletRecord(
+      ImageProvider* image_provider) const;
+
   void SetColorsAndPositions(const SkColor* colors,
                              const SkScalar* positions,
                              int count);

third_party/blink/web_tests/TestExpectations

@@ -3778,6 +3778,7 @@ crbug.com/626703 [ Debug ] virtual/cross-origin-isolation/external/wpt/html/cros
 
 # Failure due to on-going off-thread paint worklet project.
 crbug.com/957457 virtual/off-main-thread-css-paint/external/wpt/css/css-paint-api/invalid-image-pending-script.https.html [ Crash ]
+crbug.com/1034807 [ Mac ] virtual/off-main-thread-css-paint/external/wpt/css/css-paint-api/paint2d-gradient.https.html [ Failure ]
 
 crbug.com/982116 http/tests/devtools/elements/styles-4/styles-new-API.js [ Pass Timeout ]
 

third_party/blink/web_tests/VirtualTestSuites

@@ -40,7 +40,10 @@
     "bases": ["external/wpt/css/css-paint-api",
               "http/tests/csspaint"],
     "args": ["--enable-threaded-compositing",
-             "--enable-blink-features=OffMainThreadCSSPaint"]
+             "--enable-blink-features=OffMainThreadCSSPaint",
+	     "--enable-gpu-rasterization",
+	     "--enable-oop-rasterization",
+	     "--enable-accelerated-2d-canvas"]
   },
   {
     "prefix": "prefer_compositing_to_lcd_text",

third_party/blink/web_tests/external/wpt/css/css-paint-api/background-image-alpha-ref.html

@@ -28,9 +28,8 @@ function drawCanvas(canvasID, hasAlpha) {
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext("2d", {alpha: hasAlpha});
   context.clearRect(0, 0, canvas.width, canvas.height);
-  context.strokeStyle = 'blue';
-  context.lineWidth = 4;
-  context.strokeRect(20, 20, 60, 60);
+  context.fillStyle = 'blue';
+  context.fillRect(20, 20, 60, 60);
 };
 
 drawCanvas('opaque', false);

third_party/blink/web_tests/external/wpt/css/css-paint-api/background-image-alpha.https.html

@@ -33,18 +33,16 @@
 registerPaint('opaque', class {
     static get contextOptions() { return {alpha: false}; }
     paint(ctx, geom) {
-        ctx.strokeStyle = 'blue';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(20, 20, 60, 60);
+        ctx.fillStyle = 'blue';
+        ctx.fillRect(20, 20, 60, 60);
     }
 });
 
 registerPaint('nonOpaque', class {
     static get contextOptions() { return {alpha: true}; }
     paint(ctx, geom) {
-        ctx.strokeStyle = 'blue';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(20, 20, 60, 60);
+        ctx.fillStyle = 'blue';
+        ctx.fillRect(20, 20, 60, 60);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-001-ref.html

@@ -8,9 +8,8 @@ html, body { margin: 0; padding: 0; }
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 100, 100);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 100, 100);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-001.https.html

@@ -21,9 +21,8 @@ html, body { margin: 0; padding: 0; }
 <script id="code" type="text/worklet">
 registerPaint('geometry', class {
     paint(ctx, geom) {
-        ctx.strokeStyle = 'green';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-002-ref.html

@@ -8,9 +8,8 @@ html, body { margin: 0; padding: 0; }
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 200, 200);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 200, 200);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-002.https.html

@@ -21,9 +21,8 @@ html, body { margin: 0; padding: 0; }
 <script id="code" type="text/worklet">
 registerPaint('geometry', class {
     paint(ctx, geom) {
-        ctx.strokeStyle = 'green';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-tiled-001.https.html

@@ -23,7 +23,6 @@ html, body { margin: 0; padding: 0; }
 registerPaint('geometry', class {
     paint(ctx, geom) {
         ctx.fillStyle = 'green';
-        ctx.beginPath();
         ctx.rect(0, 0, geom.width, geom.height);
         ctx.fill();
     }

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-tiled-002-ref.html

@@ -8,9 +8,8 @@ html, body { margin: 0; padding: 0; }
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 50, 20);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 50, 20);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-tiled-002.https.html

@@ -22,9 +22,8 @@ html, body { margin: 0; padding: 0; }
 <script id="code" type="text/worklet">
 registerPaint('geometry', class {
     paint(ctx, geom) {
-        ctx.strokeStyle = 'green';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-tiled-003-ref.html

@@ -8,9 +8,8 @@ html, body { margin: 0; padding: 0; }
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 60, 80);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 60, 80);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-background-image-tiled-003.https.html

@@ -22,9 +22,8 @@ html, body { margin: 0; padding: 0; }
 <script id="code" type="text/worklet">
 registerPaint('geometry', class {
     paint(ctx, geom) {
-        ctx.strokeStyle = 'green';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-001-ref.html

@@ -15,9 +15,8 @@ var context = canvas.getContext("2d");
 // So in this ref test, we create a 200*200 canvas. We draw to a 220*220 area
 // and scale it to fit the 200*200 canvas.
 context.scale(200/220, 200/220);
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 220, 220);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 220, 220);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-001.https.html

@@ -24,11 +24,10 @@ html, body { margin: 0; padding: 0; }
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (geom.width == 220 && geom.height == 220)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-002-ref.html

@@ -8,9 +8,8 @@ html, body { margin: 0; padding: 0; }
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 90, 90);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 90, 90);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-002.https.html

@@ -24,11 +24,10 @@ html, body { margin: 0; padding: 0; }
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (geom.width == 90 && geom.height == 90)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-003-ref.html

@@ -8,9 +8,8 @@ html, body { margin: 0; padding: 0; }
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 80, 120);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 80, 120);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-003.https.html

@@ -24,11 +24,10 @@ html, body { margin: 0; padding: 0; }
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (geom.width == 80 && geom.height == 120)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-004-ref.html

@@ -15,9 +15,8 @@ var context = canvas.getContext("2d");
 // In this ref html, we draw to a 140*140 area, but scale it to fit the 120*120
 // canvas.
 context.scale(120/140, 120/140);
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 140, 140);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 140, 140);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/geometry-border-image-004.https.html

@@ -24,11 +24,10 @@ html, body { margin: 0; padding: 0; }
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (geom.width == 140 && geom.height == 140)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/non-registered-property-value.https.html

@@ -23,9 +23,8 @@ registerPaint('geometry', class {
   static get inputProperties() { return ['--foo']; }
   paint(ctx, geom, properties) {
     let fooValue = parseFloat(properties.get('--foo').toString());
-    ctx.strokeStyle = 'green';
-    ctx.lineWidth = 4;
-    ctx.strokeRect(0, 0, fooValue, fooValue);
+    ctx.fillStyle = 'green';
+    ctx.fillRect(0, 0, fooValue, fooValue);
   }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint-arguments-ref.html

@@ -28,9 +28,8 @@ function drawCanvas(canvasID, color) {
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext("2d", {alpha: true});
   context.clearRect(0, 0, canvas.width, canvas.height);
-  context.strokeStyle = color;
-  context.lineWidth = 4;
-  context.strokeRect(20, 20, 60, 60);
+  context.fillStyle = color;
+  context.fillRect(20, 20, 60, 60);
 };
 
 drawCanvas('box-green', 'green');

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint-arguments.https.html

@@ -35,9 +35,8 @@ registerPaint('box', class {
     static get contextOptions() { return {alpha: true}; }
     static get inputArguments() { return ['<color>']; }
     paint(ctx, geom, properties, args) {
-        ctx.strokeStyle = args[0].toString();
-        ctx.lineWidth = 4;
-        ctx.strokeRect(20, 20, 60, 60);
+        ctx.fillStyle = args[0].toString();
+        ctx.fillRect(20, 20, 60, 60);
     }
 });
 

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint-function-arguments-ref.html

@@ -28,13 +28,12 @@ function drawCanvas(canvasID, color, width) {
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext("2d", {alpha: true});
   context.clearRect(0, 0, canvas.width, canvas.height);
-  context.strokeStyle = color;
-  context.lineWidth = width;
-  context.strokeRect(40, 40, 120, 120);
+  context.fillStyle = color;
+  context.fillRect(40, 40, width, width);
 };
 
-drawCanvas('box-1', 'rgb(50, 100, 150)', '5px');
-drawCanvas('box-2', 'rgb(150, 100, 50)', '10px');
+drawCanvas('box-1', 'rgb(50, 100, 150)', '50px');
+drawCanvas('box-2', 'rgb(150, 100, 50)', '100px');
 
 </script>
 </body>

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint-function-arguments.https.html

@@ -9,11 +9,11 @@
 }
 
 #canvas-box-1 {
-  background-image: paint(box, rgb(50, 100, 150), 5px);
+  background-image: paint(box, rgb(50, 100, 150), 50px);
 }
 
 #canvas-box-2 {
-  background-image: paint(box, rgb(150, 100, 50), 10px);
+  background-image: paint(box, rgb(150, 100, 50), 100px);
 }
 
 #background {
@@ -35,9 +35,9 @@ registerPaint('box', class {
     static get contextOptions() { return {alpha: true}; }
     static get inputArguments() { return ['<color>', '<length>']; }
     paint(ctx, geom, properties, args) {
-        ctx.strokeStyle = args[0].toString();
-        ctx.lineWidth = args[1].toString();
-        ctx.strokeRect(40, 40, 120, 120);
+        ctx.fillStyle = args[0].toString();
+        let size = args[1].toString();
+        ctx.fillRect(40, 40, size, size);
     }
 });
 

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-composite.https.html

@@ -72,3 +72,4 @@ for (var i = 0; i < compositeOps.length; i++) {
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-filter-ref.html

@@ -58,3 +58,4 @@ paint('output14', "url(#url)");
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-filter.https.html

@@ -105,3 +105,4 @@ for (var i = 0; i < filterOps.length; i++) {
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-gradient-ref.html

@@ -22,3 +22,4 @@ ctx.fillRect(100, 0, 100, 100);
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-gradient.https.html

@@ -39,3 +39,4 @@ registerPaint('gradients', class {
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-paths-ref.html

@@ -30,3 +30,4 @@ ctx.fill('evenodd');
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-paths.https.html

@@ -47,3 +47,4 @@ registerPaint('paths', class {
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-shadows-ref.html

@@ -21,3 +21,4 @@ ctx.fillRect(110, 10, 50, 50);
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-shadows.https.html

@@ -38,3 +38,4 @@ registerPaint('shadows', class {
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-transform-ref.html

@@ -20,3 +20,4 @@ ctx.fillRect(0, 0, 50, 50);
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/paint2d-transform.https.html

@@ -37,3 +37,4 @@ registerPaint('transform', class {
 </script>
 </body>
 </html>
+

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-001.https.html

@@ -33,11 +33,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-002.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-003.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-004.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-005.https.html

@@ -31,11 +31,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-006.https.html

@@ -30,11 +30,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-007.https.html

@@ -33,11 +33,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-008.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-009.https.html

@@ -32,11 +32,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-010.https.html

@@ -32,11 +32,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-011.https.html

@@ -30,11 +30,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-012.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-013.https.html

@@ -29,11 +29,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-014.https.html

@@ -31,11 +31,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-015.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-016.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-017.https.html

@@ -32,11 +32,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-018-ref.html

 <!DOCTYPE html>
 <html>
 <body>
-<p>This test result should show a rect with black border, where the rect is
-filled with green on the lower right corner. The registerPaint('failureIndicator')
+<p>This test result should show a green rect. The registerPaint('failureIndicator')
 will be called twice and the inputArguments will return two different strings,
 which will throw an exception and the paint function with 'failureIndicator'
 should never be called. In other words, there should be no red painted in the result.</p>
-<canvas id ="canvas" width="100" height="100" style="border:1px solid black"></canvas>
+<canvas id ="canvas" width="100" height="100"></canvas>
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-018.https.html

@@ -9,15 +9,13 @@
 }
 
 #canvas-geometry {
-    border:1px solid black;
     background-image: paint(failureIndicator), paint(geometry);
 }
 </style>
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/worklet-reftest.js"></script>
 <body>
-<p>This test result should show a rect with black border, where the rect is
-filled with green on the lower right corner. The registerPaint('failureIndicator')
+<p>This test result should show a green rect. The registerPaint('failureIndicator')
 will be called twice and the inputArguments will return two different strings,
 which will throw an exception and the paint function with 'failureIndicator'
 should never be called. In other words, there should be no red painted in the result.</p>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-019.https.html

@@ -32,11 +32,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-020.https.html

@@ -31,11 +31,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-021.https.html

@@ -34,11 +34,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-022.https.html

@@ -32,11 +32,10 @@ try {
 registerPaint('geometry', class {
     paint(ctx, geom) {
         if (testsPassed)
-            ctx.strokeStyle = 'green';
+            ctx.fillStyle = 'green';
         else
-            ctx.strokeStyle = 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/parse-input-arguments-ref.html

@@ -5,9 +5,8 @@
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 100, 100);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 100, 100);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/registered-property-invalidation-001.https.html

@@ -18,9 +18,8 @@
 registerPaint('geometry', class {
   static get inputProperties() { return ['--color']; }
   paint(ctx, geom, styleMap) {
-    ctx.strokeStyle = styleMap.get('--color').toString();
-    ctx.lineWidth = 4;
-    ctx.strokeRect(0, 0, geom.width, geom.height);
+    ctx.fillStyle = styleMap.get('--color').toString();
+    ctx.fillRect(0, 0, geom.width, geom.height);
   }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/registered-property-invalidation-002.https.html

@@ -21,9 +21,8 @@ registerPaint('geometry', class {
   paint(ctx, geom, styleMap) {
     let value = styleMap.get('--length');
     let pass = value.value === 100 && value.unit === 'px';
-    ctx.strokeStyle = pass ? 'green' : 'red';
-    ctx.lineWidth = 4;
-    ctx.strokeRect(0, 0, geom.width, geom.height);
+    ctx.fillStyle = pass ? 'green' : 'red';
+    ctx.fillRect(0, 0, geom.width, geom.height);
   }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/registered-property-stylemap.https.html

@@ -41,9 +41,8 @@
             pass &= Array.from(styleMap).filter(e => e[0] == '--prop')[0][1].length == 4;
             pass &= Array.from(styleMap).filter(e => e[0] == '--prop')[0][1].every(isExpected);
 
-            ctx.strokeStyle = pass ? 'green' : 'red';
-            ctx.lineWidth = 4;
-            ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = pass ? 'green' : 'red';
+            ctx.fillRect(0, 0, geom.width, geom.height);
           }
         });`
 

third_party/blink/web_tests/external/wpt/css/css-paint-api/resources/utils.js

@@ -44,9 +44,8 @@ function expectWorkletValues(target, expected) {
         let serialize = (v) => '[' + v.constructor.name + ' ' + v.toString() + ']';
         let actual = expectedKeys.map(k => styleMap.getAll(k).map(serialize).join(', ')).join(' | ');
         let expected = expectedKeys.map(k => expectedData[k].join(', ')).join(' | ');
-        ctx.strokeStyle = (actual === expected) ? 'green' : 'red';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+        ctx.fillStyle = (actual === expected) ? 'green' : 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
       }
     });`
 

third_party/blink/web_tests/external/wpt/css/css-paint-api/style-background-image-ref.html

@@ -5,9 +5,8 @@
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext("2d");
-context.strokeStyle = 'green';
-context.lineWidth = 4;
-context.strokeRect(0, 0, 100, 100);
+context.fillStyle = 'green';
+context.fillRect(0, 0, 100, 100);
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-paint-api/style-background-image.https.html

@@ -41,17 +41,16 @@ registerPaint('geometry', class {
                 serialized = properties[i].toString() + ': [null]';
             serializedStrings.push(serialized);
         }
-        ctx.strokeStyle = 'green';
+        ctx.fillStyle = 'green';
         if (serializedStrings[0] != "--bar: [CSSUnparsedValue=]")
-            ctx.strokeStyle = 'red';
+            ctx.fillStyle = 'red';
         if (serializedStrings[1] != "--foo: [CSSUnparsedValue= bar]")
-            ctx.strokeStyle = 'blue';
+            ctx.fillStyle = 'blue';
         if (serializedStrings[2] != "empty-cells: [CSSKeywordValue=show]")
-            ctx.strokeStyle = 'yellow';
+            ctx.fillStyle = 'yellow';
         if (serializedStrings[3] != "margin-left: [CSSUnitValue=2px]")
-            ctx.strokeStyle = 'cyan';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'cyan';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/style-before-pseudo-ref.html

@@ -25,9 +25,8 @@ canvas{
 document.addEventListener('DOMContentLoaded', function() {
     var canvas = document.querySelector('canvas');
     var context = canvas.getContext("2d");
-    context.strokeStyle = 'green';
-    context.lineWidth = 4;
-    context.strokeRect(0, 0, 30, 10);
+    context.fillStyle = 'green';
+    context.fillRect(0, 0, 30, 10);
 });
 </script>
 </body>

third_party/blink/web_tests/external/wpt/css/css-paint-api/style-before-pseudo.https.html

@@ -45,15 +45,14 @@ registerPaint('geometry', class {
                 serialized = properties[i].toString() + ': [null]';
             serializedStrings.push(serialized);
         }
-        ctx.strokeStyle = 'green';
+        ctx.fillStyle = 'green';
         if (serializedStrings[0] != "--bar: [CSSUnparsedValue=]")
-            ctx.strokeStyle = 'red';
+            ctx.fillStyle = 'red';
         if (serializedStrings[1] != "--foo: [CSSUnparsedValue= bar]")
-            ctx.strokeStyle = 'blue';
+            ctx.fillStyle = 'blue';
         if (serializedStrings[2] != "margin-left: [CSSUnitValue=2px]")
-            ctx.strokeStyle = 'yellow';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'yellow';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/external/wpt/css/css-paint-api/style-first-letter-pseudo-ref.html

@@ -22,9 +22,8 @@ canvas{
 document.addEventListener('DOMContentLoaded', function() {
     var canvas = document.querySelector('canvas');
     var context = canvas.getContext("2d");
-    context.strokeStyle = 'green';
-    context.lineWidth = 4;
-    context.strokeRect(0, 0, 10, 10);
+    context.fillStyle = 'green';
+    context.fillRect(0, 0, 10, 10);
 });
 </script>
 </body>

third_party/blink/web_tests/external/wpt/css/css-paint-api/style-first-letter-pseudo.https.html

@@ -41,13 +41,12 @@ registerPaint('geometry', class {
                 serialized = properties[i].toString() + ': [null]';
             serializedStrings.push(serialized);
         }
-        ctx.strokeStyle = 'green';
+        ctx.fillStyle = 'green';
         if (serializedStrings[0] != "color: [CSSStyleValue=rgb(255, 0, 0)]")
-            ctx.strokeStyle = 'red';
+            ctx.fillStyle = 'red';
         if (serializedStrings[1] != "line-height: [CSSUnitValue=2px]")
-            ctx.strokeStyle = 'blue';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(0, 0, geom.width, geom.height);
+            ctx.fillStyle = 'blue';
+        ctx.fillRect(0, 0, geom.width, geom.height);
     }
 });
 </script>

third_party/blink/web_tests/http/tests/csspaint/paint2d-zoom-expected.html

@@ -11,9 +11,8 @@ html, body { margin: 0; padding: 0; }
 var canvas = document.getElementById('output');
 var ctx = canvas.getContext('2d');
 ctx.rotate(10 * Math.PI / 180);
-ctx.strokeStyle = 'blue';
-ctx.lineWidth = 12;
-ctx.strokeRect(90, 30, 90, 90);
+ctx.fillStyle = 'blue';
+ctx.fillRect(90, 30, 90, 90);
 </script>
 </body>
 </html>

third_party/blink/web_tests/http/tests/csspaint/paint2d-zoom.html

@@ -16,9 +16,8 @@ html, body { margin: 0; padding: 0; }
 registerPaint('worklet', class {
     paint(ctx, geom) {
          ctx.rotate(10 * Math.PI / 180);
-         ctx.strokeStyle = 'blue';
-         ctx.lineWidth = 4;
-         ctx.strokeRect(30, 10, 30, 30);
+         ctx.fillStyle = 'blue';
+         ctx.fillRect(30, 10, 30, 30);
     }
 });
 </script>