| <!DOCTYPE html> <!-- webkit-test-runner [ LayerBasedSVGEngineEnabled=true ] --> |
| <html> |
| <head> |
| <title>Tests that SVG documents with viewBox don't trigger unnecessary repaints during animations.</title> |
| <style> |
| svg { border: 1px solid black; } |
| |
| #animating { |
| transform-origin: 50% 50%; |
| transform-box: border-box; |
| transform: translateZ(0); |
| |
| animation: rotation 1s 1s; |
| animation-fill-mode: forwards; |
| } |
| |
| @keyframes rotation { |
| from { transform: rotate(0deg) translateZ(0); } |
| to { transform: rotate(45deg) translateZ(0); } |
| } |
| |
| #result { |
| display: none; |
| } |
| </style> |
| <script src="../../animations/resources/animation-test-helpers.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| const expectedValues = [ |
| // [animation-name, time, element-id, property, expected-value, tolerance] |
| ["rotation", 1.5, "animating", "webkitTransform", "matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)", 0], |
| ]; |
| |
| var doPixelTest = true; |
| var disablePauseAPI = true; |
| runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest); |
| </script> |
| </head> |
| <body> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="500" height="300"> |
| <rect id="animating" x="10" y="10" width="180" height="180" fill="green"/> |
| </svg> |
| <div id="result"></div> |
| </body> |
| </html> |
