| <body> |
| This is a test for custom CSS cursors on retina displays. |
| Move the mouse over the green pixel in each red square and the left should match the right. |
| Note that NSCursor has bugs with precise sub-pixel positioning on retina displays but if you zoom in using the control+scroll shortcut then the cursor will shift to the correct position. |
| See https://bugs.webkit.org/show_bug.cgi?id=120783. |
| <script> |
| |
| if (window.devicePixelRatio !== 2) { |
| document.write('<h1>Note: This test only makes sense on a retina display.</h1>'); |
| } |
| |
| var demoWidth = 64; |
| var demoHeight = 64; |
| |
| function createCheckerboard(width, height) { |
| var c = document.createElement('canvas').getContext('2d'); |
| var imageData = c.createImageData(width, height); |
| var data = imageData.data; |
| c.canvas.width = width; |
| c.canvas.height = height; |
| for (var y = 0; y < height; y++) { |
| for (var x = 0; x < width; x++) { |
| var i = x + y * width << 2; |
| data[i] = data[i + 1] = data[i + 2] = (x ^ y) & 1 ? 255 : 0; |
| data[i + 3] = 255; |
| } |
| } |
| c.putImageData(imageData, 0, 0); |
| return c.canvas; |
| } |
| |
| function createRender(x, y, width, height, scale) { |
| var c = document.createElement('canvas').getContext('2d'); |
| var checkerboard = createCheckerboard(width, height); |
| c.canvas.width = demoWidth * 2; |
| c.canvas.height = demoHeight * 2; |
| c.canvas.style.width = demoWidth + 'px'; |
| c.canvas.style.height = demoHeight + 'px'; |
| c.fillStyle = '#F00'; c.fillRect(0, 0, demoWidth * 2, demoHeight * 2); |
| c.fillStyle = '#D00'; c.fillRect(0, 0, demoWidth, demoHeight); |
| c.fillStyle = '#0F0'; c.fillRect(demoWidth, demoHeight, 2, 2); |
| c.drawImage(checkerboard, demoWidth - 2 * x, demoHeight - 2 * y, checkerboard.width * 2 / scale, checkerboard.height * 2 / scale); |
| return c.canvas; |
| } |
| |
| var number = 0; |
| |
| function createCursorDemo(x, y, width, height, scale) { |
| var cursor = '-webkit-image-set(url(' + createCheckerboard(width, height).toDataURL() + ') ' + scale + 'x) ' + x + ' ' + y + ', help'; |
| document.write('<h3 style="margin-bottom:0;">Test ' + ++number + '</h3>' + |
| '<div style="position:relative;width:' + demoWidth + 'px;height:' + demoHeight + 'px;background:#F00;display:inline-block;margin-right:20px;">' + |
| '<div style="position:absolute;width:' + demoWidth / 2 + 'px;height:' + demoHeight / 2 + 'px;background:#D00;"></div>' + |
| '<div style="position:absolute;left:' + demoWidth / 2 + 'px;top:' + demoHeight / 2 + 'px;width:1px;height:1px;background:#0F0;cursor:' + cursor + ';"></div>' + |
| '</div>'); |
| document.body.appendChild(createRender(x, y, width, height, scale)); |
| } |
| |
| document.write('<h2>Size tests</h2>'); |
| createCursorDemo(0, 0, 64, 64, 2); |
| createCursorDemo(0, 0, 63, 64, 2); |
| createCursorDemo(0, 0, 64, 63, 2); |
| createCursorDemo(0, 0, 63, 63, 2); |
| createCursorDemo(0, 0, 5, 4, 2); |
| createCursorDemo(0, 0, 5, 3, 2); |
| createCursorDemo(0, 0, 4, 3, 2); |
| createCursorDemo(0, 0, 2, 2, 2); |
| createCursorDemo(0, 0, 1, 1, 2); |
| |
| document.write('<h2>Hot spot tests</h2>'); |
| createCursorDemo(15, 15, 64, 64, 2); |
| createCursorDemo(15, 15, 32, 32, 1); |
| createCursorDemo(31, 31, 64, 64, 2); |
| createCursorDemo(31, 31, 32, 32, 1); |
| createCursorDemo(1, 1, 9, 9, 2); |
| createCursorDemo(16, 0, 64, 64, 2); |
| createCursorDemo(0, 16, 64, 64, 2); |
| createCursorDemo(3, 4, 8, 10, 2); |
| createCursorDemo(2, 3, 7, 9, 2); |
| createCursorDemo(1, 0, 5, 3, 2); |
| createCursorDemo(2, 1, 5, 3, 2); |
| |
| </script> |
| </body> |
