OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>Legacy transform-box behavior</title> |
| 3 <script src="../../../../../resources/testharness.js"></script> |
| 4 <script src="../../../../../resources/testharnessreport.js"></script> |
| 5 <style> |
| 6 svg { |
| 7 background-color: red; |
| 8 } |
| 9 #r1 { |
| 10 transform: translate(100%, 100%); |
| 11 } |
| 12 #r2 { |
| 13 transform-origin: 150px -50%; |
| 14 transform: rotate(90deg); |
| 15 } |
| 16 #r3 { |
| 17 transform-origin: -50% 50px; |
| 18 transform: rotate(90deg); |
| 19 } |
| 20 #r4 { |
| 21 transform-origin: 100% 0%; |
| 22 transform: rotate(-180deg); |
| 23 } |
| 24 </style> |
| 25 <svg width="200" height="200"> |
| 26 <rect id="r1" width="100" height="100" fill="green"/> |
| 27 <rect id="r2" width="100" height="100" x="100" y="100" fill="green"/> |
| 28 <rect id="r3" width="100" height="100" x="100" fill="green"/> |
| 29 <rect id="r4" width="100" height="100" y="100" fill="green"/> |
| 30 </svg> |
| 31 <script> |
| 32 function assert_rect_equals(actual, expected) { |
| 33 for (let component of ['left', 'top', 'width', 'height']) |
| 34 assert_equals(actual[component], expected[component], component); |
| 35 } |
| 36 |
| 37 test(function() { |
| 38 let rects = document.querySelectorAll('rect'); |
| 39 assert_rect_equals(rects[0].getBoundingClientRect(), { left: 108, top: 108, wi
dth: 100, height: 100}); |
| 40 assert_rect_equals(rects[1].getBoundingClientRect(), { left: 8, top: 8, width:
100, height: 100}); |
| 41 assert_rect_equals(rects[2].getBoundingClientRect(), { left: 8, top: 108, widt
h: 100, height: 100}); |
| 42 assert_rect_equals(rects[3].getBoundingClientRect(), { left: 108, top: 8, widt
h: 100, height: 100}); |
| 43 }); |
| 44 </script> |
OLD | NEW |