| <!DOCTYPE html> |
| <style> |
| .box { |
| height: 200px; |
| width: 200px; |
| border: 1px solid black; |
| background-repeat: no-repeat; |
| background-size: 100px 100px; |
| background-position: 0 0, 100px 100px; |
| background-image: url('../../../images/resources/green-256x256.jpg'), url('../../../images/resources/dice.png'); |
| } |
| |
| .composited { |
| will-change: transform; |
| transform: translate3d(0, 0, 0); |
| } |
| |
| .composited.changed { |
| transform: translate3d(50px, 50px, 0); |
| } |
| </style> |
| <script src="../resources/text-based-repaint.js"></script> |
| <script> |
| function repaintTest() |
| { |
| document.getElementById('test').classList.add('changed'); |
| } |
| |
| onload = runRepaintAndPixelTest; |
| </script> |
| <div id="test" class="composited box"> |
| </div> |
