Restructured library.
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user