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

<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");
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);

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>