| <!doctype html> |
| <html> |
| <title>Test computed style on x and y properties</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32"> |
| <defs> |
| <circle id="circle" cx="50" cy="60" r="32"/> |
| </defs> |
| <rect class="test" x="37px" y="50%" width="100" height="100"/> |
| <use class="test" x="17" y="51mm" xlink:href="#circle"/> |
| <svg class="test" x="22%" y="4cm" width="100" height="100"/> |
| <mask class="test" x="15pc" y="27pt"/> |
| <image class="test" y="57"/> |
| <foreignObject class="test" x="32%" y="1"/> |
| </svg> |
| <script> |
| var elms = document.querySelectorAll(".test"); |
| var attrs = [ "x", "y" ]; |
| var expected = [ |
| [ "37px", "50%" ], |
| [ "17px", "192.756px" ], |
| [ "22%", "151.181px" ], |
| [ "240px", "36px" ], |
| [ "0px", "57px" ], |
| [ "32%", "1px" ], |
| ]; |
| |
| function runTestsWithZoom(zoomLevel) { |
| document.querySelector("svg").setAttribute("style", "zoom: " + zoomLevel); |
| for (var i = 0; i < elms.length; i++) { |
| var style = getComputedStyle(elms[i]); |
| for (var j = 0; j < attrs.length; j++) { |
| test(function() { |
| assert_equals(style.getPropertyValue(attrs[j]), expected[i][j]); |
| }, "zoom=" + zoomLevel + ": " + elms[i].localName + " getPropertyValue(" + attrs[j] + ")"); |
| test(function() { |
| assert_equals(style[attrs[j]], expected[i][j]); |
| }, "zoom=" + zoomLevel + ": " +elms[i].localName + " style." + attrs[j]); |
| } |
| } |
| } |
| |
| runTestsWithZoom(1); |
| runTestsWithZoom(2); |
| </script> |
| </html> |
