<!DOCTYPE HTML>
<title>Test of canvas shadowBlur Gaussian blur pixel values</title>
<meta charset=UTF-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<h1>Test of canvas shadowBlur Gaussian blur pixel values</h1>
<script>
/**
* See https://en.wikipedia.org/wiki/Error_function#Approximation_with_elementary_functions
*/
function erf(x) {
if (x < 0) {
return -erf(-x);
}
var p = 0.3275911, a1 = 0.254829592, a2 = -0.284496736, a3 = 1.421413741, a4 = -1.453152027, a5 = 1.061405429;
var t = 1 / (1 + p * x);
return 1 - Math.exp(-x * x) * t * (a1 + t * (a2 + t * (a3 + t * (a4 + t * a5))));
}
/**
* See https://en.wikipedia.org/wiki/Normal_distribution#Cumulative_distribution_function
* and https://en.wikipedia.org/wiki/Normal_distribution#Numerical_approximations_for_the_normal_CDF
*/
function standard_normal_distribution_cumulative(x) {
return 0.5 * (1 + erf(x / Math.SQRT2));
}
/**
* Verify a single pixel; helper for run_blur_test.
* params - same as run_blur_test
* row & col - relative to the corner of the rectangle being blurred
* actual - actual color found there on the canvas
*/
function test_pixel(params, row, col, shadowOffset, actual) {
var expected_gaussian;
if (params.expected_sigma > 0) {
// Compute positions within a standard normal distribution (i.e.,
// where mean (μ) is and standard deviation (σ) is 1) in both
// dimensions.
// Add 0.5 because we want the middle of the pixel rather than the edge.
var pos_x = (col - shadowOffset + 0.5) / params.expected_sigma;
var pos_y = (row - shadowOffset + 0.5) / params.expected_sigma;
// Find the expected color value based on a Gaussian blur function.
// Since we're blurring the corner of a "very large" rectangle, we
// can, instead of sampling all of the pixels, use the cumulative
// form of the normal (Gaussian) distribution and pass it the
// position of the color transition (the edges of the rectangle),
// since we know everything above and to the left of that position
// is one color, and everything that is either below or to the right
// of that position is another color.
//
// NOTE: This assumes color-interpolation happens in sRGB rather
// than linearRGB. The canvas spec doesn't appear to be clear on
// this point. If it were linearRGB, we'd need to apply the
// correction after doing this calculation. (No correction to the
// input is needed since the input is all 0 or 1.)
expected_gaussian = standard_normal_distribution_cumulative(-pos_x) *
standard_normal_distribution_cumulative(-pos_y);
} else {
if (col >= shadowOffset || row >= shadowOffset) {
expected_gaussian = 0;
} else {
expected_gaussian = 1;
}
}
// TODO: maybe also compute expected value by triple box blur?
/*
* https://html.spec.whatwg.org/multipage/canvas.html#when-shadows-are-drawn
* describes how to draw shadows in canvas. It says, among other things:
*
* Perform a 2D Gaussian Blur on B, using σ as the standard deviation.
*
* without giving *any* allowance for error.
*
* However, other specifications that require Gaussian blurs allow some
* error; https://www.w3.org/TR/css-backgrounds-3/#shadow-blur allows up to
* 5%, and https://drafts.fxtf.org/filter-effects/#feGaussianBlurElement
* allows use of a triple box blur which is within 3%.
*
* Since expecting zero error is unreasonable, this test tests for the least
* restrictive of these bounds, the 5% error.
*
* Note that this allows 5% error in the color component, but there's no
* tolerance for error in the position; see comment below about sizes.
*/
// Allow any rounding direction.
var min_b = Math.max( 0, Math.floor((expected_gaussian - 0.05) * 255));
var max_b = Math.min(255, Math.ceil ((expected_gaussian + 0.05) * 255));
var min_r = 255 - max_b;
var max_r = 255 - min_b;
var pos = "at row " + row + " col " + col + " ";
assert_true(min_r <= actual.r && actual.r <= max_r,
pos + "red component " + actual.r + " should be between " +
min_r + " and " + max_r + " (inclusive).");
assert_true(min_b <= actual.b && actual.b <= max_b,
pos + "blue component " + actual.b + " should be between " +
min_b + " and " + max_b + " (inclusive).");
assert_equals(actual.g, 0, pos + "green component should be 0");
assert_equals(actual.a, 255, pos + "alpha component should be 255");
}
/**
* Run a test of a single shadowBlur drawing operation. Expects a
* parameters object containing:
* name - name of test
* canvas_width - width of canvas to create
* canvas_height - height of canvas to create
* shadowBlur - shadowBlur to use for the test drawing operation
* expected_sigma - the standard deviation of the gaussian function
* that shadowBlur is expected to produce
* pixel_skip - how many pixels to skip when sampling results. Should
* be relatively prime with canvas_width.
*/
function run_blur_test(params) {
test(function() {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", params.canvas_width);
canvas.setAttribute("height", params.canvas_height);
document.body.appendChild(canvas);
var cx = canvas.getContext("2d");
cx.fillStyle = "red";
cx.fillRect(0, 0, params.canvas_width, params.canvas_height);
// Fill a huge rect just to the top and left of the canvas, with its shadow
// blur centered at the middle of the canvas.
let edge = Math.floor(params.canvas_width / 2); // position of vertical
let big = Math.max(Math.ceil(params.expected_sigma * 1000),
params.canvas_width,
params.canvas_height);
cx.shadowBlur = params.shadowBlur;
cx.fillStyle = "green";
cx.shadowColor = "blue";
cx.shadowOffsetX = edge;
cx.shadowOffsetY = edge;
cx.fillRect(-big, -big, big, big);
var imageData =
cx.getImageData(0, 0, params.canvas_width, params.canvas_height);
for (var i = 0, i_max = params.canvas_width * params.canvas_height;
i < i_max;
i += params.pixel_skip) {
var row = Math.floor(i / params.canvas_width);
var col = i - row * params.canvas_width;
var actual = { r: imageData.data[i * 4],
g: imageData.data[i * 4 + 1],
b: imageData.data[i * 4 + 2],
a: imageData.data[i * 4 + 3] };
test_pixel(params, row, col, edge, actual);
}
}, "shadowBlur Gaussian pixel values for " + params.name);
}
run_blur_test({
name: "no blur",
canvas_width: 4,
canvas_height: 4,
shadowBlur: 0,
expected_sigma: 0,
pixel_skip: 1
});
run_blur_test({
name: "small blur",
canvas_width: 20,
canvas_height: 20,
// Try to test something smaller than 8 due to historic change in
// https://www.w3.org/Bugs/Public/show_bug.cgi?id=10647 , but not too
// small, to avoid the error from rounding to individual pixels worth
// of box blur.
shadowBlur: 6,
expected_sigma: 3,
pixel_skip: 3
});
run_blur_test({
name: "large blur",
canvas_width: 100,
canvas_height: 100,
shadowBlur: 30,
expected_sigma: 15,
pixel_skip: 13
});
</script>
Codebase Browser
chromium