| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <title>image generator for box-shadow tests</title> |
| <meta charset="UTF-8"> |
| <!-- |
| |
| This file uses canvas to generate the images used (and checked in to |
| the repository) for these tests. |
| |
| Since the tests are blurring a very tall (relative to the Gaussian |
| kernel) straight boundary, we can use a one dimensional Gaussian |
| function to generate the image. |
| |
| We're blurring a space that has black on the left 300 pixels and white |
| on the right 300 pixels. We treat pixel edges as 0, 1, 2, ..., 600 and |
| pixel centers as 0.5, 1.5, ..., 599.5. |
| |
| Therefore we want the cumulative gaussian, with 5% slop, rounded using |
| floor or ceiling to provide *extra* tolerance. This means the color |
| values for each pixel should be the output of the following R commands: |
| |
| floor(pmax(0, pnorm(seq(0,599)+0.5, mean=300, sd=50) - 0.05) * 255) |
| ceiling(pmin(1, pnorm(seq(0,599)+0.5, mean=300, sd=50) + 0.05) * 255) |
| |
| --> |
| <script> |
| var darker = [ |
| // output of |
| // floor(pmax(0, pnorm(seq(0,599)+0.5, mean=300, sd=50) - 0.05) * 255) |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, |
| 0, 0, 0, 0, 1, 2, 2, 3, 3, 4, 5, 5, 6, 7, 8, 9, 9, 10, 11, 12, 13, 14, |
| 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 28, 29, 30, 32, 33, 34, |
| 36, 37, 39, 40, 42, 43, 45, 46, 48, 49, 51, 53, 54, 56, 58, 59, 61, 63, |
| 65, 66, 68, 70, 72, 74, 76, 77, 79, 81, 83, 85, 87, 89, 91, 93, 95, 97, |
| 99, 101, 103, 105, 107, 109, 111, 113, 115, 117, 119, 121, 123, 125, |
| 127, 129, 131, 133, 135, 137, 139, 141, 143, 145, 147, 149, 151, 153, |
| 155, 157, 159, 160, 162, 164, 166, 168, 169, 171, 173, 174, 176, 178, |
| 179, 181, 182, 184, 185, 187, 188, 190, 191, 193, 194, 195, 197, 198, |
| 199, 201, 202, 203, 204, 205, 207, 208, 209, 210, 211, 212, 213, 214, |
| 215, 216, 217, 218, 218, 219, 220, 221, 222, 222, 223, 224, 224, 225, |
| 226, 226, 227, 227, 228, 229, 229, 230, 230, 231, 231, 232, 232, 232, |
| 233, 233, 234, 234, 234, 235, 235, 235, 236, 236, 236, 236, 237, 237, |
| 237, 237, 238, 238, 238, 238, 238, 238, 239, 239, 239, 239, 239, 239, |
| 239, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 241, 241, 241, |
| 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, 241, |
| 241, 241, 241, 241, 241, 241, 241, 241, 241, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, |
| 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242, 242 |
| ]; |
| |
| var lighter = [ |
| // output of |
| // ceiling(pmin(1, pnorm(seq(0,599)+0.5, mean=300, sd=50) + 0.05) * 255) |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, |
| 13, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, |
| 14, 14, 14, 14, 14, 14, 14, 14, 14, 15, 15, 15, 15, 15, 15, 15, 15, 15, |
| 15, 16, 16, 16, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, |
| 19, 19, 19, 19, 20, 20, 20, 21, 21, 21, 22, 22, 23, 23, 23, 24, 24, 25, |
| 25, 26, 26, 27, 28, 28, 29, 29, 30, 31, 31, 32, 33, 33, 34, 35, 36, 37, |
| 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, |
| 57, 58, 60, 61, 62, 64, 65, 67, 68, 70, 71, 73, 74, 76, 77, 79, 81, 82, |
| 84, 86, 87, 89, 91, 93, 95, 96, 98, 100, 102, 104, 106, 108, 110, 112, |
| 114, 116, 118, 120, 122, 124, 126, 128, 130, 132, 134, 136, 138, 140, |
| 142, 144, 146, 148, 150, 152, 154, 156, 158, 160, 162, 164, 166, 168, |
| 170, 172, 174, 176, 178, 179, 181, 183, 185, 187, 189, 190, 192, 194, |
| 196, 197, 199, 201, 202, 204, 206, 207, 209, 210, 212, 213, 215, 216, |
| 218, 219, 221, 222, 223, 225, 226, 227, 228, 230, 231, 232, 233, 234, |
| 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 246, 247, |
| 248, 249, 250, 250, 251, 252, 252, 253, 253, 254, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, |
| 255, 255, 255, 255, 255, 255 |
| ] |
| |
| function append_link(arr, name) { |
| if (arr.length != 600) { |
| return; |
| } |
| var canvas = document.createElement("canvas"); |
| canvas.setAttribute("width", 600); |
| canvas.setAttribute("height", 10); |
| var cx = canvas.getContext("2d"); |
| for (var x = 0; x < 600; ++x) { |
| var color = arr[x]; |
| cx.fillStyle = "rgb(" + color + "," + color + "," + color + ")"; |
| cx.fillRect(x, 0, 1, 10); |
| } |
| |
| var a = document.createElement("a"); |
| a.setAttribute("href", canvas.toDataURL("image/png", "")); |
| a.appendChild(document.createTextNode(name)); |
| var p = document.createElement("p"); |
| p.appendChild(a); |
| document.body.appendChild(p); |
| } |
| |
| function run() { |
| append_link(darker, "box-shadow-blur-definition-001-dark-bound.png"); |
| append_link(lighter, "box-shadow-blur-definition-001-light-bound.png"); |
| } |
| |
| window.addEventListener("load", run); |
| </script> |
| </head> |
| <body> |
| </body> |
| </html> |
