1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<title>Test for getPathSegmentAtLength 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.getPathSegmentAtLength(5).type, "L");
assert_array_equals(target1.getPathSegmentAtLength(5).values, [8, 8]);
assert_equals(target2.getPathSegmentAtLength(5).type, "L");
assert_array_equals(target2.getPathSegmentAtLength(5).values, [8, 8]);
assert_equals(target1.getPathSegmentAtLength(10).type, "L");
assert_array_equals(target1.getPathSegmentAtLength(10).values, [12, 4]);
assert_equals(target2.getPathSegmentAtLength(10).type, "L");
assert_array_equals(target2.getPathSegmentAtLength(10).values, [12, 4]);
}, "getPathSegmentAtLength works properly on both d attribute and d property");
test(function() {
let target = document.getElementById('target1');
target.style.d = 'path("M2,2 h3 v5")';
assert_equals(target.getPathSegmentAtLength(5).type, "v");
assert_array_equals(target.getPathSegmentAtLength(5).values, [5]);
}, "getPathSegmentAtLength works properly after updating d property");
</script>
|
