svg/path/interfaces/SVGPathSegment.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:h="http://www.w3.org/1999/xhtml">
  <metadata>
    <h:link rel="help" href="https://svgwg.org/specs/paths/#InterfaceSVGPathSegment"/>
  </metadata>
  <h:script src="/resources/testharness.js"/>
  <h:script src="/resources/testharnessreport.js"/>

  <path id="track" d="m 10 20 h 30"/>S

  <script><![CDATA[
  test(function() {
    let track = document.getElementById('track');
    assert_equals(Object.getPrototypeOf(track), SVGPathElement.prototype);
    assert_not_equals(track.getPathData, undefined);
    assert_not_equals(track.setPathData, undefined);
    assert_not_equals(track.getPathSegmentAtLength, undefined);
  }, "SVGPathSegment interface exists");

  function checkObjects(actual, expected, epsilon) {
    if (Array.isArray(expected)) {
      if (actual.length != expected.length) {
        return false;
      }
      for (let i = 0; i < expected.length; i++) {
        if (!checkObjects(actual[i], expected[i], epsilon) ) {
          return false;
        }
      }
      return true;
    }
    if (typeof expected == "object") {
      for (let key in expected) {
        if (!checkObjects(actual[key], expected[key], epsilon)) {
          return false;
        }
      }
      return true;
    }
    if (typeof expected == "number") {
      if (epsilon === undefined) {
        epsilon = 0;
      }
      return Math.abs(actual - expected) <= epsilon;
    }
    return actual == expected;
  }

  function ToString(value) {
    let output = "";
    if (Array.isArray(value)) {
      let arrayAsString = [];
      for (let i = 0; i < value.length; i++) {
        arrayAsString.push(ToString(value[i]));
      }
      return arrayAsString.join(' ');
    }
    if (typeof value == "object") {
      let objectAsArray = [];
      for (let key in value) {
        objectAsArray.push(ToString(value[key]));
      }
      return objectAsArray.join(' ');
    }
    if (typeof value == "number") {
      return "" + +value.toFixed(3);
    }
    return  value;
  }

  var checkPathData = function(actual, expected, epsilon) {
    assert_true(checkObjects(actual, expected, epsilon), "actual:" + ToString(actual) + " expected:" + ToString(expected));
  };

  let getPathDataTests = [
    {
      description: "straight lines",
      input: "M 0 0 H 100 V 100 H 0 Z",
      output: [
        { type: "M", values: [0, 0] },
        { type: "H", values: [100] },
        { type: "V", values: [100] },
        { type: "H", values: [0] },
        { type: "Z", values: [] }
      ]
    },
    {
      description: "cubic",
      input: "M 413 140 C 413 140 438 40 302 44",
      output: [
        { type: "M", values: [413, 140] },
        { type: "C", values: [413, 140, 438, 40, 302, 44] }
      ]
    }
  ];

  getPathDataTests.forEach(t => {
    test(_ => {
      let path = document.createElementNS("http://www.w3.org/2000/svg", "path");

      path.setAttribute("d", t.input);
      let pathData = path.getPathData();

      checkPathData(pathData, t.output);
    }, "Test path.getPathData() " + t.description)
  });


  let getNormalizedPathDataTests = [
    {
      description: "straight lines",
      input: "M 0 0 H 100 V 100 H 0 Z",
      output: [
        { type: "M", values: [0, 0] },
        { type: "L", values: [100, 0] },
        { type: "L", values: [100, 100] },
        { type: "L", values: [0, 100] },
        { type: "Z", values: [] }
      ]
    },
    {
      description: "cubic",
      input: "M 0 0 C 30,90 25,10 50,10 S 70,90 90,90",
      output: [
        { type: "M", values: [0, 0] },
        { type: "C", values: [30, 90, 25, 10, 50, 10] },
        { type: "C", values: [75, 10, 70, 90, 90, 90] },
      ]
    },
    {
      description: "quadratic",
      input: "M 0 0 Q 30 30 30 60 t 30 0 30 0 30 0 30 0 30 0",
      output: [
        { type: "M", values: [0, 0] },
        { type: "C", values: [20, 20, 30, 40, 30, 60] },
        { type: "C", values: [30, 80, 40, 80, 60, 60] },
        { type: "C", values: [80, 40, 90, 40, 90, 60] },
        { type: "C", values: [90, 80, 100, 80, 120, 60] },
        { type: "C", values: [140, 40, 150, 40, 150, 60] },
        { type: "C", values: [150, 80, 160, 80, 180, 60] },
      ]
    },
    {
      description: "elliptical arc",
      input: "M 6 10 A 10 10 10 0 0 15 10",
      output: [
        { type: "M", values: [6, 10] },
        { type: "C", values: [8.83, 11.426, 12.169, 11.426, 15, 10] },
      ],
      epsilon: 0.01,
    },
  ];

  getNormalizedPathDataTests.forEach(t => {
    test(_ => {
      let path = document.createElementNS("http://www.w3.org/2000/svg", "path");

      path.setAttribute("d", t.input);
      let pathData = path.getPathData({normalize: true});

      checkPathData(pathData, t.output, t.epsilon);
    }, "Test path.getPathData({normalize: true}) " + t.description)
  });

  let setPathDataTests = [
    {
      description: "lines",
      input: [
        { type: "M", values: [0, 0] },
        { type: "L", values: [10, 10] },
        { type: "Z", values: [] }
      ],
      output: "M 0 0 L 10 10 Z"
    },
    {
      description: "empty",
      input: [],
      output: ""
    },
  ];

  setPathDataTests.forEach(t => {
    test(_ => {
      let path = document.createElementNS("http://www.w3.org/2000/svg", "path");

      path.setAttribute("d", t.output);
      let segments = path.getPathData();
      path.removeAttribute("d");
      path.setPathData(segments);

      assert_equals(path.getAttribute("d"), t.output);
    }, "Test path.setPathData()" + t.description);
  });

  ]]></script>
</svg>