Source code
Revision control
Copy as Markdown
Other Tools
Utilities.extendObject(Strings.text, {
samples: "Samples",
complexity: "Time Complexity",
frameRate: "FPS",
confidenceInterval: "80% Confidence Interval",
mergedRawComplexity: "Raw Complexity",
graph: "Graph"
});
Utilities.extendObject(Headers, {
details: [
{
title: Strings.text.graph
},
{
title: Strings.text.confidenceInterval,
children:
[
{
text: function(data) {
return data[Strings.json.complexity][Strings.json.bootstrap].confidenceLow.toFixed(2);
},
className: "right pad-left pad-right"
},
{
text: function(data) {
return " - " + data[Strings.json.complexity][Strings.json.bootstrap].confidenceHigh.toFixed(2);
},
className: "left"
},
{
text: function(data) {
var bootstrap = data[Strings.json.complexity][Strings.json.bootstrap];
return (100 * (bootstrap.confidenceLow / bootstrap.median - 1)).toFixed(2) + "%";
},
className: "left pad-left small"
},
{
text: function(data) {
var bootstrap = data[Strings.json.complexity][Strings.json.bootstrap];
return "+" + (100 * (bootstrap.confidenceHigh / bootstrap.median - 1)).toFixed(2) + "%";
},
className: "left pad-left small"
}
]
},
{
title: Strings.text.complexity,
children:
[
{
text: function(data) {
return data[Strings.json.controller][Strings.json.measurements.average].toFixed(2);
},
className: "average"
},
{
text: function(data) {
return [
"± ",
data[Strings.json.controller][Strings.json.measurements.percent].toFixed(2),
"%"
].join("");
},
className: function(data) {
var className = "stdev";
if (data[Strings.json.controller][Strings.json.measurements.percent] >= 10)
className += " noisy-results";
return className;
}
}
]
},
{
title: Strings.text.frameRate,
children:
[
{
text: function(data) {
return data[Strings.json.frameLength][Strings.json.measurements.average].toFixed(2);
},
className: function(data, options) {
var className = "average";
if (Math.abs(data[Strings.json.frameLength][Strings.json.measurements.average] - options["frame-rate"]) >= 2)
className += " noisy-results";
return className;
}
},
{
text: function(data) {
var frameRateData = data[Strings.json.frameLength];
return [
"± ",
frameRateData[Strings.json.measurements.percent].toFixed(2),
"%"
].join("");
},
className: function(data) {
var className = "stdev";
if (data[Strings.json.frameLength][Strings.json.measurements.percent] >= 10)
className += " noisy-results";
return className;
}
}
]
},
{
title: Strings.text.mergedRawComplexity,
children:
[
{
text: function(data) {
return data[Strings.json.complexity][Strings.json.complexity].toFixed(2);
},
className: "average"
},
{
text: function(data) {
return [
"± ",
data[Strings.json.complexity][Strings.json.measurements.stdev].toFixed(2),
"ms"
].join("");
},
className: "stdev"
}
]
}
]
})
///////////
// Suites
Suites.push(new Suite("HTML suite",
[
{
url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=12&particleHeight=12&shape=circle",
name: "CSS bouncing circles"
},
{
url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=40&particleHeight=40&shape=rect&clip=star",
name: "CSS bouncing clipped rects"
},
{
url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=50&particleHeight=50&shape=circle&fill=gradient",
name: "CSS bouncing gradient circles"
},
{
url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=80&particleHeight=80&shape=circle&blend",
name: "CSS bouncing blend circles"
},
{
url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=80&particleHeight=80&shape=circle&filter",
name: "CSS bouncing filter circles"
},
{
url: "bouncing-particles/bouncing-css-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.svg",
name: "CSS bouncing SVG images"
},
{
url: "bouncing-particles/bouncing-tagged-images.html?particleWidth=100&particleHeight=100",
name: "CSS bouncing tagged images"
},
{
url: "dom/leaves.html",
name: "Leaves 2.0"
},
{
url: "dom/focus.html",
name: "Focus 2.0"
},
{
url: "dom/particles.html",
name: "DOM particles, SVG masks"
},
{
url: "dom/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
name: "Composited Transforms"
}
]
));
Suites.push(new Suite("Canvas suite",
[
{
url: "bouncing-particles/bouncing-canvas-shapes.html?particleWidth=40&particleHeight=40&shape=rect&clip=star",
name: "canvas bouncing clipped rects"
},
{
url: "bouncing-particles/bouncing-canvas-shapes.html?particleWidth=50&particleHeight=50&shape=circle&fill=gradient",
name: "canvas bouncing gradient circles"
},
{
url: "bouncing-particles/bouncing-canvas-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.svg",
name: "canvas bouncing SVG images"
},
{
url: "bouncing-particles/bouncing-canvas-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.png",
name: "canvas bouncing PNG images"
},
{
url: "simple/simple-canvas-paths.html?pathType=strokes",
name: "Stroke shapes"
},
{
url: "simple/simple-canvas-paths.html?pathType=fills",
name: "Fill shapes"
},
{
url: "simple/tiled-canvas-image.html",
name: "Canvas put/get image data"
},
]
));
Suites.push(new Suite("SVG suite",
[
{
url: "bouncing-particles/bouncing-svg-shapes.html?particleWidth=12&particleHeight=12&shape=circle",
name: "SVG bouncing circles",
},
{
url: "bouncing-particles/bouncing-svg-shapes.html?particleWidth=40&particleHeight=40&shape=rect&clip=star",
name: "SVG bouncing clipped rects",
},
{
url: "bouncing-particles/bouncing-svg-shapes.html?particleWidth=50&particleHeight=50&shape=circle&fill=gradient",
name: "SVG bouncing gradient circles"
},
{
url: "bouncing-particles/bouncing-svg-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.svg",
name: "SVG bouncing SVG images"
},
{
url: "bouncing-particles/bouncing-svg-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.png",
name: "SVG bouncing PNG images"
},
]
));
Suites.push(new Suite("3D Graphics",
[
{
url: "3d/webgl.html",
name: "WebGL"
},
]
));
Suites.push(new Suite("Basic canvas path suite",
[
{
url: "simple/simple-canvas-paths.html?pathType=line&lineCap=butt",
name: "Canvas line segments, butt caps"
},
{
url: "simple/simple-canvas-paths.html?pathType=line&lineCap=round",
name: "Canvas line segments, round caps"
},
{
url: "simple/simple-canvas-paths.html?pathType=line&lineCap=square",
name: "Canvas line segments, square caps"
},
{
url: "simple/simple-canvas-paths.html?pathType=linePath&lineJoin=bevel",
name: "Canvas line path, bevel join"
},
{
url: "simple/simple-canvas-paths.html?pathType=linePath&lineJoin=round",
name: "Canvas line path, round join"
},
{
url: "simple/simple-canvas-paths.html?pathType=linePath&lineJoin=miter",
name: "Canvas line path, miter join"
},
{
url: "simple/simple-canvas-paths.html?pathType=linePath&lineDash=1",
name: "Canvas line path with dash pattern"
},
{
url: "simple/simple-canvas-paths.html?pathType=quadratic",
name: "Canvas quadratic segments"
},
{
url: "simple/simple-canvas-paths.html?pathType=quadraticPath",
name: "Canvas quadratic path"
},
{
url: "simple/simple-canvas-paths.html?pathType=bezier",
name: "Canvas bezier segments"
},
{
url: "simple/simple-canvas-paths.html?pathType=bezierPath",
name: "Canvas bezier path"
},
{
url: "simple/simple-canvas-paths.html?&pathType=arcTo",
name: "Canvas arcTo segments"
},
{
url: "simple/simple-canvas-paths.html?pathType=arc",
name: "Canvas arc segments"
},
{
url: "simple/simple-canvas-paths.html?pathType=rect",
name: "Canvas rects"
},
{
url: "simple/simple-canvas-paths.html?pathType=ellipse",
name: "Canvas ellipses"
},
{
url: "simple/simple-canvas-paths.html?pathType=lineFill",
name: "Canvas line path, fill"
},
{
url: "simple/simple-canvas-paths.html?pathType=quadraticFill",
name: "Canvas quadratic path, fill"
},
{
url: "simple/simple-canvas-paths.html?pathType=bezierFill",
name: "Canvas bezier path, fill"
},
{
url: "simple/simple-canvas-paths.html?&pathType=arcToFill",
name: "Canvas arcTo segments, fill"
},
{
url: "simple/simple-canvas-paths.html?pathType=arcFill",
name: "Canvas arc segments, fill"
},
{
url: "simple/simple-canvas-paths.html?pathType=rectFill",
name: "Canvas rects, fill"
},
{
url: "simple/simple-canvas-paths.html?pathType=ellipseFill",
name: "Canvas ellipses, fill"
}
]
));