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