aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/math/bezier_test.html
blob: bab961418abf50e9a48b32b223efbf6c8e9cf2c3 (plain)
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<!--
Copyright 2007 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.math.Bezier</title>
<script src="../base.js"></script>
<script>
  goog.require('goog.math.Bezier');
  goog.require('goog.testing.jsunit');
</script>
</head>
<body>
<script>

  function testEquals() {
    var input = new goog.math.Bezier(1, 2, 3, 4, 5, 6, 7, 8);

    assert(input.equals(input));
  }

  function testClone() {
    var input = new goog.math.Bezier(1, 2, 3, 4, 5, 6, 7, 8);

    assertNotEquals('Clone returns a new object', input, input.clone())
    assert('Contents of clone match original', input.equals(input.clone()));
  }

  function testFlip() {
    var input = new goog.math.Bezier(1, 1, 2, 2, 3, 3, 4, 4);
    var compare = new goog.math.Bezier(4, 4, 3, 3, 2, 2, 1, 1);

    var flipped = input.clone();
    flipped.flip();
    assert('Flipped behaves as expected', compare.equals(flipped));

    flipped.flip();
    assert('Flipping twice gives original', input.equals(flipped));
  }

  function testGetPoint() {
    var input = new goog.math.Bezier(0, 1, 1, 2, 2, 3, 3, 4);

    assert(goog.math.Coordinate.equals(input.getPoint(0),
        new goog.math.Coordinate(0, 1)));
    assert(goog.math.Coordinate.equals(input.getPoint(1),
        new goog.math.Coordinate(3, 4)));
    assert(goog.math.Coordinate.equals(input.getPoint(0.5),
        new goog.math.Coordinate(1.5, 2.5)));
  }

  function testSubdivide() {
    var input = new goog.math.Bezier(0, 1, 1, 2, 2, 3, 3, 4);

    input.subdivide(1/3, 2/3);

    assert(goog.math.nearlyEquals(1, input.x0));
    assert(goog.math.nearlyEquals(2, input.y0));
    assert(goog.math.nearlyEquals(2, input.x3));
    assert(goog.math.nearlyEquals(3, input.y3));    
  }

  function testSolvePositionFromXValue() {
    var eps = 1e-6;
    var bezier = new goog.math.Bezier(0, 0, 0.25, 0.1, 0.25, 1, 1, 1);
    var pt = bezier.getPoint(0.5);
    assertRoughlyEquals(0.3125, pt.x, eps);
    assertRoughlyEquals(0.5375, pt.y, eps);
    assertRoughlyEquals(0.321,
        bezier.solvePositionFromXValue(bezier.getPoint(0.321).x), eps);
  }

  function testSolveYValueFromXValue() {
    var eps = 1e-6;
    // The following example is taken from
    // http://www.netzgesta.de/dev/cubic-bezier-timing-function.html.
    // The timing values shown in that page are 1 - <value> so the
    // bezier curves in this test are constructed with 1 - ctrl points.
    // E.g. ctrl points (0, 0, 0.25, 0.1, 0.25, 1, 1, 1) become
    // (1, 1, 0.75, 0, 0.75, 0.9, 0, 0) here. Since chanding the order of
    // the ctrl points does not affect the shape of the curve, once can also
    // have (0, 0, 0.75, 0.9, 0.75, 0, 1, 1).

    // netzgesta example.
    var bezier = new goog.math.Bezier(1, 1, 0.75, 0.9, 0.75, 0, 0, 0);
    assertRoughlyEquals(0.024374631, bezier.solveYValueFromXValue(0.2), eps);
    assertRoughlyEquals(0.317459494, bezier.solveYValueFromXValue(0.6), eps);
    assertRoughlyEquals(0.905205002, bezier.solveYValueFromXValue(0.9), eps);

    // netzgesta example with ctrl points in the reverse order so that 1st and
    // last ctrl points are (0, 0) and (1, 1). Note the result is exactly the
    // same.
    bezier = new goog.math.Bezier(0, 0, 0.75, 0, 0.75, 0.9, 1, 1);
    assertRoughlyEquals(0.024374631, bezier.solveYValueFromXValue(0.2), eps);
    assertRoughlyEquals(0.317459494, bezier.solveYValueFromXValue(0.6), eps);
    assertRoughlyEquals(0.905205002, bezier.solveYValueFromXValue(0.9), eps);

    // Ease-out css animation timing in webkit.
    bezier = new goog.math.Bezier(0, 0, 0, 0, 0.58, 1, 1, 1);
    assertRoughlyEquals(0.308366667, bezier.solveYValueFromXValue(0.2), eps);
    assertRoughlyEquals(0.785139061, bezier.solveYValueFromXValue(0.6), eps);
    assertRoughlyEquals(0.982973389, bezier.solveYValueFromXValue(0.9), eps);
  }
 
</script>
</body>
</html>