wpt / svg / path / parsing / curveto-commands.html

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

TestTest SourceSubtests (0/11)

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

SubtestStatusMessage
Absolute curveto: C 100,25 150,75 200,50FAILnot a callable function
Relative curveto: c 50,-25 100,25 150,0 from (50,50)FAILnot a callable function
Curveto endpoints are correctFAILnot a callable function
Multiple curveto triplets: C x1,y1 x2,y2 x,y x1,y1 x2,y2 x,yFAILnot a callable function
Smooth curveto: S 175,200 200,150FAILnot a callable function
Smooth curveto after C: reflects control pointFAILnot a callable function
Relative smooth curveto: s x2,y2 x,yFAILnot a callable function
Smooth curveto without preceding curveFAILnot a callable function
Multiple smooth curveto pairsFAILnot a callable function
Curveto with space separators (no commas)FAILnot a callable function
Curveto with all comma separatorsFAILnot a callable function

/svg/path/parsing/curveto-commands.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Path Data: Curveto commands (C/c, S/s)</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">
  <!-- Cubic Bezier curve -->
  <path id="test-C" d="M 50,50 C 100,25 150,75 200,50" fill="none" stroke="black" stroke-width="2"/>

  <!-- Relative cubic Bezier -->
  <path id="test-c" d="M 50,50 c 50,-25 100,25 150,0" fill="none" stroke="blue" stroke-width="1" stroke-dasharray="2,2"/>

  <!-- Smooth cubic Bezier -->
  <path id="test-S" d="M 50,150 C 75,100 100,100 125,150 S 175,200 200,150" fill="none" stroke="green" stroke-width="2"/>
</svg>

<script>
test(function() {
  const path = document.getElementById('test-C');
  const length = path.getTotalLength();

  assert_greater_than(length, 0, "C command creates a curve");
  assert_greater_than(length, 100, "Curve is longer than straight distance");
}, "Absolute curveto: C 100,25 150,75 200,50");

test(function() {
  const pathC = document.getElementById('test-C');
  const pathc = document.getElementById('test-c');

  // Both should create similar curves
  assert_approx_equals(pathC.getTotalLength(), pathc.getTotalLength(), 1,
    "Relative curveto creates same curve as absolute");
}, "Relative curveto: c 50,-25 100,25 150,0 from (50,50)");

test(function() {
  const pathC = document.getElementById('test-C');
  const startPoint = pathC.getPointAtLength(0);
  const endPoint = pathC.getPointAtLength(pathC.getTotalLength());

  assert_approx_equals(startPoint.x, 50, 0.1, "Curve starts at M point");
  assert_approx_equals(startPoint.y, 50, 0.1, "Curve starts at M point");
  assert_approx_equals(endPoint.x, 200, 0.1, "Curve ends at specified point");
  assert_approx_equals(endPoint.y, 50, 0.1, "Curve ends at specified point");
}, "Curveto endpoints are correct");

test(function() {
  // Multiple curve triplets
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 0,50 C 25,0 50,0 75,50 100,100 125,100 150,50');
  svg.appendChild(path);

  const endPoint = path.getPointAtLength(path.getTotalLength());
  assert_approx_equals(endPoint.x, 150, 0.5, "Multiple curves end at last point");
  assert_approx_equals(endPoint.y, 50, 0.5, "Multiple curves end at last point");
}, "Multiple curveto triplets: C x1,y1 x2,y2 x,y x1,y1 x2,y2 x,y");

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

  assert_greater_than(length, 0, "S command creates a curve");
}, "Smooth curveto: S 175,200 200,150");

test(function() {
  // S command reflects previous control point
  const svg = document.getElementById('svg');
  const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path1.setAttribute('d', 'M 0,50 C 25,0 50,0 75,50 S 125,100 150,50');
  svg.appendChild(path1);

  const length = path1.getTotalLength();
  assert_greater_than(length, 0, "S after C creates smooth curve");
}, "Smooth curveto after C: reflects control point");

test(function() {
  // Relative smooth curveto
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 50,50 C 75,25 100,75 125,50 s 50,-25 75,0');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 0, "Relative s command works");
}, "Relative smooth curveto: s x2,y2 x,y");

test(function() {
  // S without preceding curve (uses current point as reflection)
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 50,50 S 100,25 150,50');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 0, "S without preceding C uses current point");
}, "Smooth curveto without preceding curve");

test(function() {
  // Multiple S commands
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 0,50 C 25,0 50,0 75,50 S 125,100 150,50 175,0 200,50');
  svg.appendChild(path);

  const endPoint = path.getPointAtLength(path.getTotalLength());
  assert_approx_equals(endPoint.x, 200, 0.5, "Multiple S commands");
  assert_approx_equals(endPoint.y, 50, 0.5, "Multiple S commands");
}, "Multiple smooth curveto pairs");

test(function() {
  // Curveto with minimal spacing (no commas)
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 50 50 C 75 25 100 75 125 50');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 0, "C command works with space separators only");
}, "Curveto with space separators (no commas)");

test(function() {
  // Curveto with all commas
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 50,50 C 75,25,100,75,125,50');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 0, "C command works with all comma separators");
}, "Curveto with all comma separators");
</script>
</body>
</html>