참고소스 수정본

참고/playwright-main/tests/assets/grid.html

@@ -0,0 +1,66 @@
+<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;
+}
+
+html {
+    scrollbar-width: 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>