Skip to content
Permalink
Browse files
createImageBitmap with basic HTMLImageElement
https://bugs.webkit.org/show_bug.cgi?id=178619
<rdar://problem/35104118>

Reviewed by Antoine Quint.

Source/WebCore:

Implement the basic infrastructure for creating
an ImageBitmap from an HTMLImageElement.

Test: http/wpt/2dcontext/imagebitmap/createImageBitmap.html

* html/ImageBitmap.cpp:
(WebCore::ImageBitmap::createPromise): Create the image buffer
and draw the image into its backing store.
* html/ImageBitmap.h:

LayoutTests:

Make a better test for createImageBitmap. This will be
submitted to Web Platform Tests.

* http/wpt/2dcontext/imagebitmap/createImageBitmap-expected.txt: Added.
* http/wpt/2dcontext/imagebitmap/createImageBitmap.html: Added.
* http/wpt/common/canvas-tests.css: Added.
* http/wpt/common/canvas-tests.js: Added.
* http/wpt/images/pattern.png: Added.

Canonical link: https://commits.webkit.org/194817@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@223819 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
grorg committed Oct 21, 2017
1 parent c581931 commit 3d934ea3c112607659013f4ca58651f70c062acf
@@ -1,3 +1,20 @@
2017-10-21 Dean Jackson <dino@apple.com>

createImageBitmap with basic HTMLImageElement
https://bugs.webkit.org/show_bug.cgi?id=178619
<rdar://problem/35104118>

Reviewed by Antoine Quint.

Make a better test for createImageBitmap. This will be
submitted to Web Platform Tests.

* http/wpt/2dcontext/imagebitmap/createImageBitmap-expected.txt: Added.
* http/wpt/2dcontext/imagebitmap/createImageBitmap.html: Added.
* http/wpt/common/canvas-tests.css: Added.
* http/wpt/common/canvas-tests.js: Added.
* http/wpt/images/pattern.png: Added.

2017-10-21 Antti Koivisto <antti@apple.com>

Support ::before/::after pseudo elements with display:contents
@@ -0,0 +1,9 @@

PASS createImageBitmap rejects with RangeError if width is zero
PASS createImageBitmap rejects with RangeError if height is zero
PASS createImageBitmap rejects with RangeError if width is negative
PASS createImageBitmap rejects with RangeError if height is negative
PASS createImageBitmap rejects with InvalidStateError on an HTMLImageElement with no image data
PASS createImageBitmap from an HTMLImageElement with image data
PASS A closed ImageBitmap has zero width and height

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<title>createImageBitmap test</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body>
<script>
(function() {
promise_test(function(t) {
return promise_rejects(t, new RangeError, createImageBitmap(new Image(), 0, 0, 0, 10));
}, "createImageBitmap rejects with RangeError if width is zero");

promise_test(function(t) {
return promise_rejects(t, new RangeError, createImageBitmap(new Image(), 0, 0, 10, 0));
}, "createImageBitmap rejects with RangeError if height is zero");

promise_test(function(t) {
return promise_rejects(t, new RangeError, createImageBitmap(new Image(), 0, 0, -10, 10));
}, "createImageBitmap rejects with RangeError if width is negative");

promise_test(function(t) {
return promise_rejects(t, new RangeError, createImageBitmap(new Image(), 0, 0, 10, -10));
}, "createImageBitmap rejects with RangeError if height is negative");

promise_test(function(t) {
return promise_rejects(t, "InvalidStateError", createImageBitmap(new Image()));
}, "createImageBitmap rejects with InvalidStateError on an HTMLImageElement with no image data");

promise_test(function() {
return new Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() { resolve(img); };
img.src = "/images/pattern.png";
}).then(function(img) {
return createImageBitmap(img);
}).then(function(imageBitmap) {
assert_equals(imageBitmap.width, 20, "ImageBitmap width should be 20");
assert_equals(imageBitmap.height, 20, "ImageBitmap height should be 20");
});
}, "createImageBitmap from an HTMLImageElement with image data");

promise_test(function() {
return new Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() { resolve(img); };
img.src = "/images/pattern.png";
}).then(function(img) {
return createImageBitmap(img);
}).then(function(imageBitmap) {
imageBitmap.close();
assert_equals(imageBitmap.width, 0, "A closed ImageBitmap width should be 0");
assert_equals(imageBitmap.height, 0, "A closed ImageBitmap height should be 0");
});
}, "A closed ImageBitmap has zero width and height");

})();
</script>
</body>
</html>
@@ -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;
}
@@ -0,0 +1,105 @@
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, pos, colour)
{
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, pos, colour, 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 _addTest(testFn)
{
var deferred = false;
window.deferTest = function () { deferred = true; };
on_event(window, "load", function()
{
t.step(function() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
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);
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,3 +1,21 @@
2017-10-21 Dean Jackson <dino@apple.com>

createImageBitmap with basic HTMLImageElement
https://bugs.webkit.org/show_bug.cgi?id=178619
<rdar://problem/35104118>

Reviewed by Antoine Quint.

Implement the basic infrastructure for creating
an ImageBitmap from an HTMLImageElement.

Test: http/wpt/2dcontext/imagebitmap/createImageBitmap.html

* html/ImageBitmap.cpp:
(WebCore::ImageBitmap::createPromise): Create the image buffer
and draw the image into its backing store.
* html/ImageBitmap.h:

2017-10-21 Antoine Quint <graouts@apple.com>

[Web Animations] Add bindings to unified sources

0 comments on commit 3d934ea

Please sign in to comment.