Commit d4c244a3 authored by Reza.Zakerinasab's avatar Reza.Zakerinasab Committed by Commit Bot

Refactor createImageBitmap resize layout tests

This change reduces createImageBitmap resize test tolerance from 10 to 0
for all image sources except for blob (which is set to 5).
It also refactors the tests to include pixelated, low and medium filter
qualities. Furthermore, it separates the test path for premul and unpremul
image bitmap sources when the filter quality is high, to match the way this
is implemented in chromium.

Bug: 744647, 792607
Change-Id: I4e0b8af71d88f5885ff56540a17ec8b716cd58d7
Reviewed-on: https://chromium-review.googlesource.com/809808
Commit-Queue: Mohammad Reza Zakerinasab <zakerinasab@chromium.org>
Reviewed-by: default avatarJustin Novosad <junov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#522204}
parent 7a5ddbe0
<!DOCTYPE html>
<html> <html>
<head>
<script src="./resources/webgl-test-utils-full.js"></script> <script src="./resources/webgl-test-utils-full.js"></script>
<script src="./resources/tex-image-and-sub-image-utils.js"></script> <script src="./resources/tex-image-and-sub-image-utils.js"></script>
<script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script> <script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script>
...@@ -8,92 +6,18 @@ ...@@ -8,92 +6,18 @@
<script src="../../resources/testharnessreport.js"></script> <script src="../../resources/testharnessreport.js"></script>
<body> <body>
<script> <script>
var wtu = WebGLTestUtils;
var tiu = TexImageUtils;
var gl = null;
var internalFormat = "RGBA";
var pixelFormat = "RGBA";
var pixelType = "UNSIGNED_BYTE";
var blob = null; var testOptions = {sourceName: "Blob", sourceIsPremul: true,
var blob2 = null; resizeWidth: 4, resizeHeight: 4};
prepareWebGLContext();
function generateTest()
{
var bitmaps = [];
var canvas = document.createElement('canvas');
canvas.width = 4;
canvas.height = 4;
document.body.appendChild(canvas);
gl = canvas.getContext("webgl");
gl.clearColor(0,0,0,1);
gl.clearDepth(1);
var options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p1 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.defaultOption = imageBitmap });
options.imageOrientation = "none";
options.premultiplyAlpha = "premultiply";
var p2 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.noFlipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p3 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.noFlipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p4 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.noFlipYUnpremul = imageBitmap });
options.imageOrientation = "flipY";
options.premultiplyAlpha = "premultiply";
var p5 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.flipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p6 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.flipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p7 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.flipYUnpremul = imageBitmap });
options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p8 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.colorSpaceDef = imageBitmap });
options.colorSpaceConversion = "none";
var p9 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.colorSpaceNone = imageBitmap });
options.colorSpaceConversion = "default";
var p10 = createImageBitmap(blob, options).then(
function(imageBitmap) { bitmaps.colorSpaceDefault = imageBitmap });
return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9, p10]).then(
t.step_func_done(function() {
var alphaVal = 0.5;
var testPassed = runTest(bitmaps, alphaVal, true);
if (!testPassed)
assert_true(false, 'Test failed');
}), t.step_func_done(function() {
assert_true(false, 'Promise rejected');
}));
}
var t = async_test("createImageBitmap(Blob) with resize and other options");
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("GET", 'resources/red-green-semi-transparent-2x2.png'); xhr.open("GET", 'resources/red-green-semi-transparent-2x2.png');
xhr.responseType = 'blob'; xhr.responseType = 'blob';
xhr.send(); xhr.send();
xhr.onload = t.step_func(function() { xhr.onload = function() {
blob = xhr.response; testOptions.imageSource = xhr.response;
generateTest(); prepareResizedImageBitmapsAndRuntTests(testOptions);
}) };
</script> </script>
</body>
</html>
<!DOCTYPE html>
<html> <html>
<head>
<script src="./resources/webgl-test-utils-full.js"></script> <script src="./resources/webgl-test-utils-full.js"></script>
<script src="./resources/tex-image-and-sub-image-utils.js"></script> <script src="./resources/tex-image-and-sub-image-utils.js"></script>
<script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script> <script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script>
...@@ -8,12 +6,6 @@ ...@@ -8,12 +6,6 @@
<script src="../../resources/testharnessreport.js"></script> <script src="../../resources/testharnessreport.js"></script>
<body> <body>
<script> <script>
var wtu = WebGLTestUtils;
var tiu = TexImageUtils;
var gl = null;
var internalFormat = "RGBA";
var pixelFormat = "RGBA";
var pixelType = "UNSIGNED_BYTE";
function setCanvasToRedGreen(ctx) { function setCanvasToRedGreen(ctx) {
var width = ctx.canvas.width; var width = ctx.canvas.width;
...@@ -30,73 +22,16 @@ function setCanvasToRedGreen(ctx) { ...@@ -30,73 +22,16 @@ function setCanvasToRedGreen(ctx) {
ctx.fillRect(halfWidth, halfHeight, halfWidth, halfHeight); ctx.fillRect(halfWidth, halfHeight, halfWidth, halfHeight);
} }
promise_test(function() { var testCanvas = document.createElement('canvas');
var bitmaps = []; testCanvas.width = 2;
testCanvas.height = 2;
var ctx = testCanvas.getContext("2d");
setCanvasToRedGreen(ctx);
var canvas = document.createElement('canvas'); var testOptions = {sourceName: "HTMLCanvasElement", imageSource: testCanvas,
canvas.width = 4; sourceIsPremul: true, resizeWidth: 4, resizeHeight: 4};
canvas.height = 4;
document.body.appendChild(canvas);
gl = canvas.getContext("webgl");
gl.clearColor(0,0,0,1); prepareWebGLContext();
gl.clearDepth(1); prepareResizedImageBitmapsAndRuntTests(testOptions);
var testCanvas = document.createElement('canvas');
testCanvas.width = 2;
testCanvas.height = 2;
var ctx = testCanvas.getContext("2d");
setCanvasToRedGreen(ctx);
var options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p1 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.defaultOption = imageBitmap });
options.imageOrientation = "none";
options.premultiplyAlpha = "premultiply";
var p2 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.noFlipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p3 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.noFlipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p4 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.noFlipYUnpremul = imageBitmap });
options.imageOrientation = "flipY";
options.premultiplyAlpha = "premultiply";
var p5 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.flipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p6 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.flipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p7 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.flipYUnpremul = imageBitmap });
options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p8 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.colorSpaceDef = imageBitmap });
options.colorSpaceConversion = "none";
var p9 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.colorSpaceNone = imageBitmap });
options.colorSpaceConversion = "default";
var p10 = createImageBitmap(testCanvas, options).then(
function(imageBitmap) { bitmaps.colorSpaceDefault = imageBitmap });
return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9, p10]).then(function() {
var alphaVal = 0.5;
var testPassed = runTest(bitmaps, alphaVal, false);
if (!testPassed)
assert_true(false, 'Test failed');
}, function() {
assert_true(false, 'Promise rejected');
});
}, 'createImageBitmap(HTMLCanvasElement) with resize and other options');
</script> </script>
<!DOCTYPE html>
<html> <html>
<head>
<script src="./resources/webgl-test-utils-full.js"></script> <script src="./resources/webgl-test-utils-full.js"></script>
<script src="./resources/tex-image-and-sub-image-utils.js"></script> <script src="./resources/tex-image-and-sub-image-utils.js"></script>
<script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script> <script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script>
<script src="../../resources/testharness.js"></script> <script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script> <script src="../../resources/testharnessreport.js"></script>
</head>
<body> <body>
<script> <script>
var wtu = WebGLTestUtils;
var tiu = TexImageUtils;
var gl = null;
var internalFormat = "RGBA";
var pixelFormat = "RGBA";
var pixelType = "UNSIGNED_BYTE";
function generateTest()
{
var bitmaps = [];
var canvas = document.createElement('canvas');
canvas.width = 4;
canvas.height = 4;
document.body.appendChild(canvas);
gl = canvas.getContext("webgl");
gl.clearColor(0,0,0,1);
gl.clearDepth(1);
var options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p1 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.defaultOption = imageBitmap });
options.imageOrientation = "none";
options.premultiplyAlpha = "premultiply";
var p2 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.noFlipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p3 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.noFlipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p4 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.noFlipYUnpremul = imageBitmap });
options.imageOrientation = "flipY";
options.premultiplyAlpha = "premultiply";
var p5 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.flipYPremul = imageBitmap });
options.premultiplyAlpha = "default"; var image = new Image();
var p6 = createImageBitmap(image, options).then( var testOptions = {sourceName: "HTMLImageElement", imageSource: image,
function(imageBitmap) { bitmaps.flipYDefault = imageBitmap }); sourceIsPremul: true, resizeWidth: 4, resizeHeight: 4};
prepareWebGLContext();
options.premultiplyAlpha = "none";
var p7 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.flipYUnpremul = imageBitmap });
options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p8 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.colorSpaceDef = imageBitmap });
options.colorSpaceConversion = "none";
var p9 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.colorSpaceNone = imageBitmap });
options.colorSpaceConversion = "default";
var p10 = createImageBitmap(image, options).then(
function(imageBitmap) { bitmaps.colorSpaceDefault = imageBitmap });
return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9, p10]).then(
t.step_func_done(function() {
var alphaVal = 0.5;
var testPassed = runTest(bitmaps, alphaVal, true);
if (!testPassed)
assert_true(false, 'Test failed');
}), t.step_func_done(function() {
assert_true(false, 'Promise rejected');
}));
}
var t = async_test("createImageBitmap(HTMLImageElement) with resize and other options"); image.onload = function() {
prepareResizedImageBitmapsAndRuntTests(testOptions);
};
var image = new Image();
image.onload = t.step_func(function() {
generateTest();
});
image.src = 'resources/red-green-semi-transparent-2x2.png'; image.src = 'resources/red-green-semi-transparent-2x2.png';
</script> </script>
</body>
</html>
<!DOCTYPE html>
<html> <html>
<head>
<script src="./resources/webgl-test-utils-full.js"></script> <script src="./resources/webgl-test-utils-full.js"></script>
<script src="./resources/tex-image-and-sub-image-utils.js"></script> <script src="./resources/tex-image-and-sub-image-utils.js"></script>
<script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script> <script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script>
<script src="../../resources/testharness.js"></script> <script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script> <script src="../../resources/testharnessreport.js"></script>
</head>
<body> <body>
<script> <script>
var wtu = WebGLTestUtils;
var tiu = TexImageUtils;
var gl = null;
var internalFormat = "RGBA";
var pixelFormat = "RGBA";
var pixelType = "UNSIGNED_BYTE";
promise_test(function() { var imageData = new ImageData(new Uint8ClampedArray(
var bitmaps = []; [255, 0, 0, 255,
255, 0, 0, 26,
0, 255, 0, 255,
0, 255, 0, 26]),
2, 2);
var canvas = document.createElement('canvas'); var testOptions = {sourceName: "ImageData",
canvas.width = 4; imageSource: imageData, sourceIsPremul: false,
canvas.height = 4; resizeWidth: 4, resizeHeight: 4};
gl = canvas.getContext("webgl");
gl.clearColor(0,0,0,1); prepareWebGLContext();
gl.clearDepth(1); prepareResizedImageBitmapsAndRuntTests(testOptions);
var imageData = new ImageData(new Uint8ClampedArray( </script>
[255, 0, 0, 255, \ No newline at end of file
255, 0, 0, 26,
0, 255, 0, 255,
0, 255, 0, 26]),
2, 2);
var options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p1 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.defaultOption = imageBitmap });
options.imageOrientation = "none";
options.premultiplyAlpha = "premultiply";
var p2 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.noFlipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p3 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.noFlipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p4 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.noFlipYUnpremul = imageBitmap });
options.imageOrientation = "flipY";
options.premultiplyAlpha = "premultiply";
var p5 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.flipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p6 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.flipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p7 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.flipYUnpremul = imageBitmap });
options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p8 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.colorSpaceDef = imageBitmap });
options.colorSpaceConversion = "none";
var p9 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.colorSpaceNone = imageBitmap });
options.colorSpaceConversion = "default";
var p10 = createImageBitmap(imageData, options).then(
function(imageBitmap) { bitmaps.colorSpaceDefault = imageBitmap });
return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9, p10]).then(
function() {
var alphaVal = 0.5;
var testPassed = runTest(bitmaps, alphaVal, false);
if (!testPassed)
assert_true(false, 'Test failed');
}, function() {
assert_true(false, 'Promise rejected');
});
}, 'createImageBitmap(ImageData) with resize and other options');
</script>
</body>
</html>
<!DOCTYPE html>
<html> <html>
<head>
<script src="./resources/webgl-test-utils-full.js"></script> <script src="./resources/webgl-test-utils-full.js"></script>
<script src="./resources/tex-image-and-sub-image-utils.js"></script> <script src="./resources/tex-image-and-sub-image-utils.js"></script>
<script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script> <script src="./resources/tex-image-and-sub-image-image-bitmap-utils-resize.js"></script>
...@@ -8,12 +6,6 @@ ...@@ -8,12 +6,6 @@
<script src="../../resources/testharnessreport.js"></script> <script src="../../resources/testharnessreport.js"></script>
<body> <body>
<script> <script>
var wtu = WebGLTestUtils;
var tiu = TexImageUtils;
var gl = null;
var internalFormat = "RGBA";
var pixelFormat = "RGBA";
var pixelType = "UNSIGNED_BYTE";
function setCanvasToRedGreen(ctx) { function setCanvasToRedGreen(ctx) {
var width = ctx.canvas.width; var width = ctx.canvas.width;
...@@ -30,74 +22,17 @@ function setCanvasToRedGreen(ctx) { ...@@ -30,74 +22,17 @@ function setCanvasToRedGreen(ctx) {
ctx.fillRect(halfWidth, halfHeight, halfWidth, halfHeight); ctx.fillRect(halfWidth, halfHeight, halfWidth, halfHeight);
} }
promise_test(function() { var testCanvas = document.createElement('canvas');
var bitmaps = []; testCanvas.width = 2;
testCanvas.height = 2;
var offscreen = testCanvas.transferControlToOffscreen();
var ctx = offscreen.getContext("2d");
setCanvasToRedGreen(ctx);
var canvas = document.createElement('canvas'); var testOptions = {sourceName: "OffscreenCanvas", imageSource: offscreen,
canvas.width = 4; sourceIsPremul: true, resizeWidth: 4, resizeHeight: 4};
canvas.height = 4;
document.body.appendChild(canvas);
gl = canvas.getContext("webgl");
gl.clearColor(0,0,0,1); prepareWebGLContext();
gl.clearDepth(1); prepareResizedImageBitmapsAndRuntTests(testOptions);
var testCanvas = document.createElement('canvas');
testCanvas.width = 2;
testCanvas.height = 2;
var offscreen = testCanvas.transferControlToOffscreen();
var ctx = offscreen.getContext('2d');
setCanvasToRedGreen(ctx);
var options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p1 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.defaultOption = imageBitmap });
options.imageOrientation = "none";
options.premultiplyAlpha = "premultiply";
var p2 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.noFlipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p3 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.noFlipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p4 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.noFlipYUnpremul = imageBitmap });
options.imageOrientation = "flipY";
options.premultiplyAlpha = "premultiply";
var p5 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.flipYPremul = imageBitmap });
options.premultiplyAlpha = "default";
var p6 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.flipYDefault = imageBitmap });
options.premultiplyAlpha = "none";
var p7 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.flipYUnpremul = imageBitmap });
options = {resizeWidth: 4, resizeHeight: 4, resizeQuality: "high"};
var p8 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.colorSpaceDef = imageBitmap });
options.colorSpaceConversion = "none";
var p9 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.colorSpaceNone = imageBitmap });
options.colorSpaceConversion = "default";
var p10 = createImageBitmap(offscreen, options).then(
function(imageBitmap) { bitmaps.colorSpaceDefault = imageBitmap });
return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9, p10]).then(function() {
var alphaVal = 0.5;
var testPassed = runTest(bitmaps, alphaVal, false);
if (!testPassed)
assert_true(false, 'Test failed');
}, function() {
assert_true(false, 'Promise rejected');
});
}, 'createImageBitmap(HTMLCanvasElement) with resize and other options');
</script> </script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment