| <!DOCTYPE html> |
| <title>Legacy transform-box behavior</title> |
| <script src="../../../../../resources/testharness.js"></script> |
| <script src="../../../../../resources/testharnessreport.js"></script> |
| <style> |
| svg { |
| background-color: red; |
| } |
| #r1 { |
| transform: translate(100%, 100%); |
| } |
| #r2 { |
| transform-origin: 150px -50%; |
| transform: rotate(90deg); |
| } |
| #r3 { |
| transform-origin: -50% 50px; |
| transform: rotate(90deg); |
| } |
| #r4 { |
| transform-origin: 100% 0%; |
| transform: rotate(-180deg); |
| } |
| </style> |
| <svg width="200" height="200"> |
| <rect id="r1" width="100" height="100" fill="green"/> |
| <rect id="r2" width="100" height="100" x="100" y="100" fill="green"/> |
| <rect id="r3" width="100" height="100" x="100" fill="green"/> |
| <rect id="r4" width="100" height="100" y="100" fill="green"/> |
| </svg> |
| <script> |
| function assert_rect_equals(actual, expected) { |
| for (let component of ['left', 'top', 'width', 'height']) |
| assert_equals(actual[component], expected[component], component); |
| } |
| |
| test(function() { |
| let rects = document.querySelectorAll('rect'); |
| assert_rect_equals(rects[0].getBoundingClientRect(), { left: 108, top: 108, width: 100, height: 100}); |
| assert_rect_equals(rects[1].getBoundingClientRect(), { left: 8, top: 8, width: 100, height: 100}); |
| assert_rect_equals(rects[2].getBoundingClientRect(), { left: 8, top: 108, width: 100, height: 100}); |
| assert_rect_equals(rects[3].getBoundingClientRect(), { left: 108, top: 8, width: 100, height: 100}); |
| }); |
| </script> |