Add Performance tests for willReadFrequently Feature

Adding performance tests that serve to measure how much performance improvements can be obtained by the addition of willReadFrequently option. Test cases include multiple draws and multiple getImageData calls. The canvas-getImageData-smooth.html is corrected and shows that the discrepancy between cpu and gpu rendering does exist. Bug: 1090180 Change-Id: I8701f4389d8f0c9a26498d35b874453512e4669f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2231808 Reviewed-by: Juanmi Huertas <juanmihd@chromium.org> Reviewed-by: Fernando Serboncini <fserb@chromium.org> Commit-Queue: Teresa Kang <teresakang@google.com> Cr-Commit-Position: refs/heads/master@{#776577}
Denger-Network · Jun 9, 2020 · f7cf80b · f7cf80b
1 parent 0d1ea14
commit f7cf80b
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 0 deletions.
diff --git a/third_party/blink/perf_tests/canvas/repeated-draw-cpu.html b/third_party/blink/perf_tests/canvas/repeated-draw-cpu.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="../resources/runner.js"></script>
+<script>
+
+const canvas2D = document.createElement("canvas");
+var ctx2D = canvas2D.getContext("2d", { willReadFrequently: true });
+
+function setSize(width, height) {
+  canvas2D.width = width;
+  canvas2D.height = height;
+}
+
+function fillCanvas(ctx2d) {
+  ctx2d.fillStyle = "green";
+  ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
+}
+
+function repeatedDrawAndGetImageDataFromCanvas2D() {
+  for (let i = 0; i < 10; ++i)
+    fillCanvas(ctx2D);
+  ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
+}
+
+setSize(1024, 1024);
+
+PerfTestRunner.measureRunsPerSecond({
+  run: repeatedDrawAndGetImageDataFromCanvas2D,
+  description: "This bench test checks the speed on repeated draw and" +
+  " getImageData once from Canvas2D(1024x1024) if rendered by CPU."
+});
+
+</script>
+</body>
+</html>
diff --git a/third_party/blink/perf_tests/canvas/repeated-draw-gpu.html b/third_party/blink/perf_tests/canvas/repeated-draw-gpu.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="../resources/runner.js"></script>
+<script>
+
+const canvas2D = document.createElement("canvas");
+var ctx2D = canvas2D.getContext("2d", { willReadFrequently: false });
+
+function setSize(width, height) {
+  canvas2D.width = width;
+  canvas2D.height = height;
+}
+
+function fillCanvas(ctx2d) {
+  ctx2d.fillStyle = "green";
+  ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
+}
+
+function repeatedDrawAndGetImageDataFromCanvas2D() {
+  for (let i = 0; i < 10; ++i)
+    fillCanvas(ctx2D);
+  ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
+}
+
+setSize(1024, 1024);
+
+PerfTestRunner.measureRunsPerSecond({
+  run: repeatedDrawAndGetImageDataFromCanvas2D,
+  description: "This bench test checks the speed on repeated draw and" +
+  " getImageData once from Canvas2D(1024x1024) if rendered by GPU."
+});
+
+</script>
+</body>
+</html>
diff --git a/third_party/blink/perf_tests/canvas/repeated-getImageData-cpu.html b/third_party/blink/perf_tests/canvas/repeated-getImageData-cpu.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="../resources/runner.js"></script>
+<script>
+
+const canvas2D = document.createElement("canvas");
+var ctx2D = canvas2D.getContext("2d", { willReadFrequently: true });
+
+function setSize(width, height) {
+  canvas2D.width = width;
+  canvas2D.height = height;
+}
+
+function fillCanvas(ctx2d) {
+  ctx2d.fillStyle = "green";
+  ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
+}
+
+function drawAndRepeatedGetImageDataFromCanvas2D() {
+  fillCanvas(ctx2D);
+  for (let i = 0; i < 10; ++i)
+    ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
+}
+
+setSize(1024, 1024);
+
+PerfTestRunner.measureRunsPerSecond({
+  run: drawAndRepeatedGetImageDataFromCanvas2D,
+  description: "This bench test checks the speed on a draw operation followed" +
+  " by repeatedly calling getImageData from Canvas2D(1024x1024) if rendered" +
+  " by CPU."
+});
+
+</script>
+</body>
+</html>
diff --git a/third_party/blink/perf_tests/canvas/repeated-getImageData-gpu.html b/third_party/blink/perf_tests/canvas/repeated-getImageData-gpu.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="../resources/runner.js"></script>
+<script>
+
+const canvas2D = document.createElement("canvas");
+var ctx2D = canvas2D.getContext("2d", { willReadFrequently: false });
+
+function setSize(width, height) {
+  canvas2D.width = width;
+  canvas2D.height = height;
+}
+
+function fillCanvas(ctx2d) {
+  ctx2d.fillStyle = "green";
+  ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
+}
+
+function drawAndRepeatedGetImageDataFromCanvas2D() {
+  fillCanvas(ctx2D);
+  for (let i = 0; i < 10; ++i)
+    ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
+}
+
+setSize(1024, 1024);
+
+PerfTestRunner.measureRunsPerSecond({
+  run: drawAndRepeatedGetImageDataFromCanvas2D,
+  description: "This bench test checks the speed on a draw operation followed" +
+  " by repeatedly calling getImageData from Canvas2D(1024x1024) if rendered" +
+  " by GPU."
+});
+
+</script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
@@ -6752,3 +6752,5 @@ crbug.com/1091843 fast/canvas/color-space/canvas-createImageBitmap-p3.html [ Pas
 
 # Sheriff 2020-06-09
 crbug.com/1092813 [ Retina ] virtual/text-antialias/emoticons.html [ Pass Failure ]
+
+crbug.com/1090180 virtual/gpu/fast/canvas/canvas-gpu-consistency.html [ Failure ]
diff --git a/third_party/blink/web_tests/fast/canvas/canvas-gpu-consistency-expected.html b/third_party/blink/web_tests/fast/canvas/canvas-gpu-consistency-expected.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<canvas id="canvas" width="300" height="300"></canvas>
+<script>
+// Testing that getImageData does NOT unaccelerate the canvas
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d', { willReadFrequently: false });
+
+var img = document.createElement('IMG');
+img.onload = function () {
+  ctx.drawImage(img, 0, 0, 300, 300);
+}
+
+// This src image correspond to a gradient white line
+img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQ" +
+"AAAAGklEQVQYlWNgYGD4j4z/////H12MYVQRUYoAkYZrlWt0UekAAAAASUVORK5CYII=";
+
+</script>
diff --git a/third_party/blink/web_tests/fast/canvas/canvas-gpu-consistency.html b/third_party/blink/web_tests/fast/canvas/canvas-gpu-consistency.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<canvas id="canvas" width="300" height="300"></canvas>
+<script>
+// Testing that getImageData does NOT unaccelerate the canvas
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d', { willReadFrequently: false });
+
+var img = document.createElement('IMG');
+img.onload = function () {
+  ctx.getImageData(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0, 300, 300);
+}
+
+// This src image correspond to a gradient white line
+img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQ" +
+"AAAAGklEQVQYlWNgYGD4j4z/////H12MYVQRUYoAkYZrlWt0UekAAAAASUVORK5CYII=";
+
+</script>