| <!DOCTYPE html> |
| <title>transform-box: view-box</title> |
| <link rel="match" href="support/greensquare200x200.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> |
| <style> |
| svg { |
| background-color: red; |
| } |
| rect { |
| transform-box: view-box; |
| } |
| #target1 { |
| transform-origin: 25% 25%; |
| transform: scale(2); |
| } |
| #target2 { |
| transform: translate(50%, 0); |
| } |
| #target3 { |
| transform: translate(0, 50%); |
| } |
| #target4 { |
| transform-origin: 50% 50%; |
| transform: rotate(180deg); |
| } |
| </style> |
| <p>There should be a green 200x200 rectangle below, and no red.</p> |
| <svg width="200" height="200"> |
| <rect id="target1" x="25" y="25" width="50" height="50" fill="green"/> |
| <rect id="target2" width="100" height="100" fill="green"/> |
| <rect id="target3" width="100" height="100" fill="green"/> |
| <rect id="target4" width="100" height="100" fill="green"/> |
| </svg> |
