wpt / svg / path / parsing / moveto-absolute.html

Status: FAIL | Duration: 55ms | Subtests: 0/9 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/9)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
Single moveto: M 100,100FAILnot a callable function
Single moveto has no path lengthFAILnot a callable function
Moveto followed by implicit lineto: M 50,50 150,50FAILnot a callable function
Moveto with multiple coordinate pairs creates implicit lineto commandsFAILnot a callable function
Multiple coordinate pairs after M become implicit linetoFAILnot a callable function
Moveto without whitespace: M100,100FAILnot a callable function
Multiple moveto commands create separate subpathsFAILnot a callable function
Moveto with comma and spaces: M 100 , 200FAILnot a callable function
Moveto without comma: M 100 200FAILnot a callable function

/svg/path/parsing/moveto-absolute.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Path Data: Moveto command - absolute (M)</title>
<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/paths.html#PathDataBNF">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<svg id="svg" width="400" height="400">
  <!-- Single moveto -->
  <path id="test1" d="M 100,100" fill="red" stroke="none"/>

  <!-- Moveto with subsequent lineto (implicit) -->
  <path id="test2" d="M 50,50 150,50 150,150 50,150 Z" fill="none" stroke="black" stroke-width="2"/>
</svg>

<script>
test(function() {
  const path = document.getElementById('test1');
  const point = path.getPointAtLength(0);

  assert_approx_equals(point.x, 100, 0.1, "Moveto x coordinate");
  assert_approx_equals(point.y, 100, 0.1, "Moveto y coordinate");
}, "Single moveto: M 100,100");

test(function() {
  const path = document.getElementById('test1');
  const length = path.getTotalLength();

  // A single moveto has no length
  assert_approx_equals(length, 0, 0.1, "Single moveto has zero length");
}, "Single moveto has no path length");

test(function() {
  const path = document.getElementById('test2');
  const startPoint = path.getPointAtLength(0);

  assert_approx_equals(startPoint.x, 50, 0.1, "Path starts at x=50");
  assert_approx_equals(startPoint.y, 50, 0.1, "Path starts at y=50");
}, "Moveto followed by implicit lineto: M 50,50 150,50");

test(function() {
  const path = document.getElementById('test2');
  const length = path.getTotalLength();

  // Square: 100+100+100+100 = 400
  assert_approx_equals(length, 400, 0.5, "Closed square has perimeter of 400");
}, "Moveto with multiple coordinate pairs creates implicit lineto commands");

test(function() {
  // Multiple coordinate pairs after M
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 10,10 20,20 30,30');
  svg.appendChild(path);

  const startPoint = path.getPointAtLength(0);
  const endPoint = path.getPointAtLength(path.getTotalLength());

  assert_approx_equals(startPoint.x, 10, 0.1, "Starts at 10,10");
  assert_approx_equals(startPoint.y, 10, 0.1, "Starts at 10,10");
  assert_approx_equals(endPoint.x, 30, 0.1, "Ends at 30,30");
  assert_approx_equals(endPoint.y, 30, 0.1, "Ends at 30,30");
}, "Multiple coordinate pairs after M become implicit lineto");

test(function() {
  // Whitespace variations
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M100,100');
  svg.appendChild(path);

  const point = path.getPointAtLength(0);
  assert_approx_equals(point.x, 100, 0.1, "M without whitespace");
  assert_approx_equals(point.y, 100, 0.1, "M without whitespace");
}, "Moveto without whitespace: M100,100");

test(function() {
  // Multiple moveto commands (creates subpaths)
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 10,10 L 20,20 M 30,30 L 40,40');
  svg.appendChild(path);

  // Should have two separate subpaths
  const startPoint = path.getPointAtLength(0);
  assert_approx_equals(startPoint.x, 10, 0.1, "First subpath starts at 10,10");
  assert_approx_equals(startPoint.y, 10, 0.1, "First subpath starts at 10,10");

  // Total length should be sum of both subpaths
  const length = path.getTotalLength();
  const expectedLength = Math.sqrt(200) * 2; // Two diagonal lines of equal length
  assert_approx_equals(length, expectedLength, 0.5, "Two subpaths contribute to total length");
}, "Multiple moveto commands create separate subpaths");

test(function() {
  // Moveto with comma in coordinate pair
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 100 , 200');
  svg.appendChild(path);

  const point = path.getPointAtLength(0);
  assert_approx_equals(point.x, 100, 0.1, "Comma with spaces");
  assert_approx_equals(point.y, 200, 0.1, "Comma with spaces");
}, "Moveto with comma and spaces: M 100 , 200");

test(function() {
  // Moveto without comma
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 100 200');
  svg.appendChild(path);

  const point = path.getPointAtLength(0);
  assert_approx_equals(point.x, 100, 0.1, "Space separator");
  assert_approx_equals(point.y, 200, 0.1, "Space separator");
}, "Moveto without comma: M 100 200");
</script>
</body>
</html>