<!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="../.././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>