1<!-- This benchmark run a lot of small benchmarks that are defined with a karma-like sytax
2  in canvas_perf.js
3-->
4<!DOCTYPE html>
5<html>
6<head>
7  <title>CanvasKit SKP Perf</title>
8  <meta charset="utf-8" />
9  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10  <meta name="viewport" content="width=device-width, initial-scale=1.0">
11  <script src="/static/canvaskit.js" type="text/javascript" charset="utf-8"></script>
12  <script src="/static/benchmark.js" type="text/javascript" charset="utf-8"></script>
13  <script src="/static/canvas_perf.js" type="text/javascript" charset="utf-8"></script>
14  <style type="text/css" media="screen">
15    body {
16      margin: 0;
17      padding: 0;
18    }
19  </style>
20</head>
21<body>
22  <main>
23    <button id="start_bench">Start Benchmark</button>
24    <br>
25    <canvas id=anim width=600 height=600 style="height: 600px; width: 600px;"></canvas>
26  </main>
27  <script type="text/javascript" charset="utf-8">
28    const WIDTH  = 600;
29    const HEIGHT = 600;
30    const WARM_UP_FRAMES = 5;
31    // Keeping this a little lower because this test runs many smaller tests,
32    // each for this many frames, which could add up to a long time.
33    const MAX_FRAMES = 51;
34
35    // Any external files needed by tests in canvas_perf.js must be listed here.
36    // And checked in under canvas_perf_assets/
37    // tests may then fetch them from ctx.files['filename']
38    const testDataFiles = [
39      'test_64x64.png',
40      'test_512x512.png',
41      'test_1500x959.jpg',
42      'Roboto-Regular.ttf',
43    ];
44
45    (function() {
46      const filePromises = [];
47      for (const filename of testDataFiles) {
48        filePromises.push(fetch('/static/assets/'+filename).then((resp) => {
49          return resp.arrayBuffer(); // this is also a promise.
50        }));
51      }
52      const externals = Promise.all(filePromises).then((results) => {
53        const files = {};
54        let i=0;
55        for (const bytes of results) {
56          // store them by name
57          files[testDataFiles[i]] = bytes;
58          i++;
59        }
60        return files;
61      });
62
63      const loadCanvasKit = CanvasKitInit({
64        locateFile: (file) => '/static/' + file,
65      });
66
67      Promise.all([loadCanvasKit, externals]).then(([CanvasKit, externalFiles]) => {
68        const urlSearchParams = new URLSearchParams(window.location.search);
69        let glversion = 2;
70        if (urlSearchParams.has('webgl1')) {
71          glversion = 1;
72        }
73        let surface = getSurface(CanvasKit, glversion);
74        if (!surface) {
75          console.error('Could not make surface', window._error);
76          return;
77        }
78
79        document.getElementById('start_bench').addEventListener('click', async () => {
80          window._perfData = {};
81
82          // canvas_perf.js should have defined an array called tests whose objects have:
83          //  setup:    A function called once before testing begins, it is expected to make its
84          //            own canvas and put it in ctx.
85          //  test:     A function called to draw one frame
86          //  teardown: A function called after testing finishes
87          //  description:     A human readable description
88          //  perfkey:  A key used to save the results in perf.skia.org.
89          //
90          // For quick local bench testing, there is also an array called onlytests. This way
91          // a developer can replace tests.push with onlytests.push to just run one or two
92          // performance benchmarks they care about.
93          let testsToRun = tests;
94          if (onlytests.length) {
95            testsToRun = onlytests;
96          }
97
98          for (const t of testsToRun) {
99            let ctx = {
100              'surface': surface,
101              'files': externalFiles,
102            };
103            console.log('Benchmarking "' + t.description + '"');
104            t.setup(CanvasKit, ctx);
105            function draw() {
106              t.test(CanvasKit, ctx);
107            }
108            // TODO(nifong): is it ok to keep re-using the surface?
109            results = await startTimingFrames(draw, surface, WARM_UP_FRAMES, MAX_FRAMES);
110            t.teardown(CanvasKit, ctx);
111            window._perfData[t.perfKey] = results;
112
113            // Delete and re-create surface between tests, to prevent the possibility of
114            // interference between them through the state of surface, the gl context, or things
115            // that are keyed by the surface's gen id.
116            surface.delete();
117            surface = getSurface(CanvasKit, glversion);
118
119            // TODO(nifong): provide a function similar to startTimingFrames for timing
120            // non-visual tests.
121          }
122          surface.delete();
123          window._perfDone = true;
124        });
125        console.log('Perf is ready');
126        window._perfReady = true;
127      });
128    }
129  )();
130
131  </script>
132</body>
133</html>
134