Update web-platform-tests to revision 256b4685b8e702c14ed854347f23f4979edbfc8e

tests/wpt/web-platform-tests/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);

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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();
     }

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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');

tests/wpt/web-platform-tests/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);
     }
 });
 

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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);
     }
 });
 

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-composite.https.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-filter-ref.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-filter.https.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-gradient-ref.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-gradient.https.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-paths-ref.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-paths.https.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-shadows-ref.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-shadows.https.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-transform-ref.html

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

tests/wpt/web-platform-tests/css/css-paint-api/paint2d-transform.https.html

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

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/css/css-paint-api/parse-input-arguments-018-ref.html

@@ -1,12 +1,11 @@
 <!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");

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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);
           }
         });`
 

tests/wpt/web-platform-tests/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);
       }
     });`
 

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>

tests/wpt/web-platform-tests/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>