Implement convertToBlob() in OffscreenCanvas

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

Index: third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main.html
diff --git a/third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main.html b/third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main.html
new file mode 100644
index 0000000000000000000000000000000000000000..e49266c42292709f5789a58295364d82bc36d97a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/idleToBlob/OffscreenCanvas-convertToBlob-2d-main.html
@@ -0,0 +1,68 @@
+<img id="png"/>
+<img id="jpeg-high"/>
+<img id="jpeg-low"/>
+<img id="webp-high"/>
+<img id="webp-low"/>
+<script type="text/javascript">
+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 offCanvas = new OffscreenCanvas(50, 50);
+var offctx = offCanvas.getContext('2d');
+offctx.fillStyle = "red";
+offctx.fillRect(0, 0, 25, 25);
+offctx.fillStyle = "green";
+offctx.fillRect(25, 0, 25, 25);
+offctx.fillStyle = "blue";
+offctx.fillRect(0, 25, 25, 25);
+offctx.fillStyle = "black";
+offctx.fillRect(25, 25, 25, 25);
+offctx.strokeStyle = "yellow";
+offctx.strokeRect(0, 0, 50, 50);
+
+offCanvas.convertToBlob()
+  .then(function(blob) { 
+    pngImage.src = URL.createObjectURL(blob);
+  });
+
+offCanvas.convertToBlob({type: "image/jpeg"})
+  .then(function(blob) {
+    jpegImageHigh.src = URL.createObjectURL(blob);
+  });
+
+offCanvas.convertToBlob({type: "image/jpeg", quality: 0.2})
+  .then(function(blob) {
+    jpegImageLow.src = URL.createObjectURL(blob);
+  });
+
+offCanvas.convertToBlob({type: "image/webp"})
+  .then(function(blob) { 
+    webpImageHigh.src = URL.createObjectURL(blob);
+  });
+
+offCanvas.convertToBlob({type: "image/webp", quality: 0.2})
+  .then(function(blob) {
+    webpImageLow.src = URL.createObjectURL(blob);
+  });
+
+</script>
+