third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-resize.html - Issue 2035113002: Implement ImageBitmapOptions resize

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-resize.html

Issue 2035113002: Implement ImageBitmapOptions resize (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: spec is clear, patch is now ready Created 4 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/SlowTests ('k') | third_party/WebKit/Source/core/frame/ImageBitmap.h » ('j') | third_party/WebKit/Source/core/frame/ImageBitmap.h » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML>

	2 <script src="../../resources/testharness.js"></script>

	3 <script src="../../resources/testharnessreport.js"></script>

	4 <script>

	5 function checkNoCrop(imageBitmap)

	6 {

	7 var canvas = document.createElement("canvas");

	8 canvas.width = 50;

	9 canvas.height = 50;

	10 var ctx = canvas.getContext("2d");

	11 ctx.clearRect(0, 0, canvas.width, canvas.height);

	12 ctx.drawImage(imageBitmap, 0, 0);

	13 var d = ctx.getImageData(0, 0, 1, 1).data;

	14 assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red.");

	15 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]);

	16 d = ctx.getImageData(39, 0, 1, 1).data;

	17 assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green.");

	18 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]);

	19 d = ctx.getImageData(0, 39, 1, 1).data;

	20 assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue.");

	21 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]);

	22 d = ctx.getImageData(39, 39, 1, 1).data;

	23 assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black.");

	24 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]);

	25 d = ctx.getImageData(41, 41, 1, 1).data;

	26 assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black .");

	27 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]);

	28 }

	29

	30 function checkCrop(imageBitmap)

	31 {

	32 var canvas = document.createElement("canvas");

	33 canvas.width = 50;

	34 canvas.height = 50;

	35 var ctx = canvas.getContext("2d");

	36 ctx.clearRect(0, 0, canvas.width, canvas.height);

	37 ctx.drawImage(imageBitmap, 0, 0);

	38 var d = ctx.getImageData(0, 0, 1, 1).data;

	39 assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red.");

	40 d = ctx.getImageData(19, 0, 1, 1).data;

	41 assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green.");

	42 d = ctx.getImageData(0, 19, 1, 1).data;

	43 assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue.");

	44 d = ctx.getImageData(19, 19, 1, 1).data;

	45 assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black.");

	46 d = ctx.getImageData(21, 21, 1, 1).data;

	47 assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black .");

	48 }

	49

	50 function compareBitmaps(bitmap1, bitmap2, isTheSame)

	51 {

	52 var canvas1 = document.createElement("canvas");

	53 var canvas2 = document.createElement("canvas");

	54 canvas1.width = 50;

	55 canvas1.height = 50;

	56 canvas2.width = 50;

	57 canvas2.height = 50;

	58 var ctx1 = canvas1.getContext("2d");

	59 var ctx2 = canvas2.getContext("2d");

	60 ctx1.clearRect(0, 0, canvas1.width, canvas1.height);

	61 ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

	62 ctx1.drawImage(bitmap1, 0, 0);

	63 ctx2.drawImage(bitmap2, 0, 0);

	64 var data1 = ctx1.getImageData(0, 0, 50, 50).data;

	65 var data2 = ctx2.getImageData(0, 0, 50, 50).data;

	66 var dataMatched = true;

	67 for (var i = 0; i < data1.length; i++) {

	68 if (data1[i] != data2[i]) {

	69 dataMatched = false;

	70 break;

	71 }

	72 }

	73 assert_equals(dataMatched, isTheSame, "These two bitmaps should be different .");
	jbroman 2016/07/07 19:17:59 What's the purpose of this "isTheSame" parameter, What's the purpose of this "isTheSame" parameter, which always seems to be false? Why not just assert_false? xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:17:59, jbroman wrote: > What's the purpose of this "isTheSame" parameter, which always seems to be > false? > Why not just assert_false? Done.
	74 }

	75

	76 function testImageBitmap(source)

	77 {

	78 var imageBitmaps = {};

	79 var p1 = createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resiz eQuality: "high"}).then(function (image) { imageBitmaps.noCropHigh = image; });

	80 var p2 = createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resiz eQuality: "medium"}).then(function (image) { imageBitmaps.noCropMedium = image; });

	81 var p3 = createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resiz eQuality: "low"}).then(function (image) { imageBitmaps.noCropLow = image; });

	82 var p4 = createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resiz eQuality: "pixelated"}).then(function (image) { imageBitmaps.noCropPixelated = i mage; });

	83 var p5 = createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeH eight: 40, resizeQuality: "high"}).then(function (image) { imageBitmaps.cropHigh = image; });

	84 var p6 = createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeH eight: 40, resizeQuality: "medium"}).then(function (image) { imageBitmaps.cropMe dium = image; });

	85 var p7 = createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeH eight: 40, resizeQuality: "low"}).then(function (image) { imageBitmaps.cropLow = image; });

	86 var p8 = createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeH eight: 40, resizeQuality: "pixelated"}).then(function (image) { imageBitmaps.cro pPixelated = image; });

	87 return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8]).then(function() {
	jbroman 2016/07/07 19:17:59 super-nit: it's a little funny to have these push super-nit: it's a little funny to have these push their values into a variable from the surrounding scope, when promises already have a result. WDYT of: return Promise.all([ createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: "high"}), createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: "medium"}), createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: "low"}), ... ]).then(([noCropHigh, noCropMedium, noCropLow, ...]) => { checkNoCrop(noCropHigh); ... }); Up to you; this is a fairly personal-style sort of thing. xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:17:59, jbroman wrote: > super-nit: it's a little funny to have these push their values into a variable > from the surrounding scope, when promises already have a result. WDYT of: > > return Promise.all([ > createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: > "high"}), > createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: > "medium"}), > createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: > "low"}), > ... > ]).then(([noCropHigh, noCropMedium, noCropLow, ...]) => { > checkNoCrop(noCropHigh); > ... > }); > > Up to you; this is a fairly personal-style sort of thing. Done.
	88 checkNoCrop(imageBitmaps.noCropHigh);

	89 checkNoCrop(imageBitmaps.noCropMedium);

	90 checkNoCrop(imageBitmaps.noCropLow);

	91 checkNoCrop(imageBitmaps.noCropPixelated);

	92 checkCrop(imageBitmaps.cropHigh);

	93 checkCrop(imageBitmaps.cropMedium);

	94 checkCrop(imageBitmaps.cropLow);

	95 checkCrop(imageBitmaps.cropPixelated);

	96 // Brute-force comparison among all bitmaps is too expense
	jbroman 2016/07/07 19:18:00 nit: spelling: "expensive" nit: spelling: "expensive" xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:18:00, jbroman wrote: > nit: spelling: "expensive" Done.
	97 compareBitmaps(imageBitmaps.noCropHigh, imageBitmaps.noCropMedium, false );

	98 compareBitmaps(imageBitmaps.noCropLow, imageBitmaps.noCropPixelated, fal se);

	99 compareBitmaps(imageBitmaps.cropHigh, imageBitmaps.cropMedium, false);

	100 compareBitmaps(imageBitmaps.cropLow, imageBitmaps.cropPixelated, false);

	101 }, function(ex) {

	102 failed(ex);
	jbroman 2016/07/07 19:17:59 Is this necessary? promise_test already fails the Is this necessary? promise_test already fails the test on an uncaught promise rejection xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:17:59, jbroman wrote: > Is this necessary? promise_test already fails the test on an uncaught promise > rejection Done.
	103 });

	104 }

	105

	106 function initializeTestCanvas(testCanvas)
	jbroman 2016/07/07 19:17:59 nit: every call site makes a canvas and then passe nit: every call site makes a canvas and then passes it to here. Why not move the createElement call into this function, and have it return the testCanvas instead? xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:17:59, jbroman wrote: > nit: every call site makes a canvas and then passes it to here. Why not move the > createElement call into this function, and have it return the testCanvas > instead? Done.
	107 {

	108 testCanvas.width = 20;

	109 testCanvas.height = 20;

	110 var testCtx = testCanvas.getContext("2d");

	111 testCtx.fillStyle = "rgb(255, 0, 0)";

	112 testCtx.fillRect(0, 0, 10, 10);

	113 testCtx.fillStyle = "rgb(0, 255, 0)";

	114 testCtx.fillRect(10, 0, 10, 10);

	115 testCtx.fillStyle = "rgb(0, 0, 255)";

	116 testCtx.fillRect(0, 10, 10, 10);

	117 testCtx.fillStyle = "rgb(0, 0, 0)";

	118 testCtx.fillRect(10, 10, 10, 10);

	119 }

	120

	121 // Blob

	122 promise_test(function() {

	123 return new Promise((resolve, reject) => {

	124 var xhr = new XMLHttpRequest();

	125 xhr.open("GET", 'resources/pattern.png');

	126 xhr.responseType = 'blob';

	127 xhr.send();

	128 xhr.onload = function() {

	129 blob = xhr.response;

	130 resolve(testImageBitmap(blob));
	jbroman 2016/07/07 19:17:59 nit: exceptions thrown in testImageBitmap won't be nit: exceptions thrown in testImageBitmap won't be captured by the promise this way; suggest making this promise just resolve to the XHR response, and having testImageBitmap happen afterward, like: xhr.onload = function() { resolve(xhr.response); }; }).then(testImageBitmap); This way the initial promise just deals with the XHR. By the way, there's a more modern XHR that already uses promises, fetch. If you used that instead, it would look like this: return fetch("resources/pattern.png").then(response => response.blob()).then(testImageBitmap); xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:17:59, jbroman wrote: > nit: exceptions thrown in testImageBitmap won't be captured by the promise this > way; suggest making this promise just resolve to the XHR response, and having > testImageBitmap happen afterward, like: > > xhr.onload = function() { resolve(xhr.response); }; > }).then(testImageBitmap); > > This way the initial promise just deals with the XHR. > > By the way, there's a more modern XHR that already uses promises, fetch. If you > used that instead, it would look like this: > > return fetch("resources/pattern.png").then(response => > response.blob()).then(testImageBitmap); Done.
	131 };

	132 });

	133 }, 'createImageBitmap from a Blob with resize option.');

	134

	135 // HTMLCanvasElement

	136 promise_test(function() {

	137 return new Promise((resolve, reject) => {
	jbroman 2016/07/07 19:18:00 testImageBitmap already has all of the asynchronou testImageBitmap already has all of the asynchronousness here; you don't have to build another promise (it doesn't break things, but it's longer). var testCanvas = document.createElement("canvas"); initializeTestCanvas(testCanvas); return testImageBitmap(testCanvas); xidachen 2016/07/07 20:43:28 Done. Show quoted text On 2016/07/07 19:18:00, jbroman wrote: > testImageBitmap already has all of the asynchronousness here; you don't have to > build another promise (it doesn't break things, but it's longer). > > var testCanvas = document.createElement("canvas"); > initializeTestCanvas(testCanvas); > return testImageBitmap(testCanvas); Done.
	138 var testCanvas = document.createElement("canvas");

	139 initializeTestCanvas(testCanvas);

	140 resolve(testImageBitmap(testCanvas));

	141 });

	142 }, 'createImageBitmap from a HTMLCanvasElement with resize option.');

	143

	144 // HTMLImageElement

	145 promise_test(function() {

	146 return new Promise((resolve, reject) => {

	147 var image = new Image();

	148 image.onload = function() {

	149 resolve(testImageBitmap(image));

	150 };

	151 image.src = 'resources/pattern.png'

	152 });
	jbroman 2016/07/07 19:17:59 nit: Similar advice to XHR above. It's not a big d nit: Similar advice to XHR above. It's not a big deal in a layout test (because it'll fail anyways), but it's ideal to capture exceptions by having them run in the promise code, rather than in some other callback. If you just have the onload resolution to "resolve(image)", you can use ".then(testImageBitmap)" at the end to do the test in a way that exceptions will be captured by the promise. xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:17:59, jbroman wrote: > nit: Similar advice to XHR above. It's not a big deal in a layout test (because > it'll fail anyways), but it's ideal to capture exceptions by having them run in > the promise code, rather than in some other callback. If you just have the > onload resolution to "resolve(image)", you can use ".then(testImageBitmap)" at > the end to do the test in a way that exceptions will be captured by the promise. Done.
	153 }, 'createImageBitmap from a HTMLImageElement with resize option.');

	154

	155 // ImageBitmap

	156 promise_test(function() {

	157 return new Promise((resolve, reject) => {

	158 var testCanvas = document.createElement("canvas");

	159 initializeTestCanvas(testCanvas);

	160 createImageBitmap(testCanvas).then(function(bitmap) {

	161 resolve(testImageBitmap(bitmap));
	jbroman 2016/07/07 19:17:59 Here the asynchronousness already uses promises, s Here the asynchronousness already uses promises, so the Promise constructor is unnecessary here. promise_test(function() { var testCanvas = document.createElement("canvas"); initializeTestCanvas(testCanvas); return createImageBitmap(testCanvas).then(testImageBitmap); }); xidachen 2016/07/07 20:43:29 Done. Show quoted text On 2016/07/07 19:17:59, jbroman wrote: > Here the asynchronousness already uses promises, so the Promise constructor is > unnecessary here. > > promise_test(function() { > var testCanvas = document.createElement("canvas"); > initializeTestCanvas(testCanvas); > return createImageBitmap(testCanvas).then(testImageBitmap); > }); Done.
	162 });

	163 });

	164 }, 'createImageBitmap from an ImageBitmap with resize option.');

	165 </script>

OLD	NEW