wpt / svg / path / interfaces / setPathData-css-d.tentative.html

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

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

SubtestStatusMessage
setPathData() updates the attribute; CSS d property overrides used valueFAILnot a callable function
setPathData() drives used value when no CSS d property is setFAILnot a callable function

/svg/path/interfaces/setPathData-css-d.tentative.html

<!doctype html>
<title>SVGPathElement.setPathData() interaction with CSS d property</title>
<link rel="help" href="https://svgwg.org/specs/paths/#__svg__SVGPathData__setPathData">
<link rel="help" href="https://www.w3.org/TR/SVG2/paths.html#TheDProperty">
<link rel="author" title="Virali Purbey" href="mailto:viralipurbey@microsoft.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
  #css-path { d: path("M 0 0 L 100 100"); }
</style>
<svg width="200" height="200">
  <path id="css-path" />
  <path id="attr-path" />
</svg>
<script>
// CSS `d` property wins over the d-attribute per CSS cascade rules.

test(() => {
  const path = document.getElementById("css-path");
  path.setPathData([
    { type: "M", values: [0, 0] },
    { type: "L", values: [10, 10] }
  ]);
  // setPathData() writes the segments back to the d-attribute.
  assert_equals(path.getAttribute("d"), "M 0 0 L 10 10",
      "setPathData updates the d-attribute");
  // ...but the used value is the CSS d property.
  const used = getComputedStyle(path).d;
  assert_equals(used, 'path("M 0 0 L 100 100")',
      "CSS d property wins over the attribute");
}, "setPathData() updates the attribute; CSS d property overrides used value");

test(() => {
  const path = document.getElementById("attr-path");
  path.setPathData([
    { type: "M", values: [0, 0] },
    { type: "L", values: [20, 20] }
  ]);
  // No CSS d property set, so the attribute drives the used value.
  const used = getComputedStyle(path).d;
  assert_equals(used, 'path("M 0 0 L 20 20")',
      "Attribute drives used value when no CSS d is set");
}, "setPathData() drives used value when no CSS d property is set");
</script>