transform-origin-014.html (1861B)
1 <!DOCTYPE html> 2 <title>CSS Transforms: 'transform-origin' resolved values in SVG</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #target1 { 8 transform-origin: 50% 50%; 9 transform-box: fill-box; 10 } 11 12 #target2, #target3, #target4 { 13 transform-origin: 50% 50%; 14 } 15 </style> 16 <svg fill="blue"> 17 <rect id="target1" x="100" y="100" width="100" height="100"/> 18 <rect id="target2" width="100" height="100"/> 19 <svg viewBox="0 0 50 50" x="100" width="100" height="100"> 20 <rect id="target3" width="100" height="100"/> 21 </svg> 22 <svg y="100" width="100" height="100"> 23 <rect id="target4" width="100" height="100"/> 24 </svg> 25 </svg> 26 <script> 27 test(function() { 28 let target = document.getElementById("target1"); 29 assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), 30 "50px 50px"); 31 }, "Percentage 'transform-origin' with 'fill-box' transform-box"); 32 33 test(function() { 34 let target = document.getElementById("target2"); 35 assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), 36 "150px 75px"); 37 }, "Percentage 'transform-origin' with 'view-box' transform-box"); 38 39 test(function() { 40 let target = document.getElementById("target3"); 41 assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), 42 "25px 25px"); 43 }, "Percentage 'transform-origin' with 'view-box' transform-box in nested <svg> with 'viewBox'"); 44 45 test(function() { 46 let target = document.getElementById("target4"); 47 assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), 48 "50px 50px"); 49 }, "Percentage 'transform-origin' with 'view-box' transform-box in nested <svg> without 'viewBox'"); 50 </script>