REGRESSION(SUBPIXEL_LAYOUT) Composited layers can cause one pixel shifts
[WebKit-https.git] / LayoutTests / fast / sub-pixel / sub-pixel-composited-layers.html
1 <html>
2 <head>
3 <style>
4     #test { 
5         margin: 5px;
6     }
7     #test.composite > .container {
8         -webkit-transform: translateZ(0);
9         opacity: 0.95;
10     }
11     .container {
12         position: absolute;
13     }
14     .shifter {
15         position: absolute;
16         background-color: black;
17         width: 12.5px;
18         height: 12.5px;
19     }
20     .shifter8x8 {
21         position: absolute;
22         background-color: black;
23         width: 16.5px;
24         height: 16.5px;
25     }
26 </style>
27 </head>
28 <body>
29 <div id=test class=composite>
30 </div>
31 <script>
32     function setupGrid10x10(leftOffset, topOffset, leftFraction, topFraction)
33     {
34         var test = document.getElementById('test');
35         for (var i = 0; i < 10; i++) {
36             if (i == 5)
37                 topOffset += 5;
38             var leftOffsetj = leftOffset;
39             for (var j = 0; j < 10; j++) {
40                 if (j == 5)
41                     leftOffsetj += 5;
42                 var container = document.createElement("div");
43                 var shifter = document.createElement("div");
44                 container.setAttribute('class', 'container');
45                 shifter.setAttribute('class', 'shifter');
46                 container.style.left = (leftOffsetj + j * 16 + i * leftFraction) + "px"
47                 container.style.top = (topOffset + i * 16 + i * topFraction) + "px"
48                 shifter.style.left = (5 + j * leftFraction) + "px"
49                 shifter.style.top = (5 + j * topFraction) + "px"
50                 container.appendChild(shifter);
51                 test.appendChild(container);
52             }
53         }
54     }
55
56     function setupGrid8x8(leftOffset, topOffset, leftFraction, topFraction)
57     {
58         var test = document.getElementById('test');
59         for (var i = 0; i < 8; i++) {
60             if (i == 4)
61                 topOffset += 5;
62             var leftOffsetj = leftOffset;
63             for (var j = 0; j < 8; j++) {
64                 if (j == 4)
65                     leftOffsetj += 5;
66                 var container = document.createElement("div");
67                 var shifter = document.createElement("div");
68                 container.setAttribute('class', 'container');
69                 shifter.setAttribute('class', 'shifter8x8');
70                 container.style.left = (leftOffsetj + j * 20 + i * leftFraction) + "px"
71                 container.style.top = (topOffset + i * 20 + i * topFraction) + "px"
72                 shifter.style.left = (5 + j * leftFraction) + "px"
73                 shifter.style.top = (5 + j * topFraction) + "px"
74                 container.appendChild(shifter);
75                 test.appendChild(container);
76             }
77         }
78     }
79
80     function setupTest()
81     {
82         // Vertical shifts:
83         setupGrid10x10(10, 10, 0, 0.1)
84         // Horizontal shifts:
85         setupGrid10x10(200, 10, 0.1, 0);
86
87         // And in 8x8 (where exactly 0.5 is more common)
88         setupGrid8x8(10, 200, 0, 0.125);
89         setupGrid8x8(200, 200, 0.125, 0);
90     }
91
92     setupTest();
93 </script>
94 </body>
95 </html>