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>