210 lines
6.9 KiB
HTML
210 lines
6.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" class="has-navbar-fixed-top">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>DeepZoom Tests</title>
|
||
|
|
<!-- disable zooming -->
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||
|
|
|
||
|
|
<script src="../../../lib/3rdparty/all.js"></script>
|
||
|
|
<script src="../../../lib/all.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../test/lib/bulma.css">
|
||
|
|
<link rel="stylesheet" href="../test/lib/mocha.min.css">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../test/test.css">
|
||
|
|
|
||
|
|
<script src="../test/lib/fontawesome.js"></script>
|
||
|
|
<script src="../test/lib/chai.js"></script>
|
||
|
|
<script src="../test/lib/mocha.min.js"></script>
|
||
|
|
<script src="../test/lib/Chart.bundle.min.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<nav class="navbar is-fixed-top has-shadow">
|
||
|
|
<div class="navbar-brand">
|
||
|
|
<a class="navbar-item" href="../../../index.html">
|
||
|
|
<img class="image is-32x32" src="../../../assets/icons/icon.png">
|
||
|
|
</a>
|
||
|
|
<div class="navbar-item">
|
||
|
|
DeepZoom Tests
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<section class="section">
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column" id="main"></div>
|
||
|
|
<div class="column">
|
||
|
|
<aside class="menu">
|
||
|
|
<p class="menu-label">
|
||
|
|
All tests
|
||
|
|
</p>
|
||
|
|
<ul class="menu-list">
|
||
|
|
<li>
|
||
|
|
<a onclick="uiTestSuite.run()">Run all tests</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<p class="menu-label">
|
||
|
|
Memory tests
|
||
|
|
</p>
|
||
|
|
<ul class="menu-list">
|
||
|
|
<li>
|
||
|
|
<a onclick="uiTestSuite.run('zoomInZoomOut')">Zoom in, Zoom out, Zoom in, Zoom out, ...</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<p class="menu-label">Test report</p>
|
||
|
|
<div id="mocha"></div>
|
||
|
|
<div id="chart" style="position: relative; height: 400px; width: 100%;">
|
||
|
|
<canvas id="memoryChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// testFrame
|
||
|
|
//--------------------
|
||
|
|
function loadTestFrame(cb) {
|
||
|
|
|
||
|
|
// remove old iframe
|
||
|
|
const element = document.getElementById('testFrame')
|
||
|
|
if (element) {
|
||
|
|
main.removeChild(element)
|
||
|
|
}
|
||
|
|
|
||
|
|
// create new iframe
|
||
|
|
const iframe = document.createElement("iframe")
|
||
|
|
iframe.setAttribute('id', 'testFrame')
|
||
|
|
iframe.setAttribute('src', './index.html')
|
||
|
|
iframe.setAttribute('style', 'border: 2px solid gray;')
|
||
|
|
iframe.setAttribute('width', '1024')
|
||
|
|
iframe.setAttribute('height', '768')
|
||
|
|
if (cb) {
|
||
|
|
iframe.addEventListener('load', function _callback(event) {
|
||
|
|
cb.call(this, event, iframe)
|
||
|
|
iframe.removeEventListener('load', _callback, true) // execute callback only once
|
||
|
|
}, true)
|
||
|
|
}
|
||
|
|
main.appendChild(iframe)
|
||
|
|
|
||
|
|
// bind to main window (testFrame is not bound automatically)
|
||
|
|
window.testFrame = iframe
|
||
|
|
}
|
||
|
|
|
||
|
|
loadTestFrame()
|
||
|
|
|
||
|
|
// chart
|
||
|
|
//--------------------
|
||
|
|
const data = {
|
||
|
|
datasets: [{
|
||
|
|
label: 'Total HeapSize',
|
||
|
|
data: [],
|
||
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
||
|
|
borderWidth: 1,
|
||
|
|
pointRadius: 1
|
||
|
|
}, {
|
||
|
|
label: 'Used HeapSize',
|
||
|
|
data: [],
|
||
|
|
backgroundColor: 'rgba(255, 206, 86, 0.2)',
|
||
|
|
borderColor: 'rgba(255, 206, 86, 1)',
|
||
|
|
borderWidth: 1,
|
||
|
|
pointRadius: 1
|
||
|
|
}, {
|
||
|
|
label: 'HeapSize Limit',
|
||
|
|
data: [],
|
||
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||
|
|
borderColor: 'rgba(255,99,132,1)',
|
||
|
|
borderWidth: 1,
|
||
|
|
pointRadius: 1
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
|
||
|
|
function addChart() {
|
||
|
|
|
||
|
|
const ctx = document.getElementById('memoryChart').getContext('2d')
|
||
|
|
|
||
|
|
const chart = new Chart(ctx, {
|
||
|
|
type: 'scatter',
|
||
|
|
data,
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: 'JavaScript Memory'
|
||
|
|
},
|
||
|
|
tooltips: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
hover: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
xAxes: [{
|
||
|
|
display: true,
|
||
|
|
scaleLabel: {
|
||
|
|
display: true,
|
||
|
|
labelString: 'Time [min]'
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
min: 0,
|
||
|
|
max: 10,
|
||
|
|
stepSize: 2
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
yAxes: [{
|
||
|
|
display: true,
|
||
|
|
scaleLabel: {
|
||
|
|
display: true,
|
||
|
|
labelString: 'HeapSize [MB]'
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
maxTicksLimit: 6
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const start = Date.now()
|
||
|
|
|
||
|
|
setInterval(() => {
|
||
|
|
|
||
|
|
data.datasets.forEach(function(dataset) {
|
||
|
|
const memory = window.performance.memory
|
||
|
|
const x = (Date.now() - start) / 1000 / 60
|
||
|
|
let y = 0
|
||
|
|
if (dataset.label === 'Total HeapSize') {
|
||
|
|
y = memory.totalJSHeapSize / 1000 / 1000
|
||
|
|
} else if (dataset.label === 'Used HeapSize') {
|
||
|
|
y = memory.usedJSHeapSize / 1000 / 1000
|
||
|
|
} else {
|
||
|
|
y = memory.jsHeapSizeLimit / 1000 / 1000
|
||
|
|
}
|
||
|
|
dataset.data.push({x, y})
|
||
|
|
});
|
||
|
|
|
||
|
|
chart.update()
|
||
|
|
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (/chrome/i.test(navigator.userAgent)) {
|
||
|
|
addChart()
|
||
|
|
} else {
|
||
|
|
console.log('No Chrome, no Chart :-(')
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script src="../../../lib/bootstrap.js"></script>
|
||
|
|
<script>
|
||
|
|
Bootstrap.import('../test/testsuite.js')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|