Skip to content

Commit

Permalink
style
Browse files Browse the repository at this point in the history
  • Loading branch information
@xlai-o
xlai-o committed Mar 3, 2017
1 parent a7aca26 commit ac07cdb
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 154 deletions.
1 change: 1 addition & 0 deletions offscreen-canvas/filter/offscreencanvas.filter.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="offscreencanvas.filter.js"></script>
<script>
var patternCanvas = createPatternCanvas();
Expand Down
16 changes: 8 additions & 8 deletions offscreen-canvas/filter/offscreencanvas.filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,16 @@ var createPatternCanvas = function() {
};

var filters = [ "none" ,
"blur(10px)" ,
"brightness(40%)" ,
"contrast(20%)" ,
"blur(10px)" ,
"brightness(40%)" ,
"contrast(20%)" ,
"drop-shadow(0 0 5px green)" ,
"grayscale(100%)" ,
"invert(100%)" ,
"opacity(50%)" ,
"saturate(20%)" ,
"sepia(100%)" ,
"sepia(1) hue-rotate(200deg)",
"invert(100%)" ,
"opacity(50%)" ,
"saturate(20%)" ,
"sepia(100%)" ,
"sepia(1) hue-rotate(200deg)",
"url(#url)" ];


112 changes: 31 additions & 81 deletions offscreen-canvas/filter/offscreencanvas.filter.w.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script src="../../resources/testharness.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="offscreencanvas.filter.js"></script>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
Expand All @@ -12,93 +13,42 @@
return oc;
};

var oc = getOffscreenCanvasForFilter(e.data.filter, e.data.patternImage);
var imageBitmap = oc.transferToImageBitmap();

self.postMessage({ filter: e.data.filter,
imageBitmap: imageBitmap },
[ imageBitmap ]);
var filters = e.data.filters;
var pattern = e.data.pattern;
var ret = [];
for (var i = 0; i < filters.length; i++) {
var oc = getOffscreenCanvasForFilter(filters[i], pattern);
var imageBitmap = oc.transferToImageBitmap();
ret.push(imageBitmap);
}
self.postMessage(ret, ret);
};
</script>

<script>
var patternCanvas = document.createElement('canvas');
patternCanvas.width = 20;
patternCanvas.height = 20;
var patternCtx = patternCanvas.getContext('2d');
patternCtx.fillStyle = '#A00';
patternCtx.fillRect(0, 0, 10, 10);
patternCtx.fillStyle = '#0A0';
patternCtx.fillRect(10, 0, 10, 10);
patternCtx.fillStyle = '#00A';
patternCtx.fillRect(0, 10, 10, 10);
patternCtx.fillStyle = "#AA0";
patternCtx.fillRect(10, 10, 10, 10);

