mirror of
https://github.com/novnc/noVNC.git
synced 2026-05-27 15:39:41 +00:00
15ce2f71eb
Previously, setting `innerHTML` was used to display the statuses. These could include content communicated from the remote VNC server, allowing the remove VNC server to inject HTML into the noVNC page. This commit switches all uses of `innerHTML` to use `textContent`, which is not vulnerable to the HTML injection.
149 lines
5.3 KiB
HTML
149 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Canvas Performance Test</title>
|
|
<!--
|
|
<script type='text/javascript'
|
|
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
|
-->
|
|
<script src="../include/util.js"></script>
|
|
<script src="../include/webutil.js"></script>
|
|
<script src="../include/base64.js"></script>
|
|
<script src="../include/display.js"></script>
|
|
<script src="face.png.js"></script>
|
|
</head>
|
|
<body>
|
|
Iterations: <input id='iterations' style='width:50' value="100">
|
|
|
|
Width: <input id='width' style='width:50' value="640">
|
|
Height: <input id='height' style='width:50' value="480">
|
|
|
|
<input id='startButton' type='button' value='Do Performance Test'
|
|
style='width:150px' onclick="begin();">
|
|
|
|
<br><br>
|
|
|
|
<b>Canvas</b> (should see three squares and two happy faces):<br>
|
|
<canvas id="canvas" width="200" height="100"
|
|
style="border-style: dotted; border-width: 1px;">
|
|
Canvas not supported.
|
|
</canvas>
|
|
|
|
<br>
|
|
Results:<br>
|
|
<textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
|
|
</body>
|
|
|
|
<script>
|
|
var msg_cnt = 0;
|
|
var display, start_width = 300, start_height = 100;
|
|
var iterations;
|
|
|
|
function message(str) {
|
|
console.log(str);
|
|
cell = $D('messages');
|
|
cell.textContent += msg_cnt + ": " + str + "\n";
|
|
cell.scrollTop = cell.scrollHeight;
|
|
msg_cnt += 1;
|
|
}
|
|
|
|
function test_functions () {
|
|
var img, x, y, w, h, ctx = display.get_context();
|
|
w = display.get_width();
|
|
h = display.get_height();
|
|
display.fillRect(0, 0, w, h, [240,240,240]);
|
|
|
|
display.blitStringImage("data:image/png;base64," + face64, 150, 10);
|
|
|
|
var himg = new Image();
|
|
himg.onload = function () {
|
|
ctx.drawImage(himg, 200, 40); };
|
|
himg.src = "face.png";
|
|
|
|
/* Test array image data */
|
|
data = [];
|
|
for (y=0; y< 50; y++) {
|
|
for (x=0; x< 50; x++) {
|
|
data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
|
|
data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
|
|
data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
|
|
data[(y*50 + x)*4 + 3] = 255;
|
|
}
|
|
}
|
|
display.blitImage(30, 10, 50, 50, data, 0);
|
|
|
|
img = display.getTile(5,5,16,16,[0,128,128]);
|
|
display.putTile(img);
|
|
|
|
img = display.getTile(90,15,16,16,[0,0,0]);
|
|
display.setSubTile(img, 0,0,16,16,[128,128,0]);
|
|
display.putTile(img);
|
|
}
|
|
|
|
function begin () {
|
|
$D('startButton').value = "Running";
|
|
$D('startButton').disabled = true;
|
|
setTimeout(start_delayed, 250);
|
|
iterations = $D('iterations').value;
|
|
}
|
|
|
|
function start_delayed () {
|
|
var ret;
|
|
|
|
ret = display.set_prefer_js(true);
|
|
if (ret) {
|
|
message("Running test: prefer Javascript ops");
|
|
var time1 = run_test();
|
|
message("prefer Javascript ops: " + time1 + "ms total, " +
|
|
(time1 / iterations) + "ms per frame");
|
|
} else {
|
|
message("Could not run: prefer Javascript ops");
|
|
}
|
|
|
|
display.set_prefer_js(false);
|
|
message("Running test: prefer Canvas ops");
|
|
var time2 = run_test();
|
|
message("prefer Canvas ops: " + time2 + "ms total, " +
|
|
(time2 / iterations) + "ms per frame");
|
|
|
|
if (Util.get_logging() !== 'debug') {
|
|
display.resize(start_width, start_height, true);
|
|
test_functions();
|
|
}
|
|
$D('startButton').disabled = false;
|
|
$D('startButton').value = "Do Performance Test";
|
|
}
|
|
|
|
function run_test () {
|
|
var width, height;
|
|
width = $D('width').value;
|
|
height = $D('height').value;
|
|
display.resize(width, height);
|
|
var color, start_time = (new Date()).getTime(), w, h;
|
|
for (var i=0; i < iterations; i++) {
|
|
color = [128, 128, (255 / iterations) * i, 0];
|
|
for (var x=0; x < width; x = x + 16) {
|
|
for (var y=0; y < height; y = y + 16) {
|
|
w = Math.min(16, width - x);
|
|
h = Math.min(16, height - y);
|
|
var tile = display.getTile(x, y, w, h, color);
|
|
display.setSubTile(tile, 0, 0, w, h, color);
|
|
display.putTile(tile);
|
|
}
|
|
}
|
|
}
|
|
var end_time = (new Date()).getTime();
|
|
return (end_time - start_time);
|
|
}
|
|
|
|
window.onload = function() {
|
|
message("in onload");
|
|
$D('iterations').value = 10;
|
|
display = new Display({'target' : $D('canvas')});
|
|
display.resize(start_width, start_height, true);
|
|
message("Canvas initialized");
|
|
test_functions();
|
|
}
|
|
</script>
|
|
</html>
|