Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/types/scripted/SVGGeometryElement.getPointAtLength-04.svg - WPT Dashboard Interop Dashboard
SVG Preview (Scaled)
<title>SVGGeometryElement.getPointAtLength: 'display' and a valid path</title>
<h:link rel="help" href="https://svgwg.org/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>