canvas-datagrid
Version:
Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
91 lines (89 loc) • 2.92 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
<style>
#coverage {
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
position: fixed;
right: 70px;
top: 0;
}
.grid-container {
overflow: hidden;
}
canvas-datagrid {
--cdg-height: 100%;
--cdg-width: 100%;
}
</style>
</head>
<body>
<a id="coverage" href="https://tonygermaneri.github.io/canvas-datagrid/build/report/lcov-report/index.html">Latest Coverage Report</a>
<div id="mocha"></div>
<div id="grid"><div></div></div>
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.5.0/async.js"></script>
<script src="../dist/canvas-datagrid.debug.js"></script>
<!-- <script src="../build/canvas-datagrid.instrument.js"></script> -->
<script src="./tests.js"></script>
<script>
mocha.run();
</script>
<meta name="viewport" content="width=device-width">
<style>
html, body {
height: 100%;
min-height: 100%;
background: #CCC;
}
#mocha, #grid {
width: 40%;
display: inline-block;
vertical-align: top;
border: solid 1px #DDD;
background: #EEE;
box-shadow: 5px 5px 12px #777;
padding: 15px;
height: 80%;
overflow-y: auto;
}
#grid {
margin-top: 60px;
width: 420px;
}
.grid-test-title {
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 3px;
background: lightgray;
}
.test-container {
border: solid 1px #AAA;
width: 400px;
margin-bottom: 30px;
padding: 3px;
background: #BBB;
box-shadow: 5px 5px 12px #888;
}
.grid-container {
height: 120px;
width: 400px;
display: inline-block;
background: black;
}
.grid-test-failed {
background: darkred;
color: white;
}
.grid-test-passed {
background: green;
color: white;
}
</style>
</body>
</html>