Unreviewed rollout r200924. Caused js/regress/string-replace-generic.html to fail.
[WebKit-https.git] / ManualTests / retina-cursors.html
1 <body>
2 This is a test for custom CSS cursors on retina displays.
3 Move the mouse over the green pixel in each red square and the left should match the right.
4 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.
5 See https://bugs.webkit.org/show_bug.cgi?id=120783.
6 <script>
7
8 if (window.devicePixelRatio !== 2) {
9   document.write('<h1>Note: This test only makes sense on a retina display.</h1>');
10 }
11
12 var demoWidth = 64;
13 var demoHeight = 64;
14
15 function createCheckerboard(width, height) {
16   var c = document.createElement('canvas').getContext('2d');
17   var imageData = c.createImageData(width, height);
18   var data = imageData.data;
19   c.canvas.width = width;
20   c.canvas.height = height;
21   for (var y = 0; y < height; y++) {
22     for (var x = 0; x < width; x++) {
23       var i = x + y * width << 2;
24       data[i] = data[i + 1] = data[i + 2] = (x ^ y) & 1 ? 255 : 0;
25       data[i + 3] = 255;
26     }
27   }
28   c.putImageData(imageData, 0, 0);
29   return c.canvas;
30 }
31
32 function createRender(x, y, width, height, scale) {
33   var c = document.createElement('canvas').getContext('2d');
34   var checkerboard = createCheckerboard(width, height);
35   c.canvas.width = demoWidth * 2;
36   c.canvas.height = demoHeight * 2;
37   c.canvas.style.width = demoWidth + 'px';
38   c.canvas.style.height = demoHeight + 'px';
39   c.fillStyle = '#F00'; c.fillRect(0, 0, demoWidth * 2, demoHeight * 2);
40   c.fillStyle = '#D00'; c.fillRect(0, 0, demoWidth, demoHeight);
41   c.fillStyle = '#0F0'; c.fillRect(demoWidth, demoHeight, 2, 2);
42   c.drawImage(checkerboard, demoWidth - 2 * x, demoHeight - 2 * y, checkerboard.width * 2 / scale, checkerboard.height * 2 / scale);
43   return c.canvas;
44 }
45
46 var number = 0;
47
48 function createCursorDemo(x, y, width, height, scale) {
49   var cursor = '-webkit-image-set(url(' + createCheckerboard(width, height).toDataURL() + ') ' + scale + 'x) ' + x + ' ' + y + ', help';
50   document.write('<h3 style="margin-bottom:0;">Test ' + ++number + '</h3>' +
51     '<div style="position:relative;width:' + demoWidth + 'px;height:' + demoHeight + 'px;background:#F00;display:inline-block;margin-right:20px;">' +
52       '<div style="position:absolute;width:' + demoWidth / 2 + 'px;height:' + demoHeight / 2 + 'px;background:#D00;"></div>' +
53       '<div style="position:absolute;left:' + demoWidth / 2 + 'px;top:' + demoHeight / 2 + 'px;width:1px;height:1px;background:#0F0;cursor:' + cursor + ';"></div>' +
54     '</div>');
55   document.body.appendChild(createRender(x, y, width, height, scale));
56 }
57
58 document.write('<h2>Size tests</h2>');
59 createCursorDemo(0, 0, 64, 64, 2);
60 createCursorDemo(0, 0, 63, 64, 2);
61 createCursorDemo(0, 0, 64, 63, 2);
62 createCursorDemo(0, 0, 63, 63, 2);
63 createCursorDemo(0, 0, 5, 4, 2);
64 createCursorDemo(0, 0, 5, 3, 2);
65 createCursorDemo(0, 0, 4, 3, 2);
66 createCursorDemo(0, 0, 2, 2, 2);
67 createCursorDemo(0, 0, 1, 1, 2);
68
69 document.write('<h2>Hot spot tests</h2>');
70 createCursorDemo(15, 15, 64, 64, 2);
71 createCursorDemo(15, 15, 32, 32, 1);
72 createCursorDemo(31, 31, 64, 64, 2);
73 createCursorDemo(31, 31, 32, 32, 1);
74 createCursorDemo(1, 1, 9, 9, 2);
75 createCursorDemo(16, 0, 64, 64, 2);
76 createCursorDemo(0, 16, 64, 64, 2);
77 createCursorDemo(3, 4, 8, 10, 2);
78 createCursorDemo(2, 3, 7, 9, 2);
79 createCursorDemo(1, 0, 5, 3, 2);
80 createCursorDemo(2, 1, 5, 3, 2);
81
82 </script>
83 </body>