diff --git a/Libraries/LibWeb/HTML/ImageData.cpp b/Libraries/LibWeb/HTML/ImageData.cpp index 9eaa5764858..b6914617669 100644 --- a/Libraries/LibWeb/HTML/ImageData.cpp +++ b/Libraries/LibWeb/HTML/ImageData.cpp @@ -29,7 +29,15 @@ WebIDL::ExceptionOr> ImageData::create(JS::Realm& re // 2. Initialize this given sw, sh, and settings set to settings. // 3. Initialize the image data of this to transparent black. - auto data = TRY(JS::Uint8ClampedArray::create(realm, sw * sh * 4)); + // + // If the Canvas Pixel ArrayBuffer cannot be allocated, then rethrow the RangeError thrown by JavaScript, and return. + Checked size = sw; + size *= sh; + size *= sizeof(u32); + if (size.has_overflow()) + return WebIDL::IndexSizeError::create(realm, "The specified image size could not created"_string); + + auto data = TRY(JS::Uint8ClampedArray::create(realm, size.value())); auto bitmap = TRY_OR_THROW_OOM(vm, Gfx::Bitmap::create_wrapper(Gfx::BitmapFormat::RGBA8888, Gfx::AlphaType::Unpremultiplied, Gfx::IntSize(sw, sh), sw * sizeof(u32), data->data().data())); return realm.create(realm, bitmap, data); diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.txt b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.txt new file mode 100644 index 00000000000..5b736463287 --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.txt @@ -0,0 +1,11 @@ +Summary + +Harness status: OK + +Rerun + +Found 1 tests + +1 Pass +Details +Result Test Name MessagePass Testing different type of ImageData constructor \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.html b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.html new file mode 100644 index 00000000000..69e959bf885 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.html @@ -0,0 +1,112 @@ + + + +Canvas test: 2d.imageData.object.ctor.basics + + + + + + +

2d.imageData.object.ctor.basics

+

Testing different type of ImageData constructor

+ + +

Actual output:

+

FAIL (fallback content)

 + +
    + + diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/resources/canvas-tests.css b/Tests/LibWeb/Text/input/wpt-import/html/canvas/resources/canvas-tests.css new file mode 100644 index 00000000000..e006e812de4 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/resources/canvas-tests.css @@ -0,0 +1,134 @@ +html.fail { + background: #f66; +} +html.pass { + background: #6f6; +} +html.needs_check { + background: #99f; +} + +body { + font-size: small; + font-family: sans-serif; + color: black; +} + +a:link { + color: #00c; +} +a:visited { + color: #808; +} + +body.framed { + font-size: x-small; +} + +h1 { + font-size: larger; + margin: 0; + padding-left: 0.5em; + text-indent: -0.5em; +} + +p { + margin: 0; +} + +p.notes { + margin-bottom: 0.5em; + font-style: italic; +} + +ul { + margin: 0; + margin-bottom: 0.5em; + padding: 0; + padding-left: 1em; +} + +.refs { + font-style: italic; + margin-bottom: 0.5em; +} + +.refs ul { + display: inline; + margin: 0; + padding: 0; +} + +.refs li { + display: inline; + list-style-type: none; + margin: 0; + padding: 0; +} + +canvas { + display: none; + visibility: hidden; + border: 2px #f0f solid; + background: url(../images/background.png); +} + +img.expected { + display: none; + border: 2px #f0f solid; + background: url(../images/background.png); +} + +iframe { + border: 2px #f0f solid; +} + +.output { + display: none; +} + +.show_output .output, .needs_check .output { + display: block !important; + visibility: visible !important; +} + +.show_output #show_output { + display: none; +} + +.resource { + visibility: hidden; + height: 0; +} + +.fallback { + font-size: 2em; + font-weight: bold; + color: #a00; +} + + +html.minimal body { + color: white; +} +html.fail.minimal { + background: #f00; +} +html.pass.minimal { + background: #080; +} +html.needs_check.minimal { + background: #008; +} +.minimal #d { + display: none !important; +} +.minimal .expectedtext { + visibility: hidden !important; +} +#passtext, #failtext { + display: none; +} +.minimal.pass #passtext, .minimal.fail #failtext { + display: block; +} diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/resources/canvas-tests.js b/Tests/LibWeb/Text/input/wpt-import/html/canvas/resources/canvas-tests.js new file mode 100644 index 00000000000..c6e28732838 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/resources/canvas-tests.js @@ -0,0 +1,221 @@ +function _valToString(val) +{ + if (val === undefined || val === null) + return '[' + typeof(val) + ']'; + return val.toString() + '[' + typeof(val) + ']'; +} + +function _assert(cond, text) +{ + assert_true(!!cond, text); +} + +function _assertSame(a, b, text_a, text_b) +{ + var msg = text_a + ' === ' + text_b + ' (got ' + _valToString(a) + + ', expected ' + _valToString(b) + ')'; + assert_equals(a, b, msg); +} + +function _assertDifferent(a, b, text_a, text_b) +{ + var msg = text_a + ' !== ' + text_b + ' (got ' + _valToString(a) + + ', expected not ' + _valToString(b) + ')'; + assert_not_equals(a, b, msg); +} + + +function _getPixel(canvas, x,y) +{ + var ctx = canvas.getContext('2d'); + var imgdata = ctx.getImageData(x, y, 1, 1); + return [ imgdata.data[0], imgdata.data[1], imgdata.data[2], imgdata.data[3] ]; +} + +function _assertPixel(canvas, x, y, r, g, b, a) +{ + var c = _getPixel(canvas, x,y); + assert_equals(c[0], r, 'Red channel of the pixel at (' + x + ', ' + y + ')'); + assert_equals(c[1], g, 'Green channel of the pixel at (' + x + ', ' + y + ')'); + assert_equals(c[2], b, 'Blue channel of the pixel at (' + x + ', ' + y + ')'); + assert_equals(c[3], a, 'Alpha channel of the pixel at (' + x + ', ' + y + ')'); +} + +function _assertPixelApprox(canvas, x, y, r, g, b, a, tolerance) +{ + var c = _getPixel(canvas, x,y); + assert_approx_equals(c[0], r, tolerance, 'Red channel of the pixel at (' + x + ', ' + y + ')'); + assert_approx_equals(c[1], g, tolerance, 'Green channel of the pixel at (' + x + ', ' + y + ')'); + assert_approx_equals(c[2], b, tolerance, 'Blue channel of the pixel at (' + x + ', ' + y + ')'); + assert_approx_equals(c[3], a, tolerance, 'Alpha channel of the pixel at (' + x + ', ' + y + ')'); +} + +function _assertMatricesApproxEqual(matA, matB) +{ + A = matA.toFloat32Array(); + B = matB.toFloat32Array(); + assert_equals(A.length, B.length); + for (var i = 0; i < A.length; i++) { + assert_approx_equals(A[i], B[i], 10e-6); + } +} + +function rad2deg(angle_in_radians) { + return angle_in_radians / Math.PI * 180; +} + +function deg2rad(angle_in_degrees) { + return angle_in_degrees / 180 * Math.PI; +} + +let _deferred = false; + +function deferTest() { + _deferred = true; +} + +function _addTest(testFn, attributes={}) +{ + on_event(window, "load", function() + { + t.step(function() { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d', attributes); + t.step(testFn, window, canvas, ctx); + }); + + if (!_deferred) { + t.done(); + } + }); +} + +function _assertGreen(ctx, canvasWidth, canvasHeight) +{ + var testColor = function(d, idx, expected) { + assert_equals(d[idx], expected, "d[" + idx + "]", String(expected)); + }; + var imagedata = ctx.getImageData(0, 0, canvasWidth, canvasHeight); + var w = imagedata.width, h = imagedata.height, d = imagedata.data; + for (var i = 0; i < h; ++i) { + for (var j = 0; j < w; ++j) { + testColor(d, 4 * (w * i + j) + 0, 0); + testColor(d, 4 * (w * i + j) + 1, 255); + testColor(d, 4 * (w * i + j) + 2, 0); + testColor(d, 4 * (w * i + j) + 3, 255); + } + } +} + +function addCrossOriginYellowImage() +{ + var img = new Image(); + img.id = "yellow.png"; + img.className = "resource"; + img.src = get_host_info().HTTP_REMOTE_ORIGIN + "/images/yellow.png"; + document.body.appendChild(img); +} + +function addCrossOriginRedirectYellowImage() +{ + var img = new Image(); + img.id = "yellow.png"; + img.className = "resource"; + img.src = get_host_info().HTTP_ORIGIN + "/common/redirect.py?location=" + + get_host_info().HTTP_REMOTE_ORIGIN + "/images/yellow.png"; + document.body.appendChild(img); +} + +function forEachCanvasSource(crossOriginUrl, sameOriginUrl, callback) { + function makeImage() { + return new Promise((resolve, reject) => { + const image = new Image(); + image.onload = () => resolve(image); + image.onerror = reject; + image.src = crossOriginUrl + "/images/red.png"; + }); + } + + const arguments = [ + { + name: "cross-origin HTMLImageElement", + factory: makeImage, + }, + + { + name: "cross-origin SVGImageElement", + factory: () => { + return new Promise((resolve, reject) => { + const image = document.createElementNS("http://www.w3.org/2000/svg", "image"); + image.onload = () => resolve(image); + image.onerror = reject; + image.setAttribute("externalResourcesRequired", "true"); + image.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', crossOriginUrl + "/images/red.png"); + document.body.appendChild(image); + }); + }, + }, + + { + name: "cross-origin HTMLVideoElement", + factory: () => { + return new Promise((resolve, reject) => { + const video = document.createElement("video"); + video.oncanplaythrough = () => resolve(video); + video.preload = "auto"; + video.onerror = reject; + video.src = getVideoURI(crossOriginUrl + "/media/movie_300"); + }); + }, + }, + + { + name: "redirected to cross-origin HTMLVideoElement", + factory: () => { + return new Promise((resolve, reject) => { + const video = document.createElement("video"); + video.oncanplaythrough = () => resolve(video); + video.preload = "auto"; + video.onerror = reject; + video.src = "/common/redirect.py?location=" + getVideoURI(crossOriginUrl + "/media/movie_300"); + }); + }, + }, + + { + name: "redirected to same-origin HTMLVideoElement", + factory: () => { + return new Promise((resolve, reject) => { + const video = document.createElement("video"); + video.oncanplaythrough = () => resolve(video); + video.preload = "auto"; + video.onerror = reject; + video.src = crossOriginUrl + "/common/redirect.py?location=" + getVideoURI(sameOriginUrl + "/media/movie_300"); + }); + }, + }, + + { + name: "unclean HTMLCanvasElement", + factory: () => { + return makeImage().then(image => { + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + context.drawImage(image, 0, 0); + return canvas; + }); + }, + }, + + { + name: "unclean ImageBitmap", + factory: () => { + return makeImage().then(createImageBitmap); + }, + }, + ]; + + for (let { name, factory } of arguments) { + callback(name, factory); + } +}