Implement convertToBlob() in OffscreenCanvas

third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main-expected.html

Index: third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main-expected.html
diff --git a/third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main-expected.html b/third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main-expected.html
new file mode 100644
index 0000000000000000000000000000000000000000..db046e1ea87a7ffb1970c3187c5f1c12dd21431f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main-expected.html
@@ -0,0 +1,65 @@
+<img id="png"/>
+<img id="jpeg-high"/>
+<img id="jpeg-low"/>
+<img id="webp-high"/>
+<img id="webp-low"/>
+<script>
+if (window.testRunner) {
+  testRunner.waitUntilDone();
+}
+
+var pngImage = document.getElementById('png');
+var jpegImageHigh = document.getElementById('jpeg-high');
+var jpegImageLow = document.getElementById('jpeg-low');
+var webpImageHigh = document.getElementById('webp-high');
+var webpImageLow = document.getElementById('webp-low');
+var numTestCount = 5;
+function imageLoaded() {
+  numTestCount--;
+  if (numTestCount == 0 && window.testRunner) {
+    window.testRunner.notifyDone();
+  }
+}
+pngImage.addEventListener('load', imageLoaded);
+jpegImageHigh.addEventListener('load', imageLoaded);
+jpegImageLow.addEventListener('load', imageLoaded);
+webpImageHigh.addEventListener('load', imageLoaded);
+webpImageLow.addEventListener('load', imageLoaded);
+
+var canvas = document.createElement("canvas");

[xlai (Olivia), 2016/10/19 18:51:06]

This file is exactly same as
OffscreenCanvas-convertToBlob-2d-worker-expected.html.

They both use canvas.toBlob as a reference image test.

+canvas.width = 50;
+canvas.height = 50;
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = "red";
+ctx.fillRect(0, 0, 25, 25);
+ctx.fillStyle = "green";
+ctx.fillRect(25, 0, 25, 25);
+ctx.fillStyle = "blue";
+ctx.fillRect(0, 25, 25, 25);
+ctx.fillStyle = "black";
+ctx.fillRect(25, 25, 25, 25);
+ctx.strokeStyle = "yellow";
+ctx.strokeRect(0, 0, 50, 50);
+
+canvas.toBlob(function(blob) {
+  pngImage.src = URL.createObjectURL(blob);
+});
+
+canvas.toBlob(function(blob) {
+  jpegImageHigh.src = URL.createObjectURL(blob);
+}, "image/jpeg", 1.0);

[xlai (Olivia), 2016/10/19 18:51:06]

As written in my email, the default quality of jpeg/webp in canvas.toBlob is
different from the default quality in OffscreenCanvas.convertToBlob. Whether or
not this should be changed to ensure consistency between canvas.toBlob and
OffscreenCanvas.convertToBlob is still subject to discussion. For now, I'm
putting the value explicitly to ensure tests run correctly.

+
+canvas.toBlob(function(blob) {
+    jpegImageLow.src = URL.createObjectURL(blob);
+}, "image/jpeg", 0.2)
+
+canvas.toBlob(function(blob) {
+    webpImageHigh.src = URL.createObjectURL(blob);
+}, "image/webp", 1.0);
+
+canvas.toBlob(function(blob) {
+    webpImageLow.src = URL.createObjectURL(blob);
+}, "image/webp", 0.2);
+
+</script>
+