playwright/test/assets/grid.html
2020-07-29 16:36:02 -07:00

63 lines
1.4 KiB
HTML

<script>
document.addEventListener('DOMContentLoaded', function() {
function generatePalette(amount) {
var result = [];
var hueStep = 360 / amount;
for (var i = 0; i < amount; ++i)
result.push('hsl(' + (hueStep * i) + ', 100%, 90%)');
return result;
}
var palette = generatePalette(100);
for (var i = 0; i < 200; ++i) {
var box = document.createElement('div');
box.classList.add('box');
box.style.setProperty('background-color', palette[i % palette.length]);
var x = i;
do {
var digit = x % 10;
x = (x / 10)|0;
var img = document.createElement('img');
img.src = `./digits/${digit}.png`;
box.insertBefore(img, box.firstChild);
} while (x);
document.body.appendChild(box);
}
});
</script>
<style>
body {
margin: 0;
padding: 0;
}
.box {
font-family: arial;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 1px solid darkgray;
}
::-webkit-scrollbar {
display: none;
}
@keyframes move {
from { left: -500px; background-color: cyan; }
to { left: 0; background-color: rgb(255, 210, 204); }
}
.box.animation {
position: relative;
animation: 2s linear 0s move forwards;
}
</style>