| |
| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .region { |
| -webkit-flow-from: flow; |
| width: 320px; |
| height: 320px; |
| border: 5px solid black; |
| } |
| |
| #img { |
| -webkit-flow-into: flow; |
| width: 300px; |
| height: 300px; |
| } |
| |
| .spin { |
| -webkit-animation-name: spin; |
| -webkit-animation-duration: 0.1s; |
| -webkit-animation-timing-function: linear; |
| } |
| |
| @-webkit-keyframes spin { |
| from { -webkit-transform: rotateZ(0deg);} |
| to { -webkit-transform: rotateZ(360deg); } |
| } |
| </style> |
| </head> |
| |
| <body> |
| <p>Test that an animated image displayed in a region is correctly animated.</p> |
| <p>On success, you should see an image of an iPad displayed inside a black border box and no crash.</p> |
| <p>PASS</p> |
| <div class="region"></div> |
| <img id="img" class="spin" src="resources/ipad.jpg" /> |
| <script> |
| if (window.testRunner) |
| window.testRunner.dumpAsText(); |
| </script> |
| </body> |
| </html> |
