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