Unify tests in drawing-rectangles-to-the-canvas

Tests in category drawing-rectangles-to-the-canvas for HTMLCanvas
and Offscreencanvas are almost identical. Add tests to the unified
folder.

Changes in the output of HTMLCanvas are due to the different spacing in
tests templates.

Bug: 1275750

Change-Id: Icb9c7865fabd8a41199fdd45f4258ab1f1b5d892
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3393029
Reviewed-by: Juanmi Huertas 
Commit-Queue: Yi Xu 
Cr-Commit-Position: refs/heads/main@{#960170}

Author: yiyix

html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.clip.html

@@ -21,16 +21,12 @@ 2d.clearRect.clip
 
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 50);
-
 ctx.beginPath();
 ctx.rect(0, 0, 16, 16);
 ctx.clip();
-
 ctx.clearRect(0, 0, 100, 50);
-
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 16, 16);
-
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
 

html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.nonfinite.html

@@ -21,7 +21,6 @@ 2d.clearRect.nonfinite
 
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 50);
-
 ctx.clearRect(Infinity, 0, 100, 50);
 ctx.clearRect(-Infinity, 0, 100, 50);
 ctx.clearRect(NaN, 0, 100, 50);
@@ -45,7 +44,6 @@ 2d.clearRect.nonfinite
 ctx.clearRect(0, Infinity, Infinity, Infinity);
 ctx.clearRect(0, Infinity, 100, Infinity);
 ctx.clearRect(0, 0, Infinity, Infinity);
-
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
 

html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.clip.html

@@ -21,17 +21,13 @@ 2d.fillRect.clip
 
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 50);
-
 ctx.beginPath();
 ctx.rect(0, 0, 16, 16);
 ctx.clip();
-
 ctx.fillStyle = '#f00';
 ctx.fillRect(0, 0, 100, 50);
-
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 16, 16);
-
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
 

html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.nonfinite.html

@@ -21,7 +21,6 @@ 2d.fillRect.nonfinite
 
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 50);
-
 ctx.fillStyle = '#f00';
 ctx.fillRect(Infinity, 0, 100, 50);
 ctx.fillRect(-Infinity, 0, 100, 50);
@@ -46,7 +45,6 @@ 2d.fillRect.nonfinite
 ctx.fillRect(0, Infinity, Infinity, Infinity);
 ctx.fillRect(0, Infinity, 100, Infinity);
 ctx.fillRect(0, 0, Infinity, Infinity);
-
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
 

html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.clip.html

@@ -21,18 +21,14 @@ 2d.strokeRect.clip
 
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 50);
-
 ctx.beginPath();
 ctx.rect(0, 0, 16, 16);
 ctx.clip();
-
 ctx.strokeStyle = '#f00';
 ctx.lineWidth = 50;
 ctx.strokeRect(0, 0, 100, 50);
-
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 16, 16);
-
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
 

html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.nonfinite.html

@@ -21,7 +21,6 @@ 2d.strokeRect.nonfinite
 
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 50);
-
 ctx.strokeStyle = '#f00';
 ctx.lineWidth = 150;
 ctx.strokeRect(Infinity, 0, 100, 50);
@@ -47,7 +46,6 @@ 2d.strokeRect.nonfinite
 ctx.strokeRect(0, Infinity, Infinity, Infinity);
 ctx.strokeRect(0, Infinity, 100, Infinity);
 ctx.strokeRect(0, 0, Infinity, Infinity);
-
 _assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
 
 

html/canvas/tools/yaml/element/drawing-rectangles-to-the-canvas.yaml renamed to html/canvas/tools/yaml-new/drawing-rectangles-to-the-canvas.yaml

@@ -96,16 +96,12 @@
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
-
     ctx.beginPath();
     ctx.rect(0, 0, 16, 16);
     ctx.clip();
-
     ctx.clearRect(0, 0, 100, 50);
-
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 16, 16);
-
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
@@ -131,9 +127,7 @@
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
-
     @nonfinite ctx.clearRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
@@ -215,17 +209,13 @@
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
-
     ctx.beginPath();
     ctx.rect(0, 0, 16, 16);
     ctx.clip();
-
     ctx.fillStyle = '#f00';
     ctx.fillRect(0, 0, 100, 50);
-
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 16, 16);
-
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
@@ -251,10 +241,8 @@
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
-
     ctx.fillStyle = '#f00';
     @nonfinite ctx.fillRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
@@ -407,18 +395,14 @@
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
-
     ctx.beginPath();
     ctx.rect(0, 0, 16, 16);
     ctx.clip();
-
     ctx.strokeStyle = '#f00';
     ctx.lineWidth = 50;
     ctx.strokeRect(0, 0, 100, 50);
-
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 16, 16);
-
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
@@ -447,18 +431,18 @@
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
-
     ctx.strokeStyle = '#f00';
     ctx.lineWidth = 150;
     @nonfinite ctx.strokeRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
 - name: 2d.fillStyle.colorObject
   desc: ctx.fillStyle works with color objects
   testing:
   - 2d.fillRect
+  canvasType:
+    ['HTMLCanvas']
   code: |
     ctx.fillStyle = {r: 1, g: 0, b: 0};
     ctx.fillRect(0, 0, 100, 50);
@@ -484,6 +468,8 @@
   desc: ctx.fillStyle with color objects has transparency
   testing:
   - 2d.fillRect
+  canvasType:
+    ['HTMLCanvas']
   code: |
     ctx.fillStyle = {r: 0, g: 1, b: 0, a: 0};
     ctx.fillRect(0, 0, 100, 50);
@@ -506,6 +492,8 @@
   desc: ctx.strokeStyle works with color objects
   testing:
   - 2d.strokeRect
+  canvasType:
+    ['HTMLCanvas']
   code: |
     ctx.lineWidth = 50;
     ctx.strokeStyle = {r: 1, g: 0, b: 0};
@@ -532,6 +520,8 @@
   desc: ctx.strokeStyle with color objects has transparency
   testing:
   - 2d.strokeRect
+  canvasType:
+    ['HTMLCanvas']
   code: |
     ctx.lineWidth = 50;
     ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 0};
@@ -551,4 +541,3 @@
   expected: green
 
 
-