wpt / svg / path / parsing / quadratic-bezier-commands.html

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

TestTest SourceSubtests (0/14)

Data from commit:
96ff533 Remove hidden nodes from the acccessibility tree (#823) (2026-09-07)

SubtestStatusMessage
Absolute quadratic bezier: Q 100,25 150,50FAILnot a callable function
Relative quadratic bezier: q 50,-25 100,0 from (50,50)FAILnot a callable function
Quadratic bezier endpoints are correctFAILnot a callable function
Multiple quadratic bezier pairs: Q x1,y1 x,y x1,y1 x,yFAILnot a callable function
Smooth quadratic bezier: T 150,150FAILnot a callable function
Smooth quadratic bezier after Q: reflects control pointFAILnot a callable function
Relative smooth quadratic bezier: t x,yFAILnot a callable function
Smooth quadratic bezier without preceding QFAILnot a callable function
Multiple smooth quadratic bezier coordinatesFAILnot a callable function
Chain of T commands: each T reflects previous control pointFAILnot a callable function
Quadratic bezier with space separators (no commas)FAILnot a callable function
Quadratic bezier with all comma separatorsFAILnot a callable function
Smooth quadratic bezier after cubic curveFAILnot a callable function
Quadratic bezier after smooth quadratic bezierFAILnot a callable function

/svg/path/parsing/quadratic-bezier-commands.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Path Data: Quadratic Bezier curveto (Q/q, T/t)</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">
  <!-- Quadratic Bezier curve -->
  <path id="test-Q" d="M 50,50 Q 100,25 150,50" fill="none" stroke="black" stroke-width="2"/>

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

  <!-- Smooth quadratic Bezier -->
  <path id="test-T" d="M 50,150 Q 75,125 100,150 T 150,150" fill="none" stroke="green" stroke-width="2"/>
</svg>

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

  assert_greater_than(length, 0, "Q command creates a curve");
  assert_greater_than(length, 90, "Curve is longer than straight distance");
}, "Absolute quadratic bezier: Q 100,25 150,50");

test(function() {
  const pathQ = document.getElementById('test-Q');
  const pathq = document.getElementById('test-q');

  // Both should create same curve
  assert_approx_equals(pathQ.getTotalLength(), pathq.getTotalLength(), 1,
    "Relative quadratic bezier creates same curve as absolute");
}, "Relative quadratic bezier: q 50,-25 100,0 from (50,50)");

test(function() {
  const pathQ = document.getElementById('test-Q');
  const startPoint = pathQ.getPointAtLength(0);
  const endPoint = pathQ.getPointAtLength(pathQ.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, 150, 0.1, "Curve ends at specified point");
  assert_approx_equals(endPoint.y, 50, 0.1, "Curve ends at specified point");
}, "Quadratic bezier endpoints are correct");

test(function() {
  // Multiple quadratic bezier pairs
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 0,50 Q 25,25 50,50 75,75 100,50');
  svg.appendChild(path);

  const endPoint = path.getPointAtLength(path.getTotalLength());
  assert_approx_equals(endPoint.x, 100, 0.5, "Multiple Q curves end at last point");
  assert_approx_equals(endPoint.y, 50, 0.5, "Multiple Q curves end at last point");
}, "Multiple quadratic bezier pairs: Q x1,y1 x,y x1,y1 x,y");

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

  assert_greater_than(length, 0, "T command creates a curve");
}, "Smooth quadratic bezier: T 150,150");

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

  const length = path.getTotalLength();
  assert_greater_than(length, 50, "T after Q creates smooth curve");
}, "Smooth quadratic bezier after Q: reflects control point");

test(function() {
  // Relative smooth quadratic bezier
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 50,50 Q 75,25 100,50 t 50,0');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 50, "Relative t command works");
}, "Relative smooth quadratic bezier: t x,y");

test(function() {
  // T without preceding Q (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,200 T 100,200');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 0, "T without preceding Q uses current point");
}, "Smooth quadratic bezier without preceding Q");

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

  const endPoint = path.getPointAtLength(path.getTotalLength());
  assert_approx_equals(endPoint.x, 150, 0.5, "Multiple T commands");
  assert_approx_equals(endPoint.y, 150, 0.5, "Multiple T commands");
}, "Multiple smooth quadratic bezier coordinates");

test(function() {
  // Chain of T commands
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 0,200 Q 12.5,187.5 25,200 T 50,200 T 75,200');
  svg.appendChild(path);

  const endPoint = path.getPointAtLength(path.getTotalLength());
  assert_approx_equals(endPoint.x, 75, 0.5, "Chain of T commands works");
  assert_approx_equals(endPoint.y, 200, 0.5, "Chain of T commands works");
}, "Chain of T commands: each T reflects previous control point");

test(function() {
  // Quadratic bezier with minimal spacing
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 50 250 Q 75 225 100 250');
  svg.appendChild(path);

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

test(function() {
  // Quadratic bezier with all commas
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 50,300 Q 75,275,100,300');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 0, "Q command works with all comma separators");
}, "Quadratic bezier with all comma separators");

test(function() {
  // T after C (cubic) command
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 0,250 C 12.5,237.5 25,237.5 37.5,250 T 75,250');
  svg.appendChild(path);

  const length = path.getTotalLength();
  assert_greater_than(length, 0, "T after C command works");
}, "Smooth quadratic bezier after cubic curve");

test(function() {
  // Q after T
  const svg = document.getElementById('svg');
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 0,300 Q 12.5,287.5 25,300 T 50,300 Q 62.5,287.5 75,300');
  svg.appendChild(path);

  const endPoint = path.getPointAtLength(path.getTotalLength());
  assert_approx_equals(endPoint.x, 75, 0.5, "Q after T works");
  assert_approx_equals(endPoint.y, 300, 0.5, "Q after T works");
}, "Quadratic bezier after smooth quadratic bezier");
</script>
</body>
</html>