var blob = new Blob([document.getElementById('myWorker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));
var filters = [ "none", // ];// ,
"blur(10px)" ,
"brightness(40%)" ,
"contrast(20%)" ,
"drop-shadow(0 0 5px green)" ,
"grayscale(100%)" ,
"invert(100%)" ,
"opacity(50%)" ,
"saturate(20%)" ,
"sepia(100%)" ,
"sepia(1) hue-rotate(200deg)",
"url(#url)" ];

var dictCanvasImageData = [];

var patternCanvas = createPatternCanvas();

// Build a list of image data on regular canvas with different filters
var listCanvasImageData = [];
for (var j = 0; j < filters.length; j++) {
var ctx = getRegularContextForFilter(filters[j], patternCanvas);
var ctxImageData = ctx.getImageData(0, 0, 80, 80).data;
dictCanvasImageData[filters[j]] = ctxImageData;
var ctx = getRegularContextForFilter(filters[j], patternCanvas);
listCanvasImageData.push(ctx.getImageData(0, 0, 80, 80).data);
}

var i = 0;
for (var k = 0; k < filters.length; k++) {
createImageBitmap(patternCanvas).then(
function(img) {
console.log(i);
console.log(filters[i]);
consumeImageBitmap(filters[i], img);
i++;
}
);
}

function compare_approx_imagedata_equals(ctxImageData, offImageData, epsilon, description) {
assert_true(ctxImageData.length === offImageData.length);
for (var i = 0; i < offImageData.length; i++) {
assert_approx_equals(offImageData[i], ctxImageData[i], epsilon, description);
}
}

function consumeImageBitmap(filter, patternImage) {
// async_test(function(t) {
worker.addEventListener('message', msg => {
if (msg.data.filter == filter) {
var temp1Canvas = document.createElement("canvas");
temp1Canvas.getContext("bitmaprenderer").transferFromImageBitmap(msg.data.imageBitmap);
var tempCanvas = document.createElement("canvas");
tempCanvas.width = tempCanvas.height = 80;
tempCanvas.getContext("2d").drawImage(temp1Canvas, 0, 0, 80, 80);
document.body.appendChild(tempCanvas);
var tempImageData = tempCanvas.getContext("2d").getImageData(0, 0, 80, 80).data;
//compare_approx_imagedata_equals(tempImageData, dictCanvasImageData[filter], 100, "image data array for " + filter);
// t.done();
}
});

worker.postMessage({ patternImage: patternImage,
filter: filter },
[patternImage]);
// });
function consumeImageBitmap(patternImage) {
async_test(t => {
var blob = new Blob([document.getElementById('myWorker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', msg => {
for (var i = 0; i < msg.data.length; ++i) {
var outputCtx = document.createElement("canvas").getContext('2d');
outputCtx.drawImage(msg.data[i], 0, 0, 80, 80);
matchImageDataResults(outputCtx.getImageData(0, 0, 80, 80).data, listCanvasImageData[i], filters[i]);
}
t.done();
});
worker.postMessage({filters: filters, pattern: patternImage}, [patternImage]);
});
}

createImageBitmap(patternCanvas).then(consumeImageBitmap);
</script>
<body></body>
53 changes: 0 additions & 53 deletions offscreen-canvas/filter/offscreencanvas.filter.w2.html
View file

This file was deleted.

24 changes: 12 additions & 12 deletions offscreen-canvas/the-offscreen-canvas/offscreencanvas.resize.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
assert_equals(canvas.height, 40);
var image = canvas.transferToImageBitmap();
assert_equals(image.width, 30);
assert_equals(image.height, 40);
assert_equals(image.height, 40);
}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a 2d context attached.");

test(function() {
Expand All @@ -34,7 +34,7 @@
assert_equals(canvas.height, 40);
var image = canvas.transferToImageBitmap();
assert_equals(image.width, 30);
assert_equals(image.height, 40);
assert_equals(image.height, 40);
}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a webgl context attached.");

test(function() {
Expand Down Expand Up @@ -79,15 +79,15 @@
t.step(function() {
// Verify that setting the size of an OffscreenCanvas does not directly update the size of its placeholder canvas.
assert_equals(placeholder.width, 10);
assert_equals(placeholder.height, 20);
assert_equals(placeholder.height, 20);
});
var asyncStepsCompleted = 0;
ctx.commit();
createImageBitmap(placeholder).then(image => {
t.step(function() {
// Verify that the placeholder was not updated synchronously.
assert_equals(image.width, 10);
assert_equals(image.height, 20);
assert_equals(image.height, 20);
});
asyncStepsCompleted = asyncStepsCompleted + 1;
if (asyncStepsCompleted == 2) {
Expand All @@ -99,20 +99,20 @@
t.step(function() {
// Verify that commit() asynchronously updates the size of its placeholder canvas.
assert_equals(placeholder.width, 10);
assert_equals(placeholder.height, 20);
assert_equals(placeholder.height, 20);
});
t.step(function() {
// Verify that width/height attributes are still settable even though they have no effect.
placeholder.width = 50;
placeholder.height = 60;
assert_equals(placeholder.width, 50);
assert_equals(placeholder.height, 60);
assert_equals(placeholder.height, 60);
});
createImageBitmap(placeholder).then(image => {
t.step(function() {
// Verify that an image grabbed from the placeholder has the correct dimensions
assert_equals(image.width, 30);
assert_equals(image.height, 40);
assert_equals(image.height, 40);
});
asyncStepsCompleted = asyncStepsCompleted + 1;
if (asyncStepsCompleted == 2) {
Expand Down Expand Up @@ -141,15 +141,15 @@
t.step(function() {
// Verify that setting the size of an OffscreenCanvas does not directly update the size of its placeholder canvas.
assert_equals(placeholder.width, 10);
assert_equals(placeholder.height, 20);
assert_equals(placeholder.height, 20);
});
var asyncStepsCompleted = 0;
ctx.commit();
createImageBitmap(placeholder).then(image => {
t.step(function() {
// Verify that the placeholder was not updated synchronously.
assert_equals(image.width, 10);
assert_equals(image.height, 20);
assert_equals(image.height, 20);
});
asyncStepsCompleted = asyncStepsCompleted + 1;
if (asyncStepsCompleted == 2) {
Expand All @@ -161,20 +161,20 @@
t.step(function() {
// Verify that commit() asynchronously updates the size of its placeholder canvas.
assert_equals(placeholder.width, 10);
assert_equals(placeholder.height, 20);
assert_equals(placeholder.height, 20);
});
t.step(function() {
// Verify that width/height attributes are still settable even though they have no effect.
placeholder.width = 50;
placeholder.height = 60;
assert_equals(placeholder.width, 50);
assert_equals(placeholder.height, 60);
assert_equals(placeholder.height, 60);
});
createImageBitmap(placeholder).then(image => {
t.step(function() {
// Verify that an image grabbed from the placeholder has the correct dimensions
assert_equals(image.width, 30);
assert_equals(image.height, 40);
assert_equals(image.height, 40);
});
asyncStepsCompleted = asyncStepsCompleted + 1;
if (asyncStepsCompleted == 2) {
Expand Down

0 comments on commit ac07cdb

Please sign in to comment.