Use the same variable names in offscreen and element 2d.composite tests

The canvas element 2d.composite WPT tests are naming auxiliary canvases
"canvas2", whereas the offscreen equivalent tests are naming them
"offscreenCanvas2". Updating the offscreen tests to use the same name as
the element tests will allow a follow-up CL to merge the two
implementations to use a common shared test body.

Bug: 40207206
Change-Id: Ib0c7335d41c9d77d1aca95b19518d4a8d0a877dd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6192522
Commit-Queue: Jean-Philippe Gravel <[email protected]>
Reviewed-by: Andres Ricardo Perez <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1411816}

html/canvas/offscreen/compositing/2d.composite.canvas.clear.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.clear</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'clear';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.clear.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'clear';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.copy.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.copy</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'copy';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 255,255,0,191, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.copy.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'copy';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 255,255,0,191, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.destination-atop.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.destination-atop</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-atop';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 128,255,128,191, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.destination-atop.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-atop';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 128,255,128,191, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.destination-in.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.destination-in</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-in';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 0,255,255,96, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.destination-in.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-in';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 0,255,255,96, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.destination-out.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.destination-out</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-out';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 0,255,255,32, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.destination-out.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-out';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 0,255,255,32, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.destination-over.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.destination-over</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-over';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 109,255,146,223, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.destination-over.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'destination-over';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 109,255,146,223, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.lighter.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.lighter</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'lighter';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 191,255,128,255, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.lighter.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'lighter';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 191,255,128,255, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.source-atop.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.source-atop</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-atop';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.source-atop.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-atop';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.source-in.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.source-in</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-in';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.source-in.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-in';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.source-out.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.source-out</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-out';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.source-out.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-out';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.source-over.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.source-over</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-over';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 219,255,36,223, 5);
 
 }, "");

html/canvas/offscreen/compositing/2d.composite.canvas.source-over.worker.js

@@ -13,13 +13,13 @@ promise_test(async t => {
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'source-over';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 219,255,36,223, 5);
 }, "");
 done();

html/canvas/offscreen/compositing/2d.composite.canvas.xor.html

@@ -19,13 +19,13 @@ <h1>2d.composite.canvas.xor</h1>
   ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
   ctx.fillRect(0, 0, 100, 50);
   ctx.globalCompositeOperation = 'xor';
-  const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
-  const ctx2 = offscreenCanvas2.getContext('2d');
+  const canvas2 = new OffscreenCanvas(canvas.width, canvas.height);
+  const ctx2 = canvas2.getContext('2d');
   const response = await fetch('/images/yellow75.png')
   const blob = await response.blob();
   const bitmap = await createImageBitmap(blob);
   ctx2.drawImage(bitmap, 0, 0);
-  ctx.drawImage(offscreenCanvas2, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
   _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
 
 }, "");