<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
  <title>SVGGeometryElement.getPointAtLength: 'display' and a valid path</title>
  <h:link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength"/>
  <h:script src="/resources/testharness.js"/>
  <h:script src="/resources/testharnessreport.js"/>
  <path id='pathElement1' d='M0,0L100,0L100,100' description='path with display: default'/>
  <path id='pathElement2' style='display:none' d='M0,0L100,0L100,100' description='path with display: none'/>
  <path id='pathElement3' style='display:none; d:path("M0,0L100,0L100,100");' description='path with display: none and inline style'/>
  <rect id='rectElement1' x='0' y='0' width='50' height='50' description='rect with display: default'/>
  <rect id='rectElement2' style='display:none' x='0' y='0' width='50' height='50' description='rect with display: none'/>
  <circle id='circleElement1' cx='0' cy='0' r='50' description='circle with display: default'/>
  <circle id='circleElement2' style='display:none' cx='0' cy='0' r='50' description='circle with display: none'/>
  <polygon id='polygonElement1' points="0,0 50,0 50,50 0,50" description='polygon with display: default'/>
  <polygon id='polygonElement2' style='display:none' points="0,0 50,0 50,50 0,50" description='polygon with display: none'/>
  <polyline id='polylineElement1' points="0,0 50,0 50,50 0,50" description='polyline with display: default'/>
  <polyline id='polylineElement2' style='display:none' points="0,0 50,0 50,50 0,50" description='polyline with display: none'/>
  <ellipse id='ellipseElement1' cx='0' cy='0' rx='50' ry='50' description='ellipse with display: default'/>
  <ellipse id='ellipseElement2' style='display:none' cx='0' cy='0' rx='50' ry='50' description='ellipse with display: none'/>
  <script>
['pathElement1', 'pathElement2', 'pathElement3'].forEach(elementId => {
  test(function() {
    let element = document.getElementById(elementId);
    var point = element.getPointAtLength(50);
    assert_approx_equals(point.x, 50, 1e-5);
    assert_approx_equals(point.y, 0, 1e-5);
  }, document.title + ', ' +
     document.getElementById(elementId).getAttribute('description'));
});

['rectElement1', 'rectElement2'].forEach(elementId => {
  test(function() {
    let element = document.getElementById(elementId);
    var point = element.getPointAtLength(50);
    assert_approx_equals(point.x, 50, 1e-5);
    assert_approx_equals(point.y, 0, 1e-5);
  }, document.title + ', ' +
     document.getElementById(elementId).getAttribute('description'));
});

['circleElement1', 'circleElement2'].forEach(elementId => {
  test(function() {
    let element = document.getElementById(elementId);
    var point = element.getPointAtLength(0);
    assert_approx_equals(point.x, 50, 1e-5);
    assert_approx_equals(point.y, 0, 1e-5);
  }, document.title + ', ' +
     document.getElementById(elementId).getAttribute('description'));
});

['polygonElement1', 'polygonElement2'].forEach(elementId => {
  test(function() {
    let element = document.getElementById(elementId);
    var point = element.getPointAtLength(50);
    assert_approx_equals(point.x, 50, 1e-5);
    assert_approx_equals(point.y, 0, 1e-5);
  }, document.title + ', ' +
     document.getElementById(elementId).getAttribute('description'));
});

['polylineElement1', 'polylineElement2'].forEach(elementId => {
  test(function() {
    let element = document.getElementById(elementId);
    var point = element.getPointAtLength(50);
    assert_approx_equals(point.x, 50, 1e-5);
    assert_approx_equals(point.y, 0, 1e-5);
  }, document.title + ', ' +
     document.getElementById(elementId).getAttribute('description'));
});

['ellipseElement1', 'ellipseElement2'].forEach(elementId => {
  test(function() {
    let element = document.getElementById(elementId);
    var point = element.getPointAtLength(0);
    assert_approx_equals(point.x, 50, 1e-5);
    assert_approx_equals(point.y, 0, 1e-5);
  }, document.title + ', ' +
     document.getElementById(elementId).getAttribute('description'));
});
  </script>
</svg>