Skip to content

Commit ca38b24

Browse files
smfrsmfr
committed
Tentative Canvas “Radial Chart” test
See Description.md for details.
1 parent 12a6a6a commit ca38b24

File tree

8 files changed

+1245
-2
lines changed

8 files changed

+1245
-2
lines changed

‎MotionMark/resources/debug-runner/tests.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,10 @@ Suites.push(new Suite("Dev suite",
462462
{
463463
url: "dev/stories/stories.html",
464464
name: "Stories"
465+
},
466+
{
467+
url: "dev/radial-chart/radial-chart.html",
468+
name: "Canvas Radial Chart"
465469
}
466470
]
467471
));

‎MotionMark/resources/extensions.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -298,12 +298,12 @@ class Point {
298298

299299
length()
300300
{
301-
return Math.sqrt(this.x * this.x + this.y * this.y);
301+
return Math.hypot(this.x, this.y);
302302
}
303303

304304
normalize()
305305
{
306-
var l = Math.sqrt(this.x * this.x + this.y * this.y);
306+
const l = this.length();
307307
this.x /= l;
308308
this.y /= l;
309309
return this;

‎MotionMark/tests/dev/radial-chart/Description.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Canvas Radial Chart
2+
3+
Goals
4+
-----
5+
6+
A single canvas test that exercises much of the canvas 2D API, replacing `Paths`, `Arcs` and `Lines`.
7+
8+
9+
Design
10+
------
11+
12+
A radial chart. Unit of work is a chart "segment". With higher complexities, more rings of segments are created.
13+
14+
15+
Features tested
16+
---------------
17+
18+
* text drawing
19+
* image drawing
20+
* lines, arcs, curves
21+
* dashed lines
22+
* clipping to a path
23+
* gradients
24+
* text with shadowBlur
25+
26+
27+
Work per measured frame
28+
----------------------
29+
30+
Redraw of the entire canvas
31+
32+
33+
Licensing requirements
34+
----------------------
35+
36+
French departements images, e.g. https://commons.wikimedia.org/wiki/File:Blason_département_fr_Ain.svg
37+
Creative Commons, requires attribution.
38+
39+
40+
Remaining work
41+
--------------
42+
43+
* Add images for the rest of the departements. Maybe use a sprite image.
44+
* Add some more canvas features?
45+
* Revisit whether the concentric rings are best for high complexity. Perhaps have multiple, smaller non-overlapping rings.

‎MotionMark/tests/dev/radial-chart/radial-chart.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!--
2+
Copyright (C) 2015-2017 Apple Inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without
5+
modification, are permitted provided that the following conditions
6+
are met:
7+
1. Redistributions of source code must retain the above copyright
8+
notice, this list of conditions and the following disclaimer.
9+
2. Redistributions in binary form must reproduce the above copyright
10+
notice, this list of conditions and the following disclaimer in the
11+
documentation and/or other materials provided with the distribution.
12+
13+
THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15+
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16+
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17+
BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18+
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19+
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20+
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21+
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22+
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23+
THE POSSIBILITY OF SUCH DAMAGE.
24+
-->
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<meta charset="utf-8">
29+
<link rel="stylesheet" type="text/css" href="../../resources/stage.css">
30+
<style>
31+
#stage-canvas {
32+
width: 100%;
33+
height: 100%;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div id="stage">
39+
<canvas id="stage-canvas"></canvas>
40+
</div>
41+
<script src="../../../resources/strings.js"></script>
42+
<script src="../../../resources/extensions.js"></script>
43+
<script src="../../../resources/statistics.js"></script>
44+
<script src="../../resources/math.js"></script>
45+
<script src="../../resources/benchmark.js"></script>
46+
<script src="../../resources/controllers.js"></script>
47+
<script src="../../resources/stage.js"></script>
48+
<script src="resources/radial-chart.js"></script>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)