| Index: LayoutTests/fast/sub-pixel/sub-pixel-composited-layers.html | 
| diff --git a/LayoutTests/fast/sub-pixel/sub-pixel-composited-layers.html b/LayoutTests/fast/sub-pixel/sub-pixel-composited-layers.html | 
| new file mode 100644 | 
| index 0000000000000000000000000000000000000000..7c327f9258b3b01f8427436c088749147a3567d2 | 
| --- /dev/null | 
| +++ b/LayoutTests/fast/sub-pixel/sub-pixel-composited-layers.html | 
| @@ -0,0 +1,95 @@ | 
| +<html> | 
| +<head> | 
| +<style> | 
| +    #test { | 
| +        margin: 5px; | 
| +    } | 
| +    #test.composite > .container { | 
| +        -webkit-transform: translateZ(0); | 
| +        opacity: 0.95; | 
| +    } | 
| +    .container { | 
| +        position: absolute; | 
| +    } | 
| +    .shifter { | 
| +        position: absolute; | 
| +        background-color: black; | 
| +        width: 12.5px; | 
| +        height: 12.5px; | 
| +    } | 
| +    .shifter8x8 { | 
| +        position: absolute; | 
| +        background-color: black; | 
| +        width: 16.5px; | 
| +        height: 16.5px; | 
| +    } | 
| +</style> | 
| +</head> | 
| +<body> | 
| +<div id=test class=composite> | 
| +</div> | 
| +<script> | 
| +    function setupGrid10x10(leftOffset, topOffset, leftFraction, topFraction) | 
| +    { | 
| +        var test = document.getElementById('test'); | 
| +        for (var i = 0; i < 10; i++) { | 
| +            if (i == 5) | 
| +                topOffset += 5; | 
| +            var leftOffsetj = leftOffset; | 
| +            for (var j = 0; j < 10; j++) { | 
| +                if (j == 5) | 
| +                    leftOffsetj += 5; | 
| +                var container = document.createElement("div"); | 
| +                var shifter = document.createElement("div"); | 
| +                container.setAttribute('class', 'container'); | 
| +                shifter.setAttribute('class', 'shifter'); | 
| +                container.style.left = (leftOffsetj + j * 16 + i * leftFraction) + "px" | 
| +                container.style.top = (topOffset + i * 16 + i * topFraction) + "px" | 
| +                shifter.style.left = (5 + j * leftFraction) + "px" | 
| +                shifter.style.top = (5 + j * topFraction) + "px" | 
| +                container.appendChild(shifter); | 
| +                test.appendChild(container); | 
| +            } | 
| +        } | 
| +    } | 
| + | 
| +    function setupGrid8x8(leftOffset, topOffset, leftFraction, topFraction) | 
| +    { | 
| +        var test = document.getElementById('test'); | 
| +        for (var i = 0; i < 8; i++) { | 
| +            if (i == 4) | 
| +                topOffset += 5; | 
| +            var leftOffsetj = leftOffset; | 
| +            for (var j = 0; j < 8; j++) { | 
| +                if (j == 4) | 
| +                    leftOffsetj += 5; | 
| +                var container = document.createElement("div"); | 
| +                var shifter = document.createElement("div"); | 
| +                container.setAttribute('class', 'container'); | 
| +                shifter.setAttribute('class', 'shifter8x8'); | 
| +                container.style.left = (leftOffsetj + j * 20 + i * leftFraction) + "px" | 
| +                container.style.top = (topOffset + i * 20 + i * topFraction) + "px" | 
| +                shifter.style.left = (5 + j * leftFraction) + "px" | 
| +                shifter.style.top = (5 + j * topFraction) + "px" | 
| +                container.appendChild(shifter); | 
| +                test.appendChild(container); | 
| +            } | 
| +        } | 
| +    } | 
| + | 
| +    function setupTest() | 
| +    { | 
| +        // Vertical shifts: | 
| +        setupGrid10x10(10, 10, 0, 0.1) | 
| +        // Horizontal shifts: | 
| +        setupGrid10x10(200, 10, 0.1, 0); | 
| + | 
| +        // And in 8x8 (where exactly 0.5 is more common) | 
| +        setupGrid8x8(10, 200, 0, 0.125); | 
| +        setupGrid8x8(200, 200, 0.125, 0); | 
| +    } | 
| + | 
| +    setupTest(); | 
| +</script> | 
| +</body> | 
| +</html> | 
|  |