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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html>
<title>Test DOM APIs which flush the style properly, with 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 20" id="svgroot"></svg>
<script>
'use strict';
function createPath(t) {
const target = document.createElementNS("http://www.w3.org/2000/svg", "path");
document.getElementById('svgroot').appendChild(target);
if (t && typeof t.add_cleanup === "function") {
t.add_cleanup(function() {
target.remove();
});
}
// Set an initial d and flush style first to make sure the following DOM APIs
// do flush again.
target.style.d = 'path("M 0 0")';
assert_equals(getComputedStyle(target).d, 'path("M 0 0")', "the initial d");
return target;
}
test(function(t) {
const target = createPath(t);
target.style.d = 'path("M5,5 L10,5 L10,10")';
assert_equals(target.getTotalLength(), 10, "the total length");
}, "getTotalLength() with d property");
test(function(t) {
const target = createPath(t);
target.style.d = 'path("M5,5 L10,5 L10,10")';
// The first segment of path is (5,5) to (10,5), its length is 5.
// The second segment of path is (10,5) to (10,10), its length is 5.
// So, the length 8 is on the 2nd segment, at (10,8).
const point = target.getPointAtLength(8);
assert_equals(point.x, 10, "x-axis position");
assert_equals(point.y, 8, "y-axis position");
}, "getPointAtLength() with d property");
test(function(t) {
const target = createPath(t);
const svgPoint = document.getElementById("svgroot").createSVGPoint();
svgPoint.x = 10;
svgPoint.y = 8;
target.style.d = 'path("M5,5 L10,5 L10,10")';
assert_equals(target.isPointInFill(svgPoint), true);
}, "isPointInFill() with d property");
test(function(t) {
const target = createPath(t);
const svgPoint = document.getElementById("svgroot").createSVGPoint();
svgPoint.x = 10;
svgPoint.y = 8;
target.style.d = 'path("M5,5 L10,5 L10,10")';
assert_equals(target.isPointInStroke(svgPoint), true);
}, "isPointInStroke() with d property");
</script>
|
