<!DOCTYPE html>
<title>Test for getPathSegAtLength for d property</title>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
svg {
  width: 10%;
  height: 10%;
  background: #eee;
}
svg path {
  fill: none;
  stroke: #000;
}
</style>

<div id="log"></div>

<svg viewBox="0 0 20 10">
  <path id='target1' d="M2,2 L8,8 L12,4"/>
</svg>
<svg viewBox="0 0 20 10">
  <path id='target2' style='d: path("M2,2 L8,8 L12,4")' />
</svg>

<script>
/* global test, assert_equals */

'use strict';

test(function() {
  let target1 = document.getElementById('target1');
  let target2 = document.getElementById('target2');
  assert_equals(target1.getPathSegAtLength(5), 1);
  assert_equals(target2.getPathSegAtLength(5), 1);

  assert_equals(target1.getPathSegAtLength(10), 2);
  assert_equals(target2.getPathSegAtLength(10), 2);
}, "getPathSegAtLength works properly on both d attribute and d property");

test(function() {
  let target = document.getElementById('target1');
  // Note: in order to make sure we flush style properly, we call
  // getComputedStyle after setting an initial value first, so if
  // getPathSegAtLength(5) doesn't flush style, it returns 0.
  target.style.d = 'none';
  assert_equals(getComputedStyle(target).d, "none");

  target.style.d = 'path("M2,2 h3 v5")';
  assert_equals(target.getPathSegAtLength(5), 2);
}, "getPathSegAtLength works properly after updating d property");

</script>
