| <!DOCTYPE html> |
| <title>CSS Motion Path: offset-anchor with transform-box: fill-box</title> |
| <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property"> |
| <link rel="match" href="offset-anchor-transform-box-fill-box-ref.html"> |
| <meta name="assert" content="Tests offset-anchor together with a fill-box transform-box"> |
| <style> |
| #target { |
| transform-box: fill-box; |
| transform-origin: 50% 50%; |
| offset-anchor: 25% 25%; |
| offset-path: path("M75,-25v100"); |
| offset-distance: 50%; |
| } |
| </style> |
| <svg width="400" height="400"> |
| <rect width="100" height="100" fill="red"/> |
| <rect id="target" x="150" y="100" width="100" height="100" fill="green"/> |
| </svg> |