blob: e49266c42292709f5789a58295364d82bc36d97a [file] [log] [blame]
<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